@valtimo/layout 13.2.0 → 13.2.1

package/fesm2022/valtimo-layout.mjs

@@ -1,20 +1,29 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewChild, ViewContainerRef, NgModule, Inject } from '@angular/core';
-import * as i2 from '@angular/router';
-import { NavigationEnd, RouterModule } from '@angular/router';
-import { Subscription, BehaviorSubject, tap, switchMap, map, combineLatest, take } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import * as i5 from 'carbon-components-angular';
-import { LoadingModule, ButtonModule, IconModule } from 'carbon-components-angular';
+import { Injectable, InjectionToken, EventEmitter, computed, Output, Input, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, ViewChild, Optional, Inject, ViewContainerRef, NgModule } from '@angular/core';
+import { Subscription, debounceTime, map, BehaviorSubject, combineLatest, filter, tap, switchMap, take, of, startWith, delay, Subject } from 'rxjs';
 import * as i4 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
-import * as i2$2 from '@valtimo/shared';
+import * as i2 from '@angular/forms';
+import { Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i2$1 from '@ngx-translate/core';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import * as i1 from '@valtimo/components';
+import { ValuePathSelectorPrefix, InputLabelModule, ValuePathSelectorComponent, CARBON_THEME, CurrentCarbonTheme, ValuePathType, ViewType, CarbonListModule, EllipsisPipe, FormIoModule, CARBON_CONSTANTS, ConfirmationModalModule, JsonEditorComponent, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, CarbonMultiInputModule, RenderInPageHeaderDirective } from '@valtimo/components';
+import * as i3 from 'carbon-components-angular';
+import { ButtonModule, DropdownModule, InputModule, IconModule, AccordionModule, CheckboxModule, TabsModule, Tab, ToggleModule, SelectModule, PaginationModel, PaginationModule, TilesModule, LoadingModule, ProgressIndicatorModule, ModalModule } from 'carbon-components-angular';
+import { TrashCan16 } from '@carbon/icons';
+import * as i2$2 from '@angular/router';
+import { NavigationEnd, RouterModule } from '@angular/router';
+import { filter as filter$1 } from 'rxjs/operators';
+import * as i2$3 from '@valtimo/shared';
 import { GlobalNotificationComponent, ROLE_ADMIN } from '@valtimo/shared';
-import * as i2$1 from '@valtimo/components';
-import { MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, CarbonMultiInputModule, RenderInPageHeaderDirective, ConfirmationModalModule } from '@valtimo/components';
-import { isEqual } from 'lodash';
-import * as i1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { isEqual, cloneDeep } from 'lodash';
+import * as i1$1 from '@valtimo/form';
+import * as i2$4 from '@valtimo/document';
+import * as i3$1 from '@valtimo/access-control';
+import { v4 } from 'uuid';
+import Muuri from 'muuri';
+import { toObservable } from '@angular/core/rxjs-interop';
 import { AuthGuardService } from '@valtimo/security';
 
 /*
@@ -42,10 +51,10 @@ class LayoutService {
     toggleFullscreen() {
         this.fullscreen = !this.fullscreen;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -67,6 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const CUSTOM_WIDGET_TOKEN = new InjectionToken('Specify a component to display per configured custom widget component key.');
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -83,14 +93,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class LayoutPublicComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutPublicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LayoutPublicComponent, isStandalone: false, selector: "valtimo-layout-public", 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<div class=\"public-page-content\">\n  <img src=\"assets/logo.svg\" class=\"logo\" />\n  <router-outlet></router-outlet>\n</div>\n", styles: ["body{background-color:#eee}.public-page-content{background-color:#fff;margin:60px auto;border:1px solid #dee2e6;padding:0 30px 30px}.public-page-content .logo{width:25%;display:block;margin:30px auto}@media (min-width: 768px){.public-page-content{width:50%}}@media (max-width: 767px) and (min-width: 576px){.public-page-content{width:75%}}@media (max-width: 575px){.public-page-content{width:95%}.public-page-content .logo{width:50%}}\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: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutPublicComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-layout-public', standalone: false, 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<div class=\"public-page-content\">\n  <img src=\"assets/logo.svg\" class=\"logo\" />\n  <router-outlet></router-outlet>\n</div>\n", styles: ["body{background-color:#eee}.public-page-content{background-color:#fff;margin:60px auto;border:1px solid #dee2e6;padding:0 30px 30px}.public-page-content .logo{width:25%;display:block;margin:30px auto}@media (min-width: 768px){.public-page-content{width:50%}}@media (max-width: 767px) and (min-width: 576px){.public-page-content{width:75%}}@media (max-width: 575px){.public-page-content{width:95%}.public-page-content .logo{width:50%}}\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"] }]
-        }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -107,37 +109,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class LayoutInternalComponent {
-    constructor(layoutService, renderer, userInterfaceService, shellService) {
-        this.layoutService = layoutService;
-        this.renderer = renderer;
-        this.userInterfaceService = userInterfaceService;
-        this.shellService = shellService;
-        this.showPageHeader$ = this.userInterfaceService.showPageHeader$;
-        this.sideBarExpanded$ = this.shellService.sideBarExpanded$;
-        this.collapsibleWidescreenMenu$ = this.shellService.collapsibleWidescreenMenu$;
-        this.renderer.addClass(document.body, 'be-animate');
+var WidgetDisplayTypeKey;
+(function (WidgetDisplayTypeKey) {
+    WidgetDisplayTypeKey["TEXT"] = "text";
+    WidgetDisplayTypeKey["BOOLEAN"] = "boolean";
+    WidgetDisplayTypeKey["CURRENCY"] = "currency";
+    WidgetDisplayTypeKey["DATE"] = "date";
+    WidgetDisplayTypeKey["DATE_TIME"] = "datetime";
+    WidgetDisplayTypeKey["ENUM"] = "enum";
+    WidgetDisplayTypeKey["NUMBER"] = "number";
+    WidgetDisplayTypeKey["PERCENT"] = "percent";
+    WidgetDisplayTypeKey["LINK"] = "link";
+})(WidgetDisplayTypeKey || (WidgetDisplayTypeKey = {}));
+
+var WidgetType;
+(function (WidgetType) {
+    WidgetType["FIELDS"] = "fields";
+    WidgetType["TABLE"] = "table";
+    WidgetType["CUSTOM"] = "custom";
+    WidgetType["COLLECTION"] = "collection";
+    WidgetType["FORMIO"] = "formio";
+})(WidgetType || (WidgetType = {}));
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var WidgetManagementTab;
+(function (WidgetManagementTab) {
+    WidgetManagementTab["VISUAL"] = "visual";
+    WidgetManagementTab["JSON"] = "json";
+})(WidgetManagementTab || (WidgetManagementTab = {}));
+const WidgetTypeTags = {
+    [WidgetType.COLLECTION]: 'teal',
+    [WidgetType.CUSTOM]: 'magenta',
+    [WidgetType.FIELDS]: 'blue',
+    [WidgetType.FORMIO]: 'green',
+    [WidgetType.TABLE]: 'purple',
+};
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetManagementFieldsColumnComponent {
+    get formRows() {
+        if (!this.formGroup.get('rows'))
+            return undefined;
+        return this.formGroup.get('rows');
     }
-    ngAfterViewInit() {
-        App.init();
-        this.shellService.setContentElement(this.mainContentRef.nativeElement);
-        this._observer = new ResizeObserver(() => {
-            this.shellService.onMainContentResize();
+    getDisplayItemsSelected(row) {
+        return this.widgetFieldsService.getDisplayItemsSelected(row);
+    }
+    constructor(cdsThemeService, cdr, fb, iconService, translateService, widgetFieldsService, widgetWizardService) {
+        this.cdsThemeService = cdsThemeService;
+        this.cdr = cdr;
+        this.fb = fb;
+        this.iconService = iconService;
+        this.translateService = translateService;
+        this.widgetFieldsService = widgetFieldsService;
+        this.widgetWizardService = widgetWizardService;
+        this.class = 'valtimo-widget-management-field-column';
+        this.addTranslateKey = 'widgetTabManagement.content.fields.add';
+        this.showHideWhenEmptyCheckbox = false;
+        this.columnUpdateEvent = new EventEmitter();
+        this.ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+        this.formGroup = this.fb.group({
+            rows: this.fb.array([]),
         });
-        this._observer.observe(this.mainContentRef.nativeElement);
+        this.displayTypeItems = this.widgetFieldsService.displayTypeItems;
+        this.WidgetDisplayTypeKey = WidgetDisplayTypeKey;
+        this.$widgetType = computed(() => this.widgetWizardService.$selectedWidget()?.type ?? WidgetType.FIELDS);
+        this.$isFieldWidget = computed(() => this.$widgetType() === WidgetType.FIELDS);
+        this.inputTheme$ = this.cdsThemeService.currentTheme$;
+        this._subscriptions = new Subscription();
+        this.iconService.register(TrashCan16);
+    }
+    ngOnInit() {
+        this.initForm();
+        this.openFormSubscription();
     }
     ngOnDestroy() {
-        this._observer.disconnect();
+        this._subscriptions.unsubscribe();
+        this.formGroup.reset();
+    }
+    addField() {
+        if (!this.formRows)
+            return;
+        this.formRows.push(this.fb.group({
+            type: this.fb.control({ content: '', selected: false }, [
+                Validators.required,
+                this.typeSelectValidator,
+            ]),
+            title: this.fb.control('', Validators.required),
+            content: this.fb.control('', Validators.required),
+            ellipsisCharacterLimit: this.fb.control(null, Validators.pattern('[1-9][0-9]*')),
+            hideWhenEmpty: this.fb.control(false),
+        }));
+    }
+    onDeleteRowClick(event, formArray, index) {
+        event.stopImmediatePropagation();
+        if (!formArray)
+            return;
+        formArray.removeAt(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutInternalComponent, deps: [{ token: LayoutService }, { token: i0.Renderer2 }, { token: i2$1.UserInterfaceService }, { token: i2$1.ShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LayoutInternalComponent, isStandalone: false, selector: "valtimo-layout-internal", viewQueries: [{ propertyName: "mainContentRef", first: true, predicate: ["mainContent"], 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<valtimo-topbar></valtimo-topbar>\n<main\n  class=\"cds--content\"\n  [ngClass]=\"{\n    'cds--content--sidebar':\n      (sideBarExpanded$ | async) && (collapsibleWidescreenMenu$ | async) === false,\n  }\"\n  #mainContent\n>\n  <valtimo-left-sidebar [hidden]=\"layoutService.isFullscreen\"></valtimo-left-sidebar>\n  <valtimo-alert></valtimo-alert>\n  <valtimo-page-header [hidden]=\"layoutService.isFullscreen\"></valtimo-page-header>\n  <router-outlet></router-outlet>\n  <valtimo-right-sidebar></valtimo-right-sidebar>\n  <v-prompt></v-prompt>\n</main>\n", styles: ["::ng-deep .cds--content{padding-top:24px!important}@media screen and (max-width: 767px){.be-content{margin-left:0!important}}@media only screen and (min-width: 1056px){.cds--content--sidebar{padding-left:18rem}}\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: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2$1.TopbarComponent, selector: "valtimo-topbar" }, { kind: "component", type: i2$1.LeftSidebarComponent, selector: "valtimo-left-sidebar" }, { kind: "component", type: i2$1.RightSidebarComponent, selector: "valtimo-right-sidebar" }, { kind: "component", type: i2$1.PageHeaderComponent, selector: "valtimo-page-header" }, { kind: "component", type: i2$1.AlertComponent, selector: "valtimo-alert" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.PromptComponent, selector: "v-prompt", inputs: ["appearingDelayMs", "maxWidthPx"], outputs: ["closeEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    onTypeSelected(formRow, event) {
+        this.widgetFieldsService.onDisplayTypeSelected(['title', 'content', 'type', 'hideWhenEmpty'], formRow, event);
+    }
+    onAddEnumValueClick(valuesFormArray) {
+        valuesFormArray.push(this.fb.group({
+            key: this.fb.control('', Validators.required),
+            value: this.fb.control('', Validators.required),
+        }));
+    }
+    typeSelectValidator(control) {
+        const controlValue = control.value;
+        if (!controlValue || !controlValue.selected)
+            return { error: 'Type is not selected' };
+        return null;
+    }
+    getRowForm(row) {
+        return this.fb.group({
+            type: this.fb.control({
+                content: this.translateService.instant(this.translateService.instant(`widgetTabManagement.content.displayType.${row.displayProperties?.type ?? WidgetDisplayTypeKey.TEXT}`)),
+                id: row.displayProperties?.type ?? WidgetDisplayTypeKey.TEXT,
+                selected: true,
+            }, Validators.required),
+            title: this.fb.control(row.title, Validators.required),
+            content: this.fb.control(row.value, Validators.required),
+            ...((!row.displayProperties || row.displayProperties?.type === WidgetDisplayTypeKey.TEXT) && {
+                ellipsisCharacterLimit: this.fb.control(row.displayProperties?.ellipsisCharacterLimit ?? null, Validators.pattern('[1-9][0-9]*')),
+            }),
+            hideWhenEmpty: this.fb.control(row.displayProperties?.hideWhenEmpty ?? false),
+            ...([WidgetDisplayTypeKey.NUMBER, WidgetDisplayTypeKey.PERCENT].includes(row.displayProperties?.type) && {
+                digitsInfo: this.fb.control(row.displayProperties.digitsInfo ?? ''),
+            }),
+            ...(row.displayProperties?.type === WidgetDisplayTypeKey.CURRENCY && {
+                digitsInfo: this.fb.control(row.displayProperties.digitsInfo ?? ''),
+                currencyCode: this.fb.control(row.displayProperties.currencyCode ?? ''),
+                display: this.fb.control(row.displayProperties.display ?? ''),
+            }),
+            ...(row.displayProperties?.type === WidgetDisplayTypeKey.DATE && {
+                format: this.fb.control(row.displayProperties.format ?? ''),
+            }),
+            ...(row.displayProperties?.type === WidgetDisplayTypeKey.DATE_TIME && {
+                format: this.fb.control(row.displayProperties.format ?? ''),
+            }),
+            ...(row.displayProperties?.type === WidgetDisplayTypeKey.LINK && {
+                linkText: this.fb.control(row.displayProperties.linkText ?? ''),
+            }),
+            ...(row.displayProperties?.type === WidgetDisplayTypeKey.ENUM && {
+                values: this.fb.array(Object.entries(row.displayProperties.values).map(([key, value]) => this.fb.group({
+                    key: this.fb.control(key, Validators.required),
+                    value: this.fb.control(value, Validators.required),
+                }))),
+            }),
+        });
+    }
+    initForm() {
+        if (!this.columnData) {
+            this.addField();
+            return;
+        }
+        const rowsControl = this.formGroup.get('rows');
+        if (!rowsControl)
+            return;
+        this.columnData.forEach((row) => {
+            rowsControl.push(this.getRowForm(row), { emitEvent: false });
+        });
+        this.columnUpdateEvent.emit({ data: this.columnData, valid: true });
+        this.cdr.detectChanges();
+    }
+    openFormSubscription() {
+        this._subscriptions.add(this.formRows?.valueChanges.pipe(debounceTime(100)).subscribe((rows) => {
+            const mappedRows = rows.map((row) => ({
+                key: row.title.replace(/\W+/g, '-').replace(/\-$/, '').toLowerCase(),
+                title: row.title,
+                value: row.content,
+                ...(!!row?.type.id && {
+                    displayProperties: {
+                        type: row.type.id,
+                        ...(!!row?.ellipsisCharacterLimit && {
+                            ellipsisCharacterLimit: row.ellipsisCharacterLimit,
+                        }),
+                        ...(!!row?.hideWhenEmpty && { hideWhenEmpty: row.hideWhenEmpty }),
+                        ...(!!row?.currencyCode && { currencyCode: row.currencyCode }),
+                        ...(!!row?.display && { display: row.display }),
+                        ...(!!row?.digitsInfo && { digitsInfo: row.digitsInfo }),
+                        ...(!!row?.linkText && { linkText: row.linkText }),
+                        ...(!!row?.format && { format: row.format }),
+                        ...(!!row?.values && {
+                            values: row.values?.reduce((acc, curr) => ({ ...acc, [curr.key]: curr.value }), {}),
+                        }),
+                    },
+                }),
+            }));
+            this.columnUpdateEvent.emit({ data: mappedRows, valid: this.formGroup.valid });
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsColumnComponent, deps: [{ token: i1.CdsThemeService }, { token: i0.ChangeDetectorRef }, { token: i2.FormBuilder }, { token: i3.IconService }, { token: i2$1.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox" }, 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=\"inputTheme$ | async as inputTheme\"\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]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\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.' + $widgetType() + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-carbon-theme]=\"inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n\n            <div class=\"valtimo-widget-management-field-column__path-selector\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + $widgetType() + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                type=\"text\"\n                formControlName=\"content\"\n              />\n              <!-- TODO: Implement when selector is up and parameterise -->\n              <!-- <valtimo-value-path-selector\n                formControlName=\"content\"\n                [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n                [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n                [parentItem]=\"selectedCollection\"\n              ></valtimo-value-path-selector> -->\n            </div>\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]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (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]=\"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]=\"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]=\"inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          [placeholder]=\"\n                            'widgetTabManagement.content.fields.enumDisplay' | translate\n                          \"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-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]=\"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]=\"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]=\"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]=\"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          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-widget-management-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-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}.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__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}\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: i3.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: i3.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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutInternalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-layout-internal', standalone: false, 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-topbar></valtimo-topbar>\n<main\n  class=\"cds--content\"\n  [ngClass]=\"{\n    'cds--content--sidebar':\n      (sideBarExpanded$ | async) && (collapsibleWidescreenMenu$ | async) === false,\n  }\"\n  #mainContent\n>\n  <valtimo-left-sidebar [hidden]=\"layoutService.isFullscreen\"></valtimo-left-sidebar>\n  <valtimo-alert></valtimo-alert>\n  <valtimo-page-header [hidden]=\"layoutService.isFullscreen\"></valtimo-page-header>\n  <router-outlet></router-outlet>\n  <valtimo-right-sidebar></valtimo-right-sidebar>\n  <v-prompt></v-prompt>\n</main>\n", styles: ["::ng-deep .cds--content{padding-top:24px!important}@media screen and (max-width: 767px){.be-content{margin-left:0!important}}@media only screen and (min-width: 1056px){.cds--content--sidebar{padding-left:18rem}}\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: LayoutService }, { type: i0.Renderer2 }, { type: i2$1.UserInterfaceService }, { type: i2$1.ShellService }], propDecorators: { mainContentRef: [{
-                type: ViewChild,
-                args: ['mainContent']
+            args: [{ selector: 'valtimo-widget-management-fields-column', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ButtonModule,
+                        DropdownModule,
+                        InputModule,
+                        ReactiveFormsModule,
+                        IconModule,
+                        AccordionModule,
+                        InputLabelModule,
+                        ValuePathSelectorComponent,
+                        CheckboxModule,
+                    ], 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=\"inputTheme$ | async as inputTheme\"\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]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\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.' + $widgetType() + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-carbon-theme]=\"inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n\n            <div class=\"valtimo-widget-management-field-column__path-selector\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + $widgetType() + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                type=\"text\"\n                formControlName=\"content\"\n              />\n              <!-- TODO: Implement when selector is up and parameterise -->\n              <!-- <valtimo-value-path-selector\n                formControlName=\"content\"\n                [caseDefinitionKey]=\"params?.caseDefinitionKey\"\n                [caseDefinitionVersionTag]=\"params?.caseDefinitionVersionTag\"\n                [parentItem]=\"selectedCollection\"\n              ></valtimo-value-path-selector> -->\n            </div>\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]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (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]=\"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]=\"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]=\"inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          [placeholder]=\"\n                            'widgetTabManagement.content.fields.enumDisplay' | translate\n                          \"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-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]=\"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]=\"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]=\"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]=\"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          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-widget-management-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-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}.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__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}\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: i2.FormBuilder }, { type: i3.IconService }, { type: i2$1.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], columnData: [{
+                type: Input,
+                args: [{ required: true }]
+            }], addTranslateKey: [{
+                type: Input
+            }], fieldWidthDropdown: [{
+                type: Input
+            }], selectedCollection: [{
+                type: Input
+            }], showHideWhenEmptyCheckbox: [{
+                type: Input
+            }], columnUpdateEvent: [{
+                type: Output
             }] } });
 
 /*
@@ -155,44 +380,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class LayoutComponent {
-    constructor(placeHolderService, route, router) {
-        this.placeHolderService = placeHolderService;
+class WidgetManagementFieldsComponent {
+    constructor(cdsThemeService, fb, route, widgetWizardService) {
+        this.cdsThemeService = cdsThemeService;
+        this.fb = fb;
         this.route = route;
-        this.router = router;
-        this.layoutType = null;
-        this._routerSub = new Subscription();
-        this._DEFAULT_LAYOUT = 'internal';
+        this.widgetWizardService = widgetWizardService;
+        this.class = 'valtimo-widget-management-fields';
+        this.changeValidEvent = new EventEmitter();
+        this.form = this.fb.group({
+            widgetTitle: this.fb.control(this.widgetWizardService.$widgetTitle(), Validators.required),
+        });
+        this.$columns = signal([null]);
+        this.$widgetWidth = this.widgetWizardService.$widgetWidth();
+        this.selectedTabIndex = -1;
+        this.theme$ = this.cdsThemeService.currentTheme$.pipe(map((theme) => theme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G90));
+        this.$selectedWidgetContent = computed(() => this.widgetWizardService.$widgetContent()?.columns.reduce((acc, curr, index) => ({
+            ...acc,
+            [index]: curr,
+        }), {}));
+        this.activeTab = signal(0);
+        this._subscriptions = new Subscription();
+        this._contentValid = signal(false);
     }
     ngOnInit() {
-        this.openRouterSubscription();
+        this._subscriptions.add(this.form.valueChanges.pipe(debounceTime(100)).subscribe(formValue => {
+            this.widgetWizardService.$widgetTitle.set(formValue.widgetTitle ?? '');
+            this.changeValidEvent.emit(this.form.valid && this._contentValid());
+        }));
+        const widgetContent = this.widgetWizardService.$widgetContent()
+            ?.columns;
+        if (!widgetContent)
+            return;
+        this.$columns.set(Object.keys(widgetContent).map(() => null));
     }
     ngAfterViewInit() {
-        this.registerCarbonPlaceHolder();
+        this._tab.tabIndex = -1;
     }
     ngOnDestroy() {
-        this._routerSub.unsubscribe();
+        this._subscriptions.unsubscribe();
+        this.changeValidEvent.emit(false);
+        this.form.reset();
+        this._contentValid.set(false);
     }
-    registerCarbonPlaceHolder() {
-        if (this._carbonPlaceHolder) {
-            this.placeHolderService.registerViewContainerRef(this._carbonPlaceHolder);
-        }
+    onAddColumnClick() {
+        this.$columns.update(value => [...value, null]);
+        this.activeTab.set(this.$columns().length - 1);
+        this.changeValidEvent.emit(false);
     }
-    openRouterSubscription() {
-        this._routerSub.add(this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
-            const layout = this.route.snapshot.firstChild.data.layout;
-            this.layoutType = layout ? layout : this._DEFAULT_LAYOUT;
-        }));
+    onTabSelected(index) {
+        this.activeTab.set(index);
+    }
+    onDeleteColumnClick(index) {
+        this.widgetWizardService.$widgetContent.update(content => {
+            if (!content)
+                return null;
+            const widgetContent = content;
+            let tempIndex = index;
+            let tempContent = { ...widgetContent };
+            while (tempIndex < this.$columns().length - 1) {
+                tempContent.columns[tempIndex] = tempContent.columns[tempIndex + 1];
+                tempIndex++;
+            }
+            tempContent.columns.splice(tempIndex, 1);
+            return tempContent;
+        });
+        this.$columns.update((columns) => {
+            const temp = columns;
+            temp.splice(index, 1);
+            return temp;
+        });
+        if (this.activeTab() !== index)
+            return;
+        this.activeTab.set(-1);
+    }
+    onColumnUpdateEvent(event, columnIndex) {
+        this.widgetWizardService.$widgetContent.update(content => {
+            if (!content)
+                return { columns: [event.data] };
+            const columns = content?.columns.map((column, index) => index === columnIndex ? event.data : column);
+            return {
+                columns: columnIndex > columns.length - 1 ? [...columns, event.data] : columns,
+            };
+        });
+        this._contentValid.set(event.valid);
+        this.changeValidEvent.emit(event.valid && this.form.valid);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutComponent, deps: [{ token: i5.PlaceholderService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LayoutComponent, isStandalone: false, selector: "valtimo-layout", viewQueries: [{ propertyName: "_carbonPlaceHolder", first: true, predicate: ["carbonPlaceHolder"], descendants: true, read: ViewContainerRef, static: 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<div #carbonPlaceHolder class=\"carbon-placeholder\"></div>\n\n<valtimo-global-notification></valtimo-global-notification>\n<valtimo-layout-public *ngIf=\"layoutType === 'public'\"></valtimo-layout-public>\n<valtimo-layout-internal *ngIf=\"layoutType === 'internal'\"></valtimo-layout-internal>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.GlobalNotificationComponent, selector: "valtimo-global-notification" }, { kind: "component", type: LayoutPublicComponent, selector: "valtimo-layout-public" }, { kind: "component", type: LayoutInternalComponent, selector: "valtimo-layout-internal" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsComponent, deps: [{ token: i1.CdsThemeService }, { token: i2.FormBuilder }, { token: i2$2.ActivatedRoute }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementFieldsComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_tab", first: true, predicate: Tab, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-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<p>{{ 'widgetTabManagement.content.description' | translate }}</p>\n\n<form [formGroup]=\"form\">\n  <cds-text-label\n    [attr.data-carbon-theme]=\"theme$ | async\"\n    class=\"valtimo-widget-management-fields__input\"\n  >\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<!-- For projecting elements such as process selector in case widgets -->\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__input{max-width:288px}.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: "pipe", type: i4.AsyncPipe, name: "async" }, { 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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: 
+                // CaseManagementWidgetProcessSelectorComponent,
+                InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-layout', standalone: false, 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<div #carbonPlaceHolder class=\"carbon-placeholder\"></div>\n\n<valtimo-global-notification></valtimo-global-notification>\n<valtimo-layout-public *ngIf=\"layoutType === 'public'\"></valtimo-layout-public>\n<valtimo-layout-internal *ngIf=\"layoutType === 'internal'\"></valtimo-layout-internal>\n" }]
-        }], ctorParameters: () => [{ type: i5.PlaceholderService }, { type: i2.ActivatedRoute }, { type: i2.Router }], propDecorators: { _carbonPlaceHolder: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        InputModule,
+                        TabsModule,
+                        IconModule,
+                        ReactiveFormsModule,
+                        ButtonModule,
+                        WidgetManagementFieldsColumnComponent,
+                        // CaseManagementWidgetProcessSelectorComponent,
+                        InputLabelModule,
+                    ], 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<p>{{ 'widgetTabManagement.content.description' | translate }}</p>\n\n<form [formGroup]=\"form\">\n  <cds-text-label\n    [attr.data-carbon-theme]=\"theme$ | async\"\n    class=\"valtimo-widget-management-fields__input\"\n  >\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<!-- For projecting elements such as process selector in case widgets -->\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__input{max-width:288px}.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.CdsThemeService }, { type: i2.FormBuilder }, { type: i2$2.ActivatedRoute }, { type: WidgetWizardService }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], changeValidEvent: [{
+                type: Output
+            }], _tab: [{
                 type: ViewChild,
-                args: ['carbonPlaceHolder', { static: true, read: ViewContainerRef }]
+                args: [Tab]
             }] } });
 
 /*
@@ -210,48 +510,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class LayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: LayoutModule, declarations: [LayoutComponent, LayoutPublicComponent, LayoutInternalComponent], imports: [RouterModule,
-            MenuRoutingModule,
-            TopbarModule,
-            LeftSidebarModule,
-            RightSidebarModule,
-            PageHeaderModule,
-            AlertModule,
-            CommonModule,
-            PromptModule,
-            GlobalNotificationComponent], exports: [LayoutComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutModule, imports: [RouterModule,
-            MenuRoutingModule,
-            TopbarModule,
-            LeftSidebarModule,
-            RightSidebarModule,
-            PageHeaderModule,
-            AlertModule,
-            CommonModule,
-            PromptModule,
-            GlobalNotificationComponent] }); }
+class WidgetManagementTableComponent {
+    constructor(cdsThemeService, fb, widgetWizardService, route) {
+        this.cdsThemeService = cdsThemeService;
+        this.fb = fb;
+        this.widgetWizardService = widgetWizardService;
+        this.route = route;
+        this.class = 'valtimo-widget-management-table';
+        this.changeValidEvent = new EventEmitter();
+        this.form = this.fb.group({
+            title: this.fb.control(this.widgetWizardService.$widgetTitle() ?? '', Validators.required),
+            collection: this.fb.control(this.widgetWizardService.$widgetContent()?.collection ?? '', Validators.required),
+            defaultPageSize: this.fb.control(this.widgetWizardService.$widgetContent()?.defaultPageSize ?? 5, Validators.required),
+        });
+        this.theme$ = this.cdsThemeService.currentTheme$.pipe(map((currentTheme) => currentTheme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G90));
+        this.$content = this.widgetWizardService
+            .$widgetContent;
+        this.$checked = computed(() => this.widgetWizardService.$widgetContent()?.firstColumnAsTitle || false);
+        this.selectedCollection$ = new BehaviorSubject(null);
+        this.ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+        this.ValuePathType = ValuePathType;
+        this._contentValid = signal(this.widgetWizardService.$editMode());
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this._subscriptions.add(this.form.valueChanges.pipe(debounceTime(500)).subscribe(value => {
+            this.widgetWizardService.$widgetTitle.set(value?.title ?? '');
+            this.widgetWizardService.$widgetContent.update((content) => ({
+                ...content,
+                collection: value?.collection || '',
+                defaultPageSize: value?.defaultPageSize || 5,
+            }));
+            this.changeValidEvent.emit(this.form.valid && this._contentValid());
+        }));
+    }
+    ngOnDestroy() {
+        this._contentValid.set(false);
+        this._subscriptions.unsubscribe();
+        this.changeValidEvent.emit(false);
+        this.form.reset();
+    }
+    onColumnUpdateEvent(event) {
+        const { data, valid } = event;
+        this.widgetWizardService.$widgetContent.update((content) => ({ ...content, columns: data }));
+        this._contentValid.set(valid);
+        this.changeValidEvent.emit(valid && this.form.valid);
+    }
+    onCheckedChange(firstColumnAsTitle) {
+        this.widgetWizardService.$widgetContent.update((content) => ({ ...content, firstColumnAsTitle }));
+    }
+    onCollectionSelected(item) {
+        this.selectedCollection$.next(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementTableComponent, deps: [{ token: i1.CdsThemeService }, { token: i2.FormBuilder }, { token: WidgetWizardService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementTableComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, 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\n<form\n  *ngIf=\"theme$ | async as theme\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <div class=\"valtimo-widget-management-table__path-selector\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.collectionTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"collection\"\n      cdsText\n      [attr.data-carbon-theme]=\"theme\"\n      [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n      type=\"text\"\n    />\n\n    <!-- TODO: Implement to work for case as well -->\n\n    <!-- <valtimo-value-path-selector\n      formControlName=\"collection\"\n      [attr.data-carbon-theme]=\"obs.theme\"\n      [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n      [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n      [type]=\"ValuePathType.COLLECTION\"\n      (collectionSelected)=\"onCollectionSelected($event)\"\n    ></valtimo-value-path-selector> -->\n  </div>\n</form>\n\n<!-- For projecting elements such as process selector in case widgets -->\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"$content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n></valtimo-widget-management-fields-column>\n<!-- TODO: Implement to work for case as well -->\n<!-- [selectedCollection]=\"selectedCollection$ | async\" -->\n\n<section class=\"valtimo-widget-management-table__toggle\">\n  <span class=\"valtimo-widget-management-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"$checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}\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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LayoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [LayoutComponent, LayoutPublicComponent, LayoutInternalComponent],
-                    imports: [
-                        RouterModule,
-                        MenuRoutingModule,
-                        TopbarModule,
-                        LeftSidebarModule,
-                        RightSidebarModule,
-                        PageHeaderModule,
-                        AlertModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementTableComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
-                        PromptModule,
-                        GlobalNotificationComponent,
-                    ],
-                    exports: [LayoutComponent],
-                }]
-        }] });
+                        TranslateModule,
+                        WidgetManagementFieldsColumnComponent,
+                        ReactiveFormsModule,
+                        InputModule,
+                        ToggleModule,
+                        ButtonModule,
+                        InputLabelModule,
+                    ], 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=\"theme$ | async as theme\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <div class=\"valtimo-widget-management-table__path-selector\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.collectionTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"collection\"\n      cdsText\n      [attr.data-carbon-theme]=\"theme\"\n      [placeholder]=\"'widgetTabManagement.content.table.collection' | translate\"\n      type=\"text\"\n    />\n\n    <!-- TODO: Implement to work for case as well -->\n\n    <!-- <valtimo-value-path-selector\n      formControlName=\"collection\"\n      [attr.data-carbon-theme]=\"obs.theme\"\n      [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n      [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n      [type]=\"ValuePathType.COLLECTION\"\n      (collectionSelected)=\"onCollectionSelected($event)\"\n    ></valtimo-value-path-selector> -->\n  </div>\n</form>\n\n<!-- For projecting elements such as process selector in case widgets -->\n<ng-content></ng-content>\n\n<span class=\"valtimo-widget-management-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-widget-management-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"$content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n></valtimo-widget-management-fields-column>\n<!-- TODO: Implement to work for case as well -->\n<!-- [selectedCollection]=\"selectedCollection$ | async\" -->\n\n<section class=\"valtimo-widget-management-table__toggle\">\n  <span class=\"valtimo-widget-management-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"$checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-widget-management-table{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-table__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end}.valtimo-widget-management-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-table__toggle{display:flex;flex-direction:column;gap:8px}.valtimo-widget-management-table__path-selector{display:flex;flex-direction:column}\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: i2.FormBuilder }, { type: WidgetWizardService }, { type: i2$2.ActivatedRoute }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], changeValidEvent: [{
+                type: Output
+            }] } });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -268,165 +599,2655 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class TranslationManagementComponent {
-    constructor(translateService, localizationService, pageHeaderService, document) {
+class WidgetManagementCollectionComponent {
+    constructor(cdsThemeService, fb, translateService, widgetFieldsService, route, widgetWizardService) {
+        this.cdsThemeService = cdsThemeService;
+        this.fb = fb;
         this.translateService = translateService;
-        this.localizationService = localizationService;
-        this.pageHeaderService = pageHeaderService;
-        this.document = document;
-        this.loading$ = new BehaviorSubject(true);
-        this.allChangedValuesValid$ = new BehaviorSubject(false);
-        this.disabled$ = new BehaviorSubject(false);
-        this._languageOptions$ = new BehaviorSubject(undefined);
-        this._refreshLocalizations$ = new BehaviorSubject(null);
-        this._localizationTranslations$ = this._refreshLocalizations$.pipe(tap(() => this.loading$.next(true)), switchMap(() => this.localizationService.getMergedLocalizations()), tap(() => this.loading$.next(false)));
-        this._defaultValues = [];
-        this._changedValues$ = new BehaviorSubject(undefined);
-        this.showConfirmationModal$ = new BehaviorSubject(false);
-        this.valuesChanged$ = this._changedValues$.pipe(map(changedValues => !isEqual(changedValues, this._defaultValues)));
-        this.localizationTranslationValues$ = combineLatest([
-            this._languageOptions$,
-            this._localizationTranslations$,
-            this.translateService.stream('key'),
-        ]).pipe(map(([languageOptions, localizationTranslations]) => this.mapMergedLocalizationsToMultiInput(languageOptions, localizationTranslations)), tap(defaultValues => {
-            this._defaultValues = defaultValues;
-        }));
-        this.multiInputTiles$ = combineLatest([
-            this._languageOptions$,
-            this.translateService.stream('key'),
-        ]).pipe(map(([languageOptions]) => {
-            const objToReturn = {};
-            objToReturn[0] = this.translateService.instant('listColumn.key');
-            languageOptions.forEach((languageOption, index) => {
-                objToReturn[index + 1] = this.translateService.instant(`settings.language.options.${languageOption}`);
-            });
-            return objToReturn;
-        }));
-        this.amountOfArbitraryValues$ = this.multiInputTiles$.pipe(map(multiInputTitles => Object.keys(multiInputTitles).length));
-        this.compactMode$ = this.pageHeaderService.compactMode$;
+        this.widgetFieldsService = widgetFieldsService;
+        this.route = route;
+        this.widgetWizardService = widgetWizardService;
+        this.class = 'valtimo-widget-management-collection';
+        this.changeValidEvent = new EventEmitter();
+        this.widgetForm = this.fb.group({
+            title: this.fb.control(this.widgetWizardService.$widgetTitle() ?? '', Validators.required),
+            defaultPageSize: this.fb.control(this.widgetWizardService.$widgetContent()?.defaultPageSize ?? 5, Validators.required),
+            collection: this.fb.control(this.widgetWizardService.$widgetContent()?.collection ?? '', Validators.required),
+        });
+        this.cardForm = this.fb.group({
+            value: this.fb.control(this.widgetWizardService.$widgetContent()?.title?.value ?? '', Validators.required),
+            type: this.fb.control({
+                content: this.translateService.instant(this.translateService.instant(`widgetTabManagement.content.displayType.${this.widgetWizardService.$widgetContent()?.title?.displayProperties?.type ?? WidgetDisplayTypeKey.TEXT}`)),
+                id: this.widgetWizardService.$widgetContent()?.title
+                    ?.displayProperties?.type ?? WidgetDisplayTypeKey.TEXT,
+                selected: true,
+            }, Validators.required),
+        });
+        this.theme$ = this.cdsThemeService.currentTheme$.pipe(map((theme) => theme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G90));
+        this.ValuePathSelectorPrefix = ValuePathSelectorPrefix;
+        this.ValuePathType = ValuePathType;
+        this.WidgetDisplayTypeKey = WidgetDisplayTypeKey;
+        this.$content = this.widgetWizardService
+            .$widgetContent;
+        this.displayTypeItems = this.widgetFieldsService.displayTypeItems;
+        this.selectedCollection$ = new BehaviorSubject(null);
+        this.WIDTH_ITEMS = [
+            {
+                content: this.translateService.instant('widgetTabManagement.width.fullWidth'),
+                id: 'full',
+                selected: true,
+            },
+            {
+                content: this.translateService.instant('widgetTabManagement.width.half'),
+                id: 'half',
+                selected: false,
+            },
+        ];
+        this._subscriptions = new Subscription();
+        this._$contentValid = signal(false);
     }
     ngOnInit() {
-        this.setLanguages();
+        this.openWidgetFormSubscription();
+        this.openCardFormSubscription();
+        this.initForm();
     }
-    validChange(valid) {
-        this.allChangedValuesValid$.next(valid);
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
     }
-    valueChange(value) {
-        this._changedValues$.next(value);
+    onAddEnumValueClick(valuesFormArray) {
+        valuesFormArray.push(this.fb.group({
+            key: this.fb.control('', Validators.required),
+            value: this.fb.control('', Validators.required),
+        }));
     }
-    saveAndRefresh() {
-        this.saveChanges(true);
+    getDisplayItemsSelected(control) {
+        return this.widgetFieldsService.getDisplayItemsSelected(control);
     }
-    saveAndStay() {
-        this.saveChanges();
+    getSelectedWidthItem(fieldIndex) {
+        const widgetContent = this.widgetWizardService.$widgetContent();
+        return !widgetContent
+            ? this.WIDTH_ITEMS
+            : this.WIDTH_ITEMS.map((item) => ({
+                ...item,
+                selected: widgetContent.fields?.[fieldIndex]?.width === item.id,
+            }));
     }
-    cancel() {
-        this.hideModal();
+    onColumnUpdateEvent(event) {
+        const { data, valid } = event;
+        this.widgetWizardService.$widgetContent.update((content) => {
+            const existingFields = content?.fields;
+            return {
+                ...content,
+                fields: data.map((item, index) => ({
+                    ...item,
+                    width: existingFields?.[index]?.width ?? 'full',
+                })),
+            };
+        });
+        this._$contentValid.set(valid);
+        this.changeValidEvent.emit(valid && this.widgetForm.valid);
     }
-    showModal() {
-        this.showConfirmationModal$.next(true);
+    onDeleteRowClick(formArray, index) {
+        if (!formArray)
+            return;
+        formArray.removeAt(index);
     }
-    saveChanges(reload = false) {
-        this.disable();
-        combineLatest([this._changedValues$, this._languageOptions$])
-            .pipe(take(1), map(([changedValues, languageOptions]) => this.getLocalizationsForUpdateRequest(changedValues, languageOptions)), switchMap(updatedLocalizations => this.localizationService.updateLocalizations(updatedLocalizations)))
-            .subscribe(() => {
-            if (reload) {
-                this.document?.defaultView?.location?.reload();
-            }
-            else {
-                this._refreshLocalizations$.next(null);
-                this.enable();
-            }
-        });
+    onTypeSelected(formGroup, event) {
+        this.widgetFieldsService.onDisplayTypeSelected(['value', 'type'], formGroup, event);
     }
-    setLanguages() {
-        this._languageOptions$.next(this.translateService.langs);
+    onWidthSelected(event, fieldIndex) {
+        this.widgetWizardService.$widgetContent.update((content) => ({
+            ...content,
+            fields: content?.fields.map((field, index) => index === fieldIndex ? { ...field, width: event.item.id } : field),
+        }));
     }
-    disable() {
-        this.disabled$.next(true);
+    onCollectionSelected(item) {
+        this.selectedCollection$.next(item);
     }
-    enable() {
-        this.disabled$.next(false);
+    initForm() {
+        if (!this.widgetWizardService.$widgetContent())
+            return;
+        const title = this.widgetWizardService.$widgetContent().title;
+        if (!title)
+            return;
+        this.onTypeSelected(this.cardForm, {
+            item: { id: title.displayProperties?.type ?? '', content: '', selected: true },
+        });
+        this.cardForm.patchValue({
+            ...([
+                WidgetDisplayTypeKey.NUMBER,
+                WidgetDisplayTypeKey.PERCENT,
+                WidgetDisplayTypeKey.CURRENCY,
+            ].includes(title.displayProperties?.type) && {
+                digitsInfo: title.displayProperties.digitsInfo,
+            }),
+            ...(title.displayProperties?.type === WidgetDisplayTypeKey.CURRENCY && {
+                currencyCode: title.displayProperties.currencyCode,
+                display: title.displayProperties.display,
+            }),
+            ...(title.displayProperties?.type === WidgetDisplayTypeKey.DATE && {
+                format: title.displayProperties.format,
+            }),
+            ...(title.displayProperties?.type === WidgetDisplayTypeKey.DATE_TIME && {
+                format: title.displayProperties.format,
+            }),
+            ...(title.displayProperties?.type === WidgetDisplayTypeKey.ENUM && {
+                values: Object.entries(title.displayProperties.values).map(([key, value]) => ({ key, value })),
+            }),
+        }, { emitEvent: false });
     }
-    hideModal() {
-        this.showConfirmationModal$.next(false);
+    openWidgetFormSubscription() {
+        this._subscriptions.add(this.widgetForm.valueChanges.pipe(debounceTime(500)).subscribe(value => {
+            this.widgetWizardService.$widgetTitle.set(value?.title ?? '');
+            this.widgetWizardService.$widgetContent.update((content) => ({
+                ...content,
+                collection: value?.collection || '',
+                defaultPageSize: value?.defaultPageSize || 5,
+            }));
+            this.changeValidEvent.emit(this.widgetForm.valid && this.cardForm.valid && this._$contentValid());
+        }));
     }
-    flattenObject(ob) {
-        const toReturn = {};
-        for (const i in ob) {
-            if (!ob.hasOwnProperty(i))
-                continue;
-            if (typeof ob[i] == 'object' && ob[i] !== null) {
-                const flatObject = this.flattenObject(ob[i]);
-                for (const x in flatObject) {
-                    if (!flatObject.hasOwnProperty(x))
-                        continue;
-                    toReturn[i + '.' + x] = flatObject[x];
-                }
-            }
+    openCardFormSubscription() {
+        this._subscriptions.add(this.cardForm.valueChanges.pipe(debounceTime(500)).subscribe(formValue => {
+            let { value, ...displayProperties } = formValue;
+            displayProperties = {
+                ...displayProperties,
+                ...(!!displayProperties.type && {
+                    type: displayProperties.type.id,
+                }),
+                ...(!!formValue.values && {
+                    values: formValue.values?.reduce((acc, curr) => ({ ...acc, [curr.key]: curr.value }), {}),
+                }),
+            };
+            this.widgetWizardService.$widgetContent.update((content) => ({
+                ...content,
+                title: {
+                    value,
+                    ...(displayProperties.type !== WidgetDisplayTypeKey.TEXT && {
+                        displayProperties,
+                    }),
+                },
+            }));
+            this.changeValidEvent.emit(this.widgetForm.valid && this.cardForm.valid && this._$contentValid());
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCollectionComponent, deps: [{ token: i1.CdsThemeService }, { token: i2.FormBuilder }, { token: i2$1.TranslateService }, { token: WidgetFieldsService }, { token: i2$2.ActivatedRoute }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetManagementCollectionComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, 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\n<ng-container *ngIf=\"theme$ | async as theme\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <div class=\"valtimo-widget-management-collection__path-selector\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.collectionTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [attr.data-carbon-theme]=\"theme\"\n        [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        type=\"text\"\n      />\n      <!-- <valtimo-value-path-selector\n        formControlName=\"collection\"\n        [attr.data-carbon-theme]=\"theme\"\n        [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n        [type]=\"ValuePathType.COLLECTION\"\n        (collectionSelected)=\"onCollectionSelected($event)\"\n      ></valtimo-value-path-selector> -->\n    </div>\n  </form>\n\n  <!-- For injecting things such as process-selector in case widgets -->\n  <ng-content></ng-content>\n\n  <!-- <valtimo-case-management-widget-process-selector\n    [params]=\"params$ | async\"\n  ></valtimo-case-management-widget-process-selector> -->\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n    <section class=\"valtimo-widget-management-collection__card-title\">\n      <div class=\"valtimo-widget-management-collection__path-selector\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n        >\n        </v-input-label>\n\n        <input\n          formControlName=\"value\"\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n          type=\"text\"\n        />\n        <!-- <valtimo-value-path-selector\n          formControlName=\"value\"\n          [attr.data-carbon-theme]=\"theme\"\n          [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n          [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n          [parentItem]=\"selectedCollection$ | async\"\n        ></valtimo-value-path-selector> -->\n      </div>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-widget-management-collection__card-options\">\n      @switch (cardForm.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]=\"theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\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]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\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]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    [attr.data-carbon-theme]=\"theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.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(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (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]=\"theme\"\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]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-widget-management-fields-column\n    [columnData]=\"$content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    [showHideWhenEmptyCheckbox]=\"true\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  >\n    <!-- [params]=\"params$ | async\"\n    [selectedCollection]=\"selectedCollection$ | async\" -->\n  </valtimo-widget-management-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}\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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: DropdownModule }, { kind: "component", type: i3.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: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: 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: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCollectionComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        WidgetManagementFieldsColumnComponent,
+                        ReactiveFormsModule,
+                        InputModule,
+                        DropdownModule,
+                        ButtonModule,
+                        IconModule,
+                        InputLabelModule,
+                        ValuePathSelectorComponent,
+                    ], 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<ng-container *ngIf=\"theme$ | async as theme\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-widget-management-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <div class=\"valtimo-widget-management-collection__path-selector\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.collectionTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [attr.data-carbon-theme]=\"theme\"\n        [placeholder]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        type=\"text\"\n      />\n      <!-- <valtimo-value-path-selector\n        formControlName=\"collection\"\n        [attr.data-carbon-theme]=\"theme\"\n        [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n        [type]=\"ValuePathType.COLLECTION\"\n        (collectionSelected)=\"onCollectionSelected($event)\"\n      ></valtimo-value-path-selector> -->\n    </div>\n  </form>\n\n  <!-- For injecting things such as process-selector in case widgets -->\n  <ng-content></ng-content>\n\n  <!-- <valtimo-case-management-widget-process-selector\n    [params]=\"params$ | async\"\n  ></valtimo-case-management-widget-process-selector> -->\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-widget-management-collection__card\">\n    <section class=\"valtimo-widget-management-collection__card-title\">\n      <div class=\"valtimo-widget-management-collection__path-selector\">\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n        >\n        </v-input-label>\n\n        <input\n          formControlName=\"value\"\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n          type=\"text\"\n        />\n        <!-- <valtimo-value-path-selector\n          formControlName=\"value\"\n          [attr.data-carbon-theme]=\"theme\"\n          [caseDefinitionKey]=\"obs.params?.caseDefinitionKey\"\n          [caseDefinitionVersionTag]=\"obs.params?.caseDefinitionVersionTag\"\n          [parentItem]=\"selectedCollection$ | async\"\n        ></valtimo-value-path-selector> -->\n      </div>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-widget-management-collection__card-options\">\n      @switch (cardForm.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]=\"theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\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]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\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]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (WidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-widget-management-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form [formGroup]=\"rowValue\" class=\"valtimo-widget-management-collection__enum-form\">\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    [attr.data-carbon-theme]=\"theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-case-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.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(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (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]=\"theme\"\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]=\"theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-widget-management-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-widget-management-fields-column\n    [columnData]=\"$content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    [showHideWhenEmptyCheckbox]=\"true\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  >\n    <!-- [params]=\"params$ | async\"\n    [selectedCollection]=\"selectedCollection$ | async\" -->\n  </valtimo-widget-management-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-management-collection{display:flex;flex-direction:column;gap:24px}.valtimo-widget-management-collection__form{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:flex-end}.valtimo-widget-management-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-widget-management-collection__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-collection__card{flex-direction:column;display:flex;gap:16px}.valtimo-widget-management-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-widget-management-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}\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: i2.FormBuilder }, { type: i2$1.TranslateService }, { type: WidgetFieldsService }, { type: i2$2.ActivatedRoute }, { type: WidgetWizardService }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], changeValidEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetManagementCustomComponent {
+    get widgetTitle() {
+        return this.form.get('widgetTitle');
+    }
+    constructor(customWidgetConfig, cdsThemeService, fb, widgetWizardService) {
+        this.customWidgetConfig = customWidgetConfig;
+        this.cdsThemeService = cdsThemeService;
+        this.fb = fb;
+        this.widgetWizardService = widgetWizardService;
+        this.changeValidEvent = new EventEmitter();
+        this.form = this.fb.group({
+            widgetTitle: this.fb.control(this.widgetWizardService.$widgetTitle(), Validators.required),
+        });
+        this.theme$ = this.cdsThemeService.currentTheme$.pipe(map((theme) => theme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G90));
+        this._selectedCustomComponentKey$ = new BehaviorSubject(null);
+        this._customWidgetConfig$ = new BehaviorSubject({});
+        this.componentListItems$ = combineLatest([
+            this._customWidgetConfig$,
+            this._selectedCustomComponentKey$,
+        ]).pipe(filter(([config]) => !!config), map(([config, selectedKey]) => Object.keys(config).reduce((acc, curr) => [...acc, { content: curr, selected: curr === selectedKey }], [])));
+        this._subscriptions = new Subscription();
+        if (customWidgetConfig)
+            this._customWidgetConfig$.next(customWidgetConfig);
+    }
+    componentDropDownChange(event) {
+        const componentKey = event?.item?.content;
+        if (!componentKey)
+            return;
+        this._selectedCustomComponentKey$.next(componentKey);
+        this.widgetWizardService.$widgetContent.set({ componentKey });
+        this.changeValidEvent.emit(true);
+    }
+    ngOnInit() {
+        this.openTitleSubscription();
+        this.prefill();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    openTitleSubscription() {
+        this._subscriptions.add(this.widgetTitle?.valueChanges.subscribe(title => {
+            this.widgetWizardService.$widgetTitle.set(title);
+        }));
+    }
+    prefill() {
+        const componentKey = this.widgetWizardService.$widgetContent()
+            ?.componentKey;
+        if (!componentKey || Object.keys(this.customWidgetConfig || {}).length === 0)
+            return;
+        this._selectedCustomComponentKey$.next(componentKey);
+        this.changeValidEvent.emit(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCustomComponent, deps: [{ token: CUSTOM_WIDGET_TOKEN, optional: true }, { token: i1.CdsThemeService }, { token: i2.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementCustomComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, 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  class=\"valtimo-widget-management-custom\"\n  [formGroup]=\"form\"\n  [attr.data-carbon-theme]=\"theme$ | async\"\n>\n  <cds-text-label class=\"valtimo-widget-management-field__input\">\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <!-- For injecting things such as process selector in case management -->\n  <ng-container></ng-container>\n\n  <cds-label class=\"dropdown-label\">\n    {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n    <cds-dropdown\n      *ngIf=\"componentListItems$ | async as componentListItems\"\n      [appendInline]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n      [disabled]=\"componentListItems.length === 0\"\n      (selected)=\"componentDropDownChange($event)\"\n    >\n      <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n    </cds-dropdown>\n  </cds-label>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { 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: "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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.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: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementCustomComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        InputModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        DropdownModule,
+                    ], 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  class=\"valtimo-widget-management-custom\"\n  [formGroup]=\"form\"\n  [attr.data-carbon-theme]=\"theme$ | async\"\n>\n  <cds-text-label class=\"valtimo-widget-management-field__input\">\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <!-- For injecting things such as process selector in case management -->\n  <ng-container></ng-container>\n\n  <cds-label class=\"dropdown-label\">\n    {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n    <cds-dropdown\n      *ngIf=\"componentListItems$ | async as componentListItems\"\n      [appendInline]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n      [disabled]=\"componentListItems.length === 0\"\n      (selected)=\"componentDropDownChange($event)\"\n    >\n      <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n    </cds-dropdown>\n  </cds-label>\n</form>\n", styles: [".valtimo-widget-management-custom{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-widget-management-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CUSTOM_WIDGET_TOKEN]
+                }] }, { type: i1.CdsThemeService }, { type: i2.FormBuilder }, { type: WidgetWizardService }], propDecorators: { changeValidEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var WidgetWizardStep;
+(function (WidgetWizardStep) {
+    WidgetWizardStep[WidgetWizardStep["TYPE"] = 0] = "TYPE";
+    WidgetWizardStep[WidgetWizardStep["WIDTH"] = 1] = "WIDTH";
+    WidgetWizardStep[WidgetWizardStep["STYLE"] = 2] = "STYLE";
+    WidgetWizardStep[WidgetWizardStep["CONTENT"] = 3] = "CONTENT";
+})(WidgetWizardStep || (WidgetWizardStep = {}));
+var WidgetWizardCloseEventType;
+(function (WidgetWizardCloseEventType) {
+    WidgetWizardCloseEventType[WidgetWizardCloseEventType["CANCEL"] = 0] = "CANCEL";
+    WidgetWizardCloseEventType[WidgetWizardCloseEventType["CREATE"] = 1] = "CREATE";
+    WidgetWizardCloseEventType[WidgetWizardCloseEventType["EDIT"] = 2] = "EDIT";
+})(WidgetWizardCloseEventType || (WidgetWizardCloseEventType = {}));
+var WidgetStyle;
+(function (WidgetStyle) {
+    WidgetStyle["DEFAULT"] = "default";
+    WidgetStyle["HIGH_CONTRAST"] = "high-contrast";
+})(WidgetStyle || (WidgetStyle = {}));
+const AVAILABLE_WIDGETS = [
+    {
+        titleKey: 'widgetTabManagement.types.fields.title',
+        descriptionKey: 'widgetTabManagement.types.fields.description',
+        illustrationUrl: 'valtimo-layout/img/widget-management/types/fields.svg',
+        type: WidgetType.FIELDS,
+        component: WidgetManagementFieldsComponent,
+    },
+    {
+        titleKey: 'widgetTabManagement.types.custom.title',
+        descriptionKey: 'widgetTabManagement.types.custom.description',
+        illustrationUrl: 'valtimo-layout/img/widget-management/types/angular.svg',
+        type: WidgetType.CUSTOM,
+        component: WidgetManagementCustomComponent,
+    },
+    {
+        titleKey: 'widgetTabManagement.types.table.title',
+        descriptionKey: 'widgetTabManagement.types.table.description',
+        illustrationUrl: 'valtimo-layout/img/widget-management/types/table.svg',
+        type: WidgetType.TABLE,
+        component: WidgetManagementTableComponent,
+    },
+    {
+        titleKey: 'widgetTabManagement.types.collection.title',
+        descriptionKey: 'widgetTabManagement.types.collection.description',
+        illustrationUrl: 'valtimo-layout/img/widget-management/types/collection.svg',
+        type: WidgetType.COLLECTION,
+        component: WidgetManagementCollectionComponent,
+    },
+];
+const WIDGET_WIDTH_LABELS = {
+    1: 'widgetTabManagement.width.small.title',
+    2: 'widgetTabManagement.width.medium.title',
+    3: 'widgetTabManagement.width.large.title',
+    4: 'widgetTabManagement.width.xtraLarge.title',
+};
+const WIDGET_STYLE_LABELS = {
+    [WidgetStyle.DEFAULT]: 'widgetTabManagement.style.default.title',
+    [WidgetStyle.HIGH_CONTRAST]: 'widgetTabManagement.style.highContrast.title',
+};
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class LayoutPublicComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutPublicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LayoutPublicComponent, isStandalone: false, selector: "valtimo-layout-public", 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<div class=\"public-page-content\">\n  <img src=\"assets/logo.svg\" class=\"logo\" />\n  <router-outlet></router-outlet>\n</div>\n", styles: ["body{background-color:#eee}.public-page-content{background-color:#fff;margin:60px auto;border:1px solid #dee2e6;padding:0 30px 30px}.public-page-content .logo{width:25%;display:block;margin:30px auto}@media (min-width: 768px){.public-page-content{width:50%}}@media (max-width: 767px) and (min-width: 576px){.public-page-content{width:75%}}@media (max-width: 575px){.public-page-content{width:95%}.public-page-content .logo{width:50%}}\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: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutPublicComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-layout-public', standalone: false, 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<div class=\"public-page-content\">\n  <img src=\"assets/logo.svg\" class=\"logo\" />\n  <router-outlet></router-outlet>\n</div>\n", styles: ["body{background-color:#eee}.public-page-content{background-color:#fff;margin:60px auto;border:1px solid #dee2e6;padding:0 30px 30px}.public-page-content .logo{width:25%;display:block;margin:30px auto}@media (min-width: 768px){.public-page-content{width:50%}}@media (max-width: 767px) and (min-width: 576px){.public-page-content{width:75%}}@media (max-width: 575px){.public-page-content{width:95%}.public-page-content .logo{width:50%}}\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"] }]
+        }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class LayoutInternalComponent {
+    constructor(layoutService, renderer, userInterfaceService, shellService) {
+        this.layoutService = layoutService;
+        this.renderer = renderer;
+        this.userInterfaceService = userInterfaceService;
+        this.shellService = shellService;
+        this.showPageHeader$ = this.userInterfaceService.showPageHeader$;
+        this.sideBarExpanded$ = this.shellService.sideBarExpanded$;
+        this.collapsibleWidescreenMenu$ = this.shellService.collapsibleWidescreenMenu$;
+        this.renderer.addClass(document.body, 'be-animate');
+    }
+    ngAfterViewInit() {
+        App.init();
+        this.shellService.setContentElement(this.mainContentRef.nativeElement);
+        this._observer = new ResizeObserver(() => {
+            this.shellService.onMainContentResize();
+        });
+        this._observer.observe(this.mainContentRef.nativeElement);
+    }
+    ngOnDestroy() {
+        this._observer.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutInternalComponent, deps: [{ token: LayoutService }, { token: i0.Renderer2 }, { token: i1.UserInterfaceService }, { token: i1.ShellService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LayoutInternalComponent, isStandalone: false, selector: "valtimo-layout-internal", viewQueries: [{ propertyName: "mainContentRef", first: true, predicate: ["mainContent"], 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<valtimo-topbar></valtimo-topbar>\n<main\n  class=\"cds--content\"\n  [ngClass]=\"{\n    'cds--content--sidebar':\n      (sideBarExpanded$ | async) && (collapsibleWidescreenMenu$ | async) === false,\n  }\"\n  #mainContent\n>\n  <valtimo-left-sidebar [hidden]=\"layoutService.isFullscreen\"></valtimo-left-sidebar>\n  <valtimo-alert></valtimo-alert>\n  <valtimo-page-header [hidden]=\"layoutService.isFullscreen\"></valtimo-page-header>\n  <router-outlet></router-outlet>\n  <valtimo-right-sidebar></valtimo-right-sidebar>\n  <v-prompt></v-prompt>\n</main>\n", styles: ["::ng-deep .cds--content{padding-top:24px!important}@media screen and (max-width: 767px){.be-content{margin-left:0!important}}@media only screen and (min-width: 1056px){.cds--content--sidebar{padding-left:18rem}}\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: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i1.TopbarComponent, selector: "valtimo-topbar" }, { kind: "component", type: i1.LeftSidebarComponent, selector: "valtimo-left-sidebar" }, { kind: "component", type: i1.RightSidebarComponent, selector: "valtimo-right-sidebar" }, { kind: "component", type: i1.PageHeaderComponent, selector: "valtimo-page-header" }, { kind: "component", type: i1.AlertComponent, selector: "valtimo-alert" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.PromptComponent, selector: "v-prompt", inputs: ["appearingDelayMs", "maxWidthPx"], outputs: ["closeEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutInternalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-layout-internal', standalone: false, 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-topbar></valtimo-topbar>\n<main\n  class=\"cds--content\"\n  [ngClass]=\"{\n    'cds--content--sidebar':\n      (sideBarExpanded$ | async) && (collapsibleWidescreenMenu$ | async) === false,\n  }\"\n  #mainContent\n>\n  <valtimo-left-sidebar [hidden]=\"layoutService.isFullscreen\"></valtimo-left-sidebar>\n  <valtimo-alert></valtimo-alert>\n  <valtimo-page-header [hidden]=\"layoutService.isFullscreen\"></valtimo-page-header>\n  <router-outlet></router-outlet>\n  <valtimo-right-sidebar></valtimo-right-sidebar>\n  <v-prompt></v-prompt>\n</main>\n", styles: ["::ng-deep .cds--content{padding-top:24px!important}@media screen and (max-width: 767px){.be-content{margin-left:0!important}}@media only screen and (min-width: 1056px){.cds--content--sidebar{padding-left:18rem}}\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: LayoutService }, { type: i0.Renderer2 }, { type: i1.UserInterfaceService }, { type: i1.ShellService }], propDecorators: { mainContentRef: [{
+                type: ViewChild,
+                args: ['mainContent']
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class LayoutComponent {
+    constructor(placeHolderService, route, router) {
+        this.placeHolderService = placeHolderService;
+        this.route = route;
+        this.router = router;
+        this.layoutType = null;
+        this._routerSub = new Subscription();
+        this._DEFAULT_LAYOUT = 'internal';
+    }
+    ngOnInit() {
+        this.openRouterSubscription();
+    }
+    ngAfterViewInit() {
+        this.registerCarbonPlaceHolder();
+    }
+    ngOnDestroy() {
+        this._routerSub.unsubscribe();
+    }
+    registerCarbonPlaceHolder() {
+        if (this._carbonPlaceHolder) {
+            this.placeHolderService.registerViewContainerRef(this._carbonPlaceHolder);
+        }
+    }
+    openRouterSubscription() {
+        this._routerSub.add(this.router.events.pipe(filter$1(event => event instanceof NavigationEnd)).subscribe(() => {
+            const layout = this.route.snapshot.firstChild.data.layout;
+            this.layoutType = layout ? layout : this._DEFAULT_LAYOUT;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutComponent, deps: [{ token: i3.PlaceholderService }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LayoutComponent, isStandalone: false, selector: "valtimo-layout", viewQueries: [{ propertyName: "_carbonPlaceHolder", first: true, predicate: ["carbonPlaceHolder"], descendants: true, read: ViewContainerRef, static: 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<div #carbonPlaceHolder class=\"carbon-placeholder\"></div>\n\n<valtimo-global-notification></valtimo-global-notification>\n<valtimo-layout-public *ngIf=\"layoutType === 'public'\"></valtimo-layout-public>\n<valtimo-layout-internal *ngIf=\"layoutType === 'internal'\"></valtimo-layout-internal>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.GlobalNotificationComponent, selector: "valtimo-global-notification" }, { kind: "component", type: LayoutPublicComponent, selector: "valtimo-layout-public" }, { kind: "component", type: LayoutInternalComponent, selector: "valtimo-layout-internal" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-layout', standalone: false, 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<div #carbonPlaceHolder class=\"carbon-placeholder\"></div>\n\n<valtimo-global-notification></valtimo-global-notification>\n<valtimo-layout-public *ngIf=\"layoutType === 'public'\"></valtimo-layout-public>\n<valtimo-layout-internal *ngIf=\"layoutType === 'internal'\"></valtimo-layout-internal>\n" }]
+        }], ctorParameters: () => [{ type: i3.PlaceholderService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }], propDecorators: { _carbonPlaceHolder: [{
+                type: ViewChild,
+                args: ['carbonPlaceHolder', { static: true, read: ViewContainerRef }]
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetFieldComponent {
+    set widgetConfiguration(value) {
+        if (!value)
+            return;
+        this.widgetConfiguration$.next(value);
+    }
+    set widgetData(value) {
+        if (!value)
+            return;
+        this.widgetData$.next(value);
+        this.isEmptyWidgetData$.next(this.checkEmptyWidgetData(value));
+    }
+    constructor(viewContentService) {
+        this.viewContentService = viewContentService;
+        this.class = 'widget-field';
+        this.isEmptyWidgetData$ = new BehaviorSubject(false);
+        this.noVisibleFields$ = new BehaviorSubject(true);
+        this.renderVertically = signal(0);
+        this.widgetConfiguration$ = new BehaviorSubject(null);
+        this.widgetData$ = new BehaviorSubject(null);
+        this.widgetPropertyValue$ = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(map(([widget, widgetData]) => widget?.properties.columns.map(column => column.reduce((columnFields, property) => [
+            ...columnFields,
+            ...(widgetData?.hasOwnProperty(property.key)
+                ? [
+                    {
+                        title: property.title,
+                        ellipsisCharacterLimit: property.displayProperties
+                            ?.ellipsisCharacterLimit ?? null,
+                        hideWhenEmpty: property.displayProperties?.hideWhenEmpty ?? false,
+                        value: this.viewContentService.get(widgetData[property.key], {
+                            ...property.displayProperties,
+                            viewType: property.displayProperties?.type ?? ViewType.TEXT,
+                        }),
+                        isRawValue: this.viewContentService.isRawValue({
+                            ...property.displayProperties,
+                            viewType: property.displayProperties?.type ?? ViewType.TEXT,
+                        })
+                    },
+                ]
+                : []),
+        ], []))), tap(columns => this.checkEmptyFields(columns)));
+    }
+    ngAfterViewInit() {
+        if (this._widgetFieldRef)
+            this.openWidthObserver();
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+    }
+    openWidthObserver() {
+        this._observer = new ResizeObserver(event => {
+            this.observerMutation(event);
+        });
+        this._observer.observe(this._widgetFieldRef.nativeElement);
+    }
+    observerMutation(event) {
+        const elementWidth = event[0]?.borderBoxSize[0]?.inlineSize;
+        if (typeof elementWidth === 'number' && elementWidth !== 0) {
+            if (elementWidth < 640) {
+                this.renderVertically.set(1);
+            }
+            else if (elementWidth > 640 && elementWidth <= 768) {
+                this.renderVertically.set(2);
+            }
+            else if (elementWidth > 768 && elementWidth <= 1080) {
+                this.renderVertically.set(3);
+            }
+            else if (elementWidth > 1080) {
+                this.renderVertically.set(4);
+            }
+        }
+    }
+    checkEmptyWidgetData(widgetData) {
+        return widgetData && Object.keys(widgetData).length === 0;
+    }
+    checkEmptyFields(columns) {
+        columns.forEach(column => {
+            column.forEach(field => {
+                if (!field?.hideWhenEmpty || (field?.hideWhenEmpty && field?.value && field?.value !== '-'))
+                    this.noVisibleFields$.next(false);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldComponent, deps: [{ token: i1.ViewContentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], 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<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section class=\"widget-field__header\">\n    <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n    <ng-content></ng-content>\n  </section>\n\n  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @if (obs.noVisibleFields) {\n        <valtimo-no-results\n          [collapseVertically]=\"true\"\n          [description]=\"'widgets.emptyFields' | translate\"\n          [smallPadding]=\"true\"\n        ></valtimo-no-results>\n      } @else {\n        @for (column of obs?.widgetPropertyValue; track column.key) {\n          <div class=\"widget-field__column\">\n            @for (property of column; track property) {\n              <div\n                *ngIf=\"\n                  (property?.value !== null &&\n                    property?.value !== '-' &&\n                    property?.hideWhenEmpty) ||\n                  !property?.hideWhenEmpty\n                \"\n                class=\"widget-field__field\"\n              >\n                <label class=\"widget-field__field-label\" [attr.title]=\"property?.title\">\n                  {{ property?.title }}</label\n                >\n\n                <div [attr.title]=\"property?.value\" class=\"widget-field__field-value\">\n                  @if (property?.isRawValue) {\n                    <div [innerHTML]=\"property?.value\"></div>\n                  } @else {\n                    {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: EllipsisPipe, name: "valtimoEllipsis" }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        InputModule,
+                        TranslateModule,
+                        CarbonListModule,
+                        EllipsisPipe,
+                        ButtonModule,
+                    ], 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<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section class=\"widget-field__header\">\n    <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n    <ng-content></ng-content>\n  </section>\n\n  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4,\n      }\"\n    >\n      @if (obs.noVisibleFields) {\n        <valtimo-no-results\n          [collapseVertically]=\"true\"\n          [description]=\"'widgets.emptyFields' | translate\"\n          [smallPadding]=\"true\"\n        ></valtimo-no-results>\n      } @else {\n        @for (column of obs?.widgetPropertyValue; track column.key) {\n          <div class=\"widget-field__column\">\n            @for (property of column; track property) {\n              <div\n                *ngIf=\"\n                  (property?.value !== null &&\n                    property?.value !== '-' &&\n                    property?.hideWhenEmpty) ||\n                  !property?.hideWhenEmpty\n                \"\n                class=\"widget-field__field\"\n              >\n                <label class=\"widget-field__field-label\" [attr.title]=\"property?.title\">\n                  {{ property?.title }}</label\n                >\n\n                <div [attr.title]=\"property?.value\" class=\"widget-field__field-value\">\n                  @if (property?.isRawValue) {\n                    <div [innerHTML]=\"property?.value\"></div>\n                  } @else {\n                    {{ property?.value | valtimoEllipsis: property?.ellipsisCharacterLimit }}\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field__header{display:flex;align-items:center;justify-content:space-between}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__field{display:flex;width:100%;flex-direction:column;gap:8px}.widget-field__field-label{font-size:12px;color:var(--cds-text-secondary)}.widget-field__field-value{color:var(--cds-text-primary);padding:8px 16px;border-bottom:1px solid var(--cds-border-subtle-01);font-size:14px}.widget-field .cds--label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;align-items:stretch;gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.ViewContentService }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], _widgetFieldRef: [{
+                type: ViewChild,
+                args: ['widgetField']
+            }], widgetConfiguration: [{
+                type: Input
+            }], widgetData: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class TranslationManagementComponent {
+    constructor(translateService, localizationService, pageHeaderService, document) {
+        this.translateService = translateService;
+        this.localizationService = localizationService;
+        this.pageHeaderService = pageHeaderService;
+        this.document = document;
+        this.loading$ = new BehaviorSubject(true);
+        this.allChangedValuesValid$ = new BehaviorSubject(false);
+        this.disabled$ = new BehaviorSubject(false);
+        this._languageOptions$ = new BehaviorSubject(undefined);
+        this._refreshLocalizations$ = new BehaviorSubject(null);
+        this._localizationTranslations$ = this._refreshLocalizations$.pipe(tap(() => this.loading$.next(true)), switchMap(() => this.localizationService.getMergedLocalizations()), tap(() => this.loading$.next(false)));
+        this._defaultValues = [];
+        this._changedValues$ = new BehaviorSubject(undefined);
+        this.showConfirmationModal$ = new BehaviorSubject(false);
+        this.valuesChanged$ = this._changedValues$.pipe(map(changedValues => !isEqual(changedValues, this._defaultValues)));
+        this.localizationTranslationValues$ = combineLatest([
+            this._languageOptions$,
+            this._localizationTranslations$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([languageOptions, localizationTranslations]) => this.mapMergedLocalizationsToMultiInput(languageOptions, localizationTranslations)), tap(defaultValues => {
+            this._defaultValues = defaultValues;
+        }));
+        this.multiInputTiles$ = combineLatest([
+            this._languageOptions$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([languageOptions]) => {
+            const objToReturn = {};
+            objToReturn[0] = this.translateService.instant('listColumn.key');
+            languageOptions.forEach((languageOption, index) => {
+                objToReturn[index + 1] = this.translateService.instant(`settings.language.options.${languageOption}`);
+            });
+            return objToReturn;
+        }));
+        this.amountOfArbitraryValues$ = this.multiInputTiles$.pipe(map(multiInputTitles => Object.keys(multiInputTitles).length));
+        this.compactMode$ = this.pageHeaderService.compactMode$;
+    }
+    ngOnInit() {
+        this.setLanguages();
+    }
+    validChange(valid) {
+        this.allChangedValuesValid$.next(valid);
+    }
+    valueChange(value) {
+        this._changedValues$.next(value);
+    }
+    saveAndRefresh() {
+        this.saveChanges(true);
+    }
+    saveAndStay() {
+        this.saveChanges();
+    }
+    cancel() {
+        this.hideModal();
+    }
+    showModal() {
+        this.showConfirmationModal$.next(true);
+    }
+    saveChanges(reload = false) {
+        this.disable();
+        combineLatest([this._changedValues$, this._languageOptions$])
+            .pipe(take(1), map(([changedValues, languageOptions]) => this.getLocalizationsForUpdateRequest(changedValues, languageOptions)), switchMap(updatedLocalizations => this.localizationService.updateLocalizations(updatedLocalizations)))
+            .subscribe(() => {
+            if (reload) {
+                this.document?.defaultView?.location?.reload();
+            }
+            else {
+                this._refreshLocalizations$.next(null);
+                this.enable();
+            }
+        });
+    }
+    setLanguages() {
+        this._languageOptions$.next(this.translateService.langs);
+    }
+    disable() {
+        this.disabled$.next(true);
+    }
+    enable() {
+        this.disabled$.next(false);
+    }
+    hideModal() {
+        this.showConfirmationModal$.next(false);
+    }
+    flattenObject(ob) {
+        const toReturn = {};
+        for (const i in ob) {
+            if (!ob.hasOwnProperty(i))
+                continue;
+            if (typeof ob[i] == 'object' && ob[i] !== null) {
+                const flatObject = this.flattenObject(ob[i]);
+                for (const x in flatObject) {
+                    if (!flatObject.hasOwnProperty(x))
+                        continue;
+                    toReturn[i + '.' + x] = flatObject[x];
+                }
+            }
             else {
                 toReturn[i] = ob[i];
             }
         }
-        return toReturn;
+        return toReturn;
+    }
+    unflattenObject(obj, delimiter = '.') {
+        return Object.keys(obj).reduce((res, k) => {
+            k.split(delimiter).reduce((acc, e, i, keys) => acc[e] ||
+                (acc[e] = isNaN(Number(keys[i + 1])) ? (keys.length - 1 === i ? obj[k] : {}) : []), res);
+            return res;
+        }, {});
+    }
+    getLocalizationsForUpdateRequest(changedValues, languageOptions) {
+        const localizations = [];
+        const translationObject = {};
+        languageOptions.forEach(languageOption => {
+            translationObject[languageOption] = {};
+        });
+        changedValues.forEach(changedValue => {
+            languageOptions.forEach((languageOption, index) => {
+                translationObject[languageOption] = {
+                    ...translationObject[languageOption],
+                    [changedValue[0]]: changedValue[index + 1],
+                };
+            });
+        });
+        languageOptions.forEach(languageOption => {
+            translationObject[languageOption] = this.unflattenObject(translationObject[languageOption]);
+        });
+        Object.keys(translationObject).forEach(languageKey => {
+            localizations.push({ languageKey, content: translationObject[languageKey] });
+        });
+        return localizations;
+    }
+    mapMergedLocalizationsToMultiInput(languageOptions, mergedLocalizations) {
+        if (Object.keys(mergedLocalizations).length === 0) {
+            return [];
+        }
+        const firstLanguageOption = languageOptions[0];
+        const firstLanguageTranslations = firstLanguageOption && mergedLocalizations[firstLanguageOption];
+        const flattenedFirstLanguageTranslations = firstLanguageTranslations && this.flattenObject(firstLanguageTranslations);
+        return Object.keys(flattenedFirstLanguageTranslations).map(flattenedTranslationKey => {
+            const emptyArbitraryValue = {};
+            emptyArbitraryValue['0'] = flattenedTranslationKey;
+            languageOptions.forEach((languageOption, index) => {
+                emptyArbitraryValue[`${index + 1}`] =
+                    this.flattenObject(mergedLocalizations[languageOption])[flattenedTranslationKey] || '';
+            });
+            return emptyArbitraryValue;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementComponent, deps: [{ token: i2$1.TranslateService }, { token: i2$3.LocalizationService }, { token: i1.PageHeaderService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TranslationManagementComponent, isStandalone: false, selector: "valtimo-translation-management", 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<ng-container\n  *ngIf=\"{\n    localizationTranslationValues: localizationTranslationValues$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async,\n    multiInputTitles: multiInputTiles$ | async,\n    amountOfArbitraryValues: amountOfArbitraryValues$ | async,\n    showConfirmationModal: showConfirmationModal$,\n    allChangedValuesValid: allChangedValuesValid$ | async,\n    valuesChanged: valuesChanged$ | async,\n    compactMode: compactMode$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"!obs.loading && obs.localizationTranslationValues; else loading\">\n    <valtimo-carbon-multi-input\n      [disabled]=\"obs.disabled\"\n      [arbitraryAmountTitles]=\"obs.multiInputTitles\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      type=\"arbitraryAmount\"\n      [arbitraryValueAmount]=\"obs.amountOfArbitraryValues\"\n      [defaultValues]=\"obs.localizationTranslationValues\"\n      (allValuesValidEvent)=\"validChange($event)\"\n      (valueChange)=\"valueChange($event)\"\n      addRowTranslationKey=\"translationManagement.add\"\n    ></valtimo-carbon-multi-input>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"loading-container\"><cds-loading></cds-loading></div>\n  </ng-template>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"obs.showConfirmationModal\"\n    (confirmEvent)=\"saveAndRefresh()\"\n    (optionalEvent)=\"saveAndStay()\"\n    (cancelEvent)=\"cancel()\"\n    [showOptionalButton]=\"true\"\n    cancelButtonType=\"ghost\"\n    optionalButtonType=\"secondary\"\n    confirmButtonTextTranslationKey=\"translationManagement.saveWithReload\"\n    optionalButtonTextTranslationKey=\"translationManagement.saveWithoutReload\"\n    titleTranslationKey=\"translationManagement.modalTitle\"\n    contentTranslationKey=\"translationManagement.modalContent\"\n    [spacerAfterCancelButton]=\"true\"\n  ></valtimo-confirmation-modal>\n\n  <ng-container renderInPageHeader>\n    <ng-template>\n      <button\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"showModal()\"\n        [disabled]=\"!obs.allChangedValuesValid || obs.disabled || !obs.valuesChanged\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\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: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { 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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-translation-management', standalone: false, 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<ng-container\n  *ngIf=\"{\n    localizationTranslationValues: localizationTranslationValues$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async,\n    multiInputTitles: multiInputTiles$ | async,\n    amountOfArbitraryValues: amountOfArbitraryValues$ | async,\n    showConfirmationModal: showConfirmationModal$,\n    allChangedValuesValid: allChangedValuesValid$ | async,\n    valuesChanged: valuesChanged$ | async,\n    compactMode: compactMode$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"!obs.loading && obs.localizationTranslationValues; else loading\">\n    <valtimo-carbon-multi-input\n      [disabled]=\"obs.disabled\"\n      [arbitraryAmountTitles]=\"obs.multiInputTitles\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      type=\"arbitraryAmount\"\n      [arbitraryValueAmount]=\"obs.amountOfArbitraryValues\"\n      [defaultValues]=\"obs.localizationTranslationValues\"\n      (allValuesValidEvent)=\"validChange($event)\"\n      (valueChange)=\"valueChange($event)\"\n      addRowTranslationKey=\"translationManagement.add\"\n    ></valtimo-carbon-multi-input>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"loading-container\"><cds-loading></cds-loading></div>\n  </ng-template>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"obs.showConfirmationModal\"\n    (confirmEvent)=\"saveAndRefresh()\"\n    (optionalEvent)=\"saveAndStay()\"\n    (cancelEvent)=\"cancel()\"\n    [showOptionalButton]=\"true\"\n    cancelButtonType=\"ghost\"\n    optionalButtonType=\"secondary\"\n    confirmButtonTextTranslationKey=\"translationManagement.saveWithReload\"\n    optionalButtonTextTranslationKey=\"translationManagement.saveWithoutReload\"\n    titleTranslationKey=\"translationManagement.modalTitle\"\n    contentTranslationKey=\"translationManagement.modalContent\"\n    [spacerAfterCancelButton]=\"true\"\n  ></valtimo-confirmation-modal>\n\n  <ng-container renderInPageHeader>\n    <ng-template>\n      <button\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"showModal()\"\n        [disabled]=\"!obs.allChangedValuesValid || obs.disabled || !obs.valuesChanged\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\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: i2$1.TranslateService }, { type: i2$3.LocalizationService }, { type: i1.PageHeaderService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetFormioComponent {
+    set documentId(value) {
+        if (value)
+            this._documentIdSubject$.next(value);
+    }
+    set widgetConfiguration(value) {
+        if (!value)
+            return;
+        this._widgetConfigurationSubject$.next(value);
+    }
+    set widgetUuid(value) {
+        this.widgetLayoutService.setWidgetDataLoaded(value);
+    }
+    get widgetConfiguration$() {
+        return this._widgetConfigurationSubject$.pipe(filter(config => !!config));
+    }
+    get _documentId$() {
+        return this._documentIdSubject$.pipe(filter(id => !!id));
+    }
+    constructor(formService, widgetLayoutService) {
+        this.formService = formService;
+        this.widgetLayoutService = widgetLayoutService;
+        this._widgetConfigurationSubject$ = new BehaviorSubject(null);
+        this._documentIdSubject$ = new BehaviorSubject('');
+        this.prefilledFormDefinition$ = combineLatest([
+            this.widgetConfiguration$,
+            this._documentId$,
+        ]).pipe(switchMap(([config, documentId]) => combineLatest([
+            this.formService.getFormDefinitionByNamePreFilled(config.properties.formDefinitionName, documentId),
+            of(config),
+        ])), tap(() => {
+            this.widgetLayoutService.setWidgetDataLoaded(this.widgetUuid);
+        }), map(([formDef]) => formDef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFormioComponent, deps: [{ token: i1$1.FormService }, { token: WidgetLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetFormioComponent, isStandalone: true, selector: "valtimo-widget-formio", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", widgetUuid: "widgetUuid" }, 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<div\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration$?.title || '-' }}</h4>\n\n    <ng-content></ng-content>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFormioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-formio', standalone: true, imports: [CommonModule, TranslateModule, FormIoModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, 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<div\n  class=\"formio-widget\"\n  *ngIf=\"{\n    prefilledFormDefinition: prefilledFormDefinition$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n  } as obs\"\n>\n  <section class=\"formio-widget__header\">\n    <h4 class=\"formio-widget__title\">{{ obs.widgetConfiguration$?.title || '-' }}</h4>\n\n    <ng-content></ng-content>\n  </section>\n\n  <valtimo-form-io [form]=\"obs.prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\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$1.FormService }, { type: WidgetLayoutService }], propDecorators: { documentId: [{
+                type: Input
+            }], widgetConfiguration: [{
+                type: Input
+            }], widgetUuid: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetCollectionComponent {
+    set widgetConfiguration(value) {
+        if (!value)
+            return;
+        this.widgetConfiguration$.next(value);
+    }
+    get widgetData$() {
+        return this._widgetData$.pipe(filter(data => !!data));
+    }
+    set widgetData(value) {
+        if (!value)
+            return;
+        if (!this._initialNumberOfElements)
+            this._initialNumberOfElements = value.numberOfElements;
+        let widgetData = value;
+        if (typeof value?.content?.length !== 'number')
+            return;
+        if (value.content.length < this._initialNumberOfElements) {
+            const rows = new Array(this._initialNumberOfElements).fill(null);
+            widgetData = {
+                ...value,
+                content: rows.map((_, index) => value.content[index] || { ...value[0], hidden: true }),
+            };
+        }
+        this._widgetData$.next(widgetData);
+        if (!this._paginationInitialized) {
+            this.showPagination$.next(value.totalElements > value.size);
+            this.paginationModel.set(value.totalPages < 0
+                ? null
+                : {
+                    currentPage: 1,
+                    totalDataLength: Math.ceil(value.totalElements / value.size),
+                    pageLength: value.size,
+                });
+            this._paginationInitialized = true;
+        }
+        else {
+            this.paginationModel.update((model) => ({
+                ...model,
+                currentPage: value.number + 1,
+            }));
+        }
+        this.cdr.detectChanges();
+    }
+    constructor(viewContentService, cdr) {
+        this.viewContentService = viewContentService;
+        this.cdr = cdr;
+        this.class = 'valtimo-widget-collection';
+        this.showPagination$ = new BehaviorSubject(false);
+        this._widgetData$ = new BehaviorSubject(null);
+        this._paginationInitialized = false;
+        this.paginationEvent = new EventEmitter();
+        this.noVisibleFields$ = new BehaviorSubject(true);
+        this.widgetTitle = signal('-');
+        this.widgetConfiguration$ = new BehaviorSubject(null);
+        this.paginationModel = signal(new PaginationModel());
+        this.amountOfColumns = signal(0);
+        this.collectionWidgetCards$ = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(filter(([widgetConfig, widgetData]) => !!widgetConfig && !!widgetData), tap(([widgetConfig]) => {
+            this.widgetTitle.set(widgetConfig.title);
+        }), map(([widgetConfig, widgetData]) => widgetData.content.map((cardData, index) => ({
+            hidden: cardData.hidden,
+            key: index,
+            title: this.getCardTitle({
+                value: cardData.title,
+                displayProperties: widgetConfig?.properties?.title?.displayProperties,
+            }),
+            fields: widgetConfig?.properties.fields.reduce((cardFieldsAccumulator, currentField) => [
+                ...cardFieldsAccumulator,
+                this.getCardField(currentField, cardData),
+            ], []),
+        }))), tap(card => this.checkEmptyFields(card)));
+    }
+    ngAfterViewInit() {
+        this.openWidthObserver();
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+    }
+    onSelectPage(page) {
+        this.paginationEvent.emit({ ...this.paginationModel(), currentPage: page });
+    }
+    getCardField(field, data) {
+        const resolvedValue = this.viewContentService.get(data.fields && field.key ? data.fields[field.key] : '', {
+            ...field.displayProperties,
+            viewType: field.displayProperties?.type ?? WidgetDisplayTypeKey.TEXT,
+        });
+        return {
+            key: field.key,
+            title: field.title,
+            width: field.width,
+            value: resolvedValue || data.fields[field.key],
+            hideWhenEmpty: field.displayProperties?.hideWhenEmpty,
+        };
+    }
+    openWidthObserver() {
+        this._observer = new ResizeObserver(event => {
+            this.observerMutation(event);
+        });
+        this._observer.observe(this._widgetCollectionRef.nativeElement);
+    }
+    observerMutation(event) {
+        const elementWidth = event[0]?.borderBoxSize[0]?.inlineSize;
+        if (typeof elementWidth === 'number' && elementWidth !== 0) {
+            if (elementWidth < 640) {
+                this.amountOfColumns.set(1);
+            }
+            else if (elementWidth > 640 && elementWidth <= 768) {
+                this.amountOfColumns.set(2);
+            }
+            else if (elementWidth > 768 && elementWidth <= 1080) {
+                this.amountOfColumns.set(3);
+            }
+            else if (elementWidth > 1080) {
+                this.amountOfColumns.set(4);
+            }
+        }
+    }
+    getCardTitle(collectionCaseWidgetTitle) {
+        const widgetTitleValue = collectionCaseWidgetTitle.value;
+        const widgetTitleDisplayProperties = collectionCaseWidgetTitle.displayProperties;
+        if (!widgetTitleDisplayProperties && widgetTitleValue) {
+            return widgetTitleValue;
+        }
+        else if (widgetTitleDisplayProperties && widgetTitleValue) {
+            const convertedTitle = this.viewContentService.get(widgetTitleValue, {
+                ...widgetTitleDisplayProperties,
+                viewType: widgetTitleDisplayProperties.type,
+                hideWhenEmpty: widgetTitleDisplayProperties.hideWhenEmpty,
+            });
+            if (convertedTitle)
+                return convertedTitle;
+        }
+        return '-';
+    }
+    checkEmptyFields(card) {
+        card.forEach(collection => {
+            collection.fields.forEach(field => {
+                if (!field.hideWhenEmpty || (field.hideWhenEmpty && field.value && field.value !== '-'))
+                    this.noVisibleFields$.next(false);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCollectionComponent, deps: [{ token: i1.ViewContentService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], 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<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n    <ng-content></ng-content>\n  </section>\n\n  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        *ngIf=\"!obs.noVisibleFields\"\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            *ngIf=\"\n              (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n              !field?.hideWhenEmpty\n            \"\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half',\n            }\"\n          >\n            <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"\n        (obs.noVisibleFields ? 'case.widgets.emptyFields' : 'case.widgets.noData') | translate\n      \"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { 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: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCollectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-collection', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        InputModule,
+                        PaginationModule,
+                        TilesModule,
+                        CarbonListModule,
+                        TranslateModule,
+                        ButtonModule,
+                    ], 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<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async,\n    noVisibleFields: noVisibleFields$ | async,\n  } as obs\"\n>\n  <section class=\"valtimo-widget-collection__header\">\n    <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n    <ng-content></ng-content>\n  </section>\n\n  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4,\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        *ngIf=\"!obs.noVisibleFields\"\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            *ngIf=\"\n              (field?.value !== null && field?.value !== '-' && field?.hideWhenEmpty) ||\n              !field?.hideWhenEmpty\n            \"\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half',\n            }\"\n          >\n            <cds-label class=\"valtimo-widget-collection__label\" [attr.title]=\"field?.title\">\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (obs.noVisibleFields || !obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"\n        (obs.noVisibleFields ? 'case.widgets.emptyFields' : 'case.widgets.noData') | translate\n      \"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection .cds--label{overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column;width:100%;overflow:hidden}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{grid-gap:16px;align-items:stretch;overflow:hidden;text-overflow:ellipsis;width:100%}.valtimo-widget-collection__render-vertically{display:flex!important}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\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.ViewContentService }, { type: i0.ChangeDetectorRef }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], _widgetCollectionRef: [{
+                type: ViewChild,
+                args: ['widgetCollection']
+            }], widgetConfiguration: [{
+                type: Input
+            }], widgetData: [{
+                type: Input
+            }], paginationEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetTableComponent {
+    get widgetConfiguration() {
+        return this._widgetConfiguration;
+    }
+    set widgetConfiguration(value) {
+        this._widgetConfiguration = value;
+        this.fields$.next(value.properties.columns.map((column, index) => ({
+            key: column.key,
+            label: column.title,
+            viewType: column.displayProperties?.type ?? ViewType.TEXT,
+            className: `valtimo-widget-table--transparent ${index === 0 && value.properties.firstColumnAsTitle ? 'valtimo-widget-table--title' : ''}`,
+            ...(!!column.displayProperties?.['format'] && {
+                format: column.displayProperties['format'],
+            }),
+            ...(!!column.displayProperties?.['digitsInfo'] && {
+                digitsInfo: column.displayProperties['digitsInfo'],
+            }),
+            ...(!!column.displayProperties?.['display'] && {
+                display: column.displayProperties['display'],
+            }),
+            ...(!!column.displayProperties?.['currencyCode'] && {
+                currencyCode: column.displayProperties['currencyCode'],
+            }),
+            ...(!!column.displayProperties?.['values'] && {
+                values: column.displayProperties['values'],
+            }),
+        })));
+        this.cdr.detectChanges();
+    }
+    set widgetData(value) {
+        if (!value)
+            return;
+        this.showPagination.set(value.totalElements > value.size);
+        if (!this._initialNumberOfElements)
+            this._initialNumberOfElements = value.numberOfElements;
+        let widgetData = value.content;
+        if (typeof value?.content?.length !== 'number')
+            return;
+        if (value.content.length < this._initialNumberOfElements) {
+            const rows = new Array(this._initialNumberOfElements).fill(null);
+            widgetData = rows.map((_, index) => value.content[index] || { ...value[0], hidden: true });
+        }
+        this.widgetData$.next(widgetData);
+        if (!this._paginationInitialized) {
+            this.showPagination.set(value.totalElements > value.size);
+            this.paginationModel.set(value.totalPages < 0
+                ? null
+                : {
+                    currentPage: 1,
+                    totalDataLength: Math.ceil(value.totalElements / value.size),
+                    pageLength: value.size,
+                });
+            this._paginationInitialized = true;
+        }
+        else {
+            this.paginationModel.update((model) => !model
+                ? null
+                : {
+                    ...model,
+                    currentPage: value.number + 1,
+                });
+        }
+        this.cdr.detectChanges();
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.showPagination = signal(false);
+        this.widgetData$ = new BehaviorSubject(null);
+        this._paginationInitialized = false;
+        this.paginationEvent = new EventEmitter();
+        this.fields$ = new BehaviorSubject([]);
+        this.paginationModel = signal(new PaginationModel());
+    }
+    onSelectPage(page) {
+        const paginationModel = this.paginationModel();
+        if (!paginationModel)
+            return;
+        this.paginationEvent.emit({ ...paginationModel, currentPage: page });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetTableComponent, isStandalone: true, selector: "valtimo-widget-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, outputs: { paginationEvent: "paginationEvent" }, 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\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n  class=\"valtimo-widget-table\"\n>\n  <section class=\"valtimo-widget-table__header\">\n    <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n\n    <ng-content></ng-content>\n  </section>\n\n  @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n    <section class=\"valtimo-widget-table__content\">\n      <valtimo-carbon-list\n        [header]=\"false\"\n        [hideToolbar]=\"true\"\n        [fields]=\"obs.fields\"\n        [items]=\"obs.widgetData\"\n      >\n      </valtimo-carbon-list>\n\n      <cds-pagination-nav\n        *ngIf=\"paginationModel() && showPagination()\"\n        class=\"valtimo-widget-table__pagination\"\n        [model]=\"paginationModel()\"\n        (selectPage)=\"onSelectPage($event)\"\n      >\n      </cds-pagination-nav>\n    </section>\n  } @else {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'case.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "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: PaginationModule }, { kind: "component", type: i3.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations", "size"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.Tile, selector: "cds-tile, ibm-tile", inputs: ["theme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        CarbonListModule,
+                        PaginationModule,
+                        TilesModule,
+                        TranslateModule,
+                        ButtonModule,
+                    ], 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\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n  } as obs\"\n  class=\"valtimo-widget-table\"\n>\n  <section class=\"valtimo-widget-table__header\">\n    <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n\n    <ng-content></ng-content>\n  </section>\n\n  @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n    <section class=\"valtimo-widget-table__content\">\n      <valtimo-carbon-list\n        [header]=\"false\"\n        [hideToolbar]=\"true\"\n        [fields]=\"obs.fields\"\n        [items]=\"obs.widgetData\"\n      >\n      </valtimo-carbon-list>\n\n      <cds-pagination-nav\n        *ngIf=\"paginationModel() && showPagination()\"\n        class=\"valtimo-widget-table__pagination\"\n        [model]=\"paginationModel()\"\n        (selectPage)=\"onSelectPage($event)\"\n      >\n      </cds-pagination-nav>\n    </section>\n  } @else {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'case.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__header{display:flex;align-items:center;justify-content:space-between}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\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 }], propDecorators: { widgetConfiguration: [{
+                type: Input,
+                args: [{ required: true }]
+            }], widgetData: [{
+                type: Input,
+                args: [{ required: true }]
+            }], paginationEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetCustomComponent {
+    set widgetConfiguration(value) {
+        if (!value)
+            return;
+        this._widgetConfigSubject$.next(value);
+    }
+    set widgetUuid(value) {
+        this.widgetLayoutService.setWidgetDataLoaded(value);
+    }
+    get widgetConfig$() {
+        return this._widgetConfigSubject$.pipe(filter(config => config !== null));
+    }
+    constructor(customWidgetConfig, cdr, widgetLayoutService, documentService, permissionService) {
+        this.customWidgetConfig = customWidgetConfig;
+        this.cdr = cdr;
+        this.widgetLayoutService = widgetLayoutService;
+        this.documentService = documentService;
+        this.permissionService = permissionService;
+        this._customWidgetConfig$ = new BehaviorSubject({});
+        this._widgetConfigSubject$ = new BehaviorSubject(null);
+        this.noCustomComponentAvailable = signal(false);
+        this._subscriptions = new Subscription();
+        if (customWidgetConfig)
+            this._customWidgetConfig$.next(this.customWidgetConfig);
+    }
+    ngAfterViewInit() {
+        this.openCustomWidgetSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    openCustomWidgetSubscription() {
+        this._subscriptions.add(combineLatest([this.widgetConfig$, this._customWidgetConfig$]).subscribe(([widgetConfig, customCaseWidgetConfig]) => {
+            const customWidgetComponentKey = widgetConfig?.properties?.componentKey;
+            const customComponent = customCaseWidgetConfig[customWidgetComponentKey];
+            if (!customComponent) {
+                this.noCustomComponentAvailable.set(true);
+                return;
+            }
+            const componentRef = this._customWidgetContainerRef.createComponent(customComponent);
+            componentRef.changeDetectorRef.detectChanges();
+            this.cdr.detectChanges();
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCustomComponent, deps: [{ token: CUSTOM_WIDGET_TOKEN, optional: true }, { token: i0.ChangeDetectorRef }, { token: WidgetLayoutService }, { token: i2$4.DocumentService }, { token: i3$1.PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetCustomComponent, isStandalone: true, selector: "valtimo-widget-custom", inputs: { widgetConfiguration: "widgetConfiguration", widgetUuid: "widgetUuid" }, viewQueries: [{ propertyName: "_customWidgetContainerRef", first: true, predicate: ["customWidgetContainer"], 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<div *ngIf=\"{widgetConfig: widgetConfig$ | async} as obs\" class=\"custom-widget\">\n  <section class=\"custom-widget__header\">\n    <h4 class=\"custom-widget__title\">{{ obs.widgetConfig$?.title || '-' }}</h4>\n\n    <ng-content></ng-content>\n  </section>\n\n  <div class=\"custom-widget__content\">\n    <ng-template #customWidgetContainer></ng-template>\n\n    @if (noCustomComponentAvailable()) {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'case.widgets.noCustomComponentDescription' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </div>\n</div>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetCustomComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-custom', standalone: true, imports: [CommonModule, CarbonListModule, TranslateModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, 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<div *ngIf=\"{widgetConfig: widgetConfig$ | async} as obs\" class=\"custom-widget\">\n  <section class=\"custom-widget__header\">\n    <h4 class=\"custom-widget__title\">{{ obs.widgetConfig$?.title || '-' }}</h4>\n\n    <ng-content></ng-content>\n  </section>\n\n  <div class=\"custom-widget__content\">\n    <ng-template #customWidgetContainer></ng-template>\n\n    @if (noCustomComponentAvailable()) {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'case.widgets.noCustomComponentDescription' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </div>\n</div>\n", styles: [".custom-widget{padding:24px}.custom-widget__header{display:flex;align-items:center;justify-content:space-between}.custom-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\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: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CUSTOM_WIDGET_TOKEN]
+                }] }, { type: i0.ChangeDetectorRef }, { type: WidgetLayoutService }, { type: i2$4.DocumentService }, { type: i3$1.PermissionService }], propDecorators: { _customWidgetContainerRef: [{
+                type: ViewChild,
+                args: ['customWidgetContainer', { read: ViewContainerRef }]
+            }], widgetConfiguration: [{
+                type: Input
+            }], widgetUuid: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetBlockComponent {
+    set widget(value) {
+        this._widgetUuid = value.uuid;
+        this._widget$.next(value);
+    }
+    get widget$() {
+        return this._widget$.pipe(filter(widget => widget !== null));
+    }
+    get _viewContainerRef$() {
+        return this._viewContainerRefSubject$.pipe(filter(ref => !!ref));
+    }
+    constructor(widgetLayoutService, route, cdsThemeService, renderer, viewRef) {
+        this.widgetLayoutService = widgetLayoutService;
+        this.route = route;
+        this.cdsThemeService = cdsThemeService;
+        this.renderer = renderer;
+        this.viewRef = viewRef;
+        this._widget$ = new BehaviorSubject(null);
+        this._viewContainerRefSubject$ = new BehaviorSubject(null);
+        this._contentHeight$ = new BehaviorSubject(0);
+        this.blockHeightPx$ = combineLatest([
+            this._contentHeight$,
+            this._viewContainerRef$,
+        ]).pipe(filter(([contentHeight]) => contentHeight !== 0), tap(([contentHeight, viewRef]) => {
+            const blockHeight = Math.ceil((contentHeight + 16) / WIDGET_HEIGHT_1X) * WIDGET_HEIGHT_1X;
+            this.renderer.setStyle(viewRef.element.nativeElement, 'height', `${blockHeight}px`);
+            this.widgetLayoutService.triggerMuuriLayout();
+        }));
+        this.blockWidthPercentage$ = combineLatest([
+            this.widgetLayoutService.amountOfColumns$,
+            this.widget$,
+            this._viewContainerRef$,
+        ]).pipe(tap(([amountOfColumns, widget, viewRef]) => {
+            const percentage = widget.width > amountOfColumns ? 100 : (widget.width / amountOfColumns) * 100;
+            this.renderer.setStyle(viewRef.element.nativeElement, 'width', `${percentage}%`);
+            this.widgetLayoutService.triggerMuuriLayout();
+        }));
+        this.documentId$ = this.route.params.pipe(map(params => params?.documentId), filter(documentId => !!documentId));
+        this.theme$ = combineLatest([this.cdsThemeService.currentTheme$, this.widget$]).pipe(map(([currentTheme, widgetConfiguration]) => {
+            return currentTheme === CurrentCarbonTheme.G10
+                ? widgetConfiguration.highContrast
+                    ? CARBON_THEME.G100
+                    : CARBON_THEME.G10
+                : widgetConfiguration.highContrast
+                    ? CARBON_THEME.WHITE
+                    : CARBON_THEME.G90;
+        }));
+        this._subscriptions = new Subscription();
+    }
+    ngAfterViewInit() {
+        this._viewContainerRefSubject$.next(this.viewRef);
+        this.openContentHeightObserver();
+        this.openWidgetComponentSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+        this._observer?.disconnect();
+    }
+    openContentHeightObserver() {
+        this._observer = new ResizeObserver(event => {
+            this.observerMutation(event);
+        });
+        this._observer.observe(this._widgetBlockContentRef.nativeElement);
+    }
+    observerMutation(event) {
+        const widgetContentHeight = event[0]?.borderBoxSize[0]?.blockSize;
+        if (typeof widgetContentHeight === 'number' && widgetContentHeight !== 0) {
+            this._contentHeight$.next(widgetContentHeight);
+        }
+    }
+    openWidgetComponentSubscription() {
+        this._subscriptions.add(combineLatest([this.widget$, this.documentId$.pipe(startWith(null))]).subscribe(([widget, documentId]) => {
+            const component = this.widgetComponentMap[widget.type];
+            if (!component)
+                return;
+            this.dynamicContainer.clear();
+            const componentRef = this.dynamicContainer.createComponent(component);
+            if (documentId)
+                componentRef.instance.documentId = documentId;
+            componentRef.instance.widgetConfiguration = widget;
+            componentRef.instance.widgetUuid = widget.uuid;
+            componentRef.instance.widgetParams = this.widgetParams;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetBlockComponent, deps: [{ token: WidgetLayoutService }, { token: i2$2.ActivatedRoute }, { token: i1.CdsThemeService }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetBlockComponent, isStandalone: true, selector: "valtimo-widget-block", inputs: { widget: "widget", widgetComponentMap: "widgetComponentMap", widgetParams: "widgetParams" }, viewQueries: [{ propertyName: "_widgetBlockContentRef", first: true, predicate: ["widgetBlockContent"], descendants: true }, { propertyName: "dynamicContainer", first: true, predicate: ["widgetComponent"], descendants: true, read: ViewContainerRef, static: 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<div class=\"widget-block\" [attr.data-carbon-theme]=\"theme$ | async\">\n  <div #widgetBlockContent class=\"widget-block__content\">\n    <ng-template #widgetComponent></ng-template>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    documentId: documentId$ | async,\n    widgetConfiguration: widget$ | async,\n    theme: theme$ | async,\n    blockHeightPx: blockHeightPx$ | async,\n    blockWidthPercentage: blockWidthPercentage$ | async,\n  } as obs\"\n></ng-container>\n", styles: [":host{display:block;position:absolute}.widget-block{width:100%;height:100%;box-sizing:border-box;padding:8px;overflow-wrap:break-word;background-color:var(--cds-layer-01);background-clip:content-box}.widget-block__not-available{padding:16px}\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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: LoadingModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TilesModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-block', standalone: true, imports: [CommonModule, LoadingModule, CarbonListModule, TranslateModule, TilesModule], changeDetection: ChangeDetectionStrategy.OnPush, 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<div class=\"widget-block\" [attr.data-carbon-theme]=\"theme$ | async\">\n  <div #widgetBlockContent class=\"widget-block__content\">\n    <ng-template #widgetComponent></ng-template>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    documentId: documentId$ | async,\n    widgetConfiguration: widget$ | async,\n    theme: theme$ | async,\n    blockHeightPx: blockHeightPx$ | async,\n    blockWidthPercentage: blockWidthPercentage$ | async,\n  } as obs\"\n></ng-container>\n", styles: [":host{display:block;position:absolute}.widget-block{width:100%;height:100%;box-sizing:border-box;padding:8px;overflow-wrap:break-word;background-color:var(--cds-layer-01);background-clip:content-box}.widget-block__not-available{padding:16px}\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: WidgetLayoutService }, { type: i2$2.ActivatedRoute }, { type: i1.CdsThemeService }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { _widgetBlockContentRef: [{
+                type: ViewChild,
+                args: ['widgetBlockContent']
+            }], dynamicContainer: [{
+                type: ViewChild,
+                args: ['widgetComponent', { static: true, read: ViewContainerRef }]
+            }], widget: [{
+                type: Input
+            }], widgetComponentMap: [{
+                type: Input
+            }], widgetParams: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetContainerComponent {
+    set widgets(value) {
+        if (!value)
+            return;
+        const widgetsWithUuids = value.map(widget => ({ ...widget, uuid: v4() }));
+        this.widgetLayoutService.setWidgets(widgetsWithUuids);
+        this.widgetsWithUuids$.next(widgetsWithUuids);
+        this.loadingWidgetConfiguration$.next(false);
+    }
+    get widgetComponentMap$() {
+        return this._widgetComponentMap$.pipe(filter$1(componentMap => componentMap !== null));
+    }
+    set widgetComponentMap(value) {
+        this._widgetComponentMap$.next({ ...DEFAULT_WIDGET_COMPONENT_MAP, ...value });
+    }
+    constructor(widgetLayoutService) {
+        this.widgetLayoutService = widgetLayoutService;
+        this.widgetsWithUuids$ = new BehaviorSubject(null);
+        this._widgetComponentMap$ = new BehaviorSubject(DEFAULT_WIDGET_COMPONENT_MAP);
+        this.widgetParams = {};
+        this.loadingWidgetConfiguration$ = new BehaviorSubject(true);
+        this.loaded$ = this.widgetLayoutService.loaded$.pipe(delay(400));
+    }
+    ngAfterViewInit() {
+        this._observer = new ResizeObserver(event => {
+            this.observerMutation(event);
+        });
+        this._observer.observe(this._widgetsContainerRef.nativeElement);
+        this.initMuuri();
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+        this.widgetLayoutService.reset();
+    }
+    observerMutation(event) {
+        const containerWidth = event[0]?.borderBoxSize[0]?.inlineSize;
+        if (typeof containerWidth === 'number' && containerWidth !== 0) {
+            this.widgetLayoutService.setContainerWidth(containerWidth);
+            this.widgetLayoutService.triggerMuuriLayout();
+        }
+    }
+    initMuuri() {
+        this.widgetLayoutService.loaded$.pipe(take(1), delay(300)).subscribe(() => {
+            this.widgetLayoutService.setMuuri(new Muuri(this._widgetsContainerRef.nativeElement, {
+                layout: {
+                    fillGaps: true,
+                },
+                layoutOnResize: false,
+            }));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetContainerComponent, deps: [{ token: WidgetLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetContainerComponent, isStandalone: true, selector: "valtimo-widget-container", inputs: { widgets: "widgets", widgetComponentMap: "widgetComponentMap", widgetParams: "widgetParams" }, viewQueries: [{ propertyName: "_widgetsContainerRef", first: true, predicate: ["widgetsContainer"], 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<ng-container\n  *ngIf=\"{\n    loadingWidgetConfiguration: loadingWidgetConfiguration$ | async,\n    widgets: widgetsWithUuids$ | async,\n    loaded: loaded$ | async,\n  } as obs\"\n>\n  <ng-container\n    *ngIf=\"{\n      noWidgetsConfigured: obs.widgets && obs.widgets.length === 0,\n    } as vars\"\n  >\n    @if (!obs.loaded && !vars.noWidgetsConfigured) {\n      <div class=\"loading-container\">\n        <cds-loading></cds-loading>\n      </div>\n    }\n\n    @if (vars.noWidgetsConfigured) {\n      <valtimo-no-results\n        [title]=\"'case.widgets.noWidgets' | translate\"\n        [description]=\"'case.widgets.noWidgetsDescription' | translate\"\n        illustration=\"valtimo-layout/img/no-widgets.svg\"\n      ></valtimo-no-results>\n    }\n\n    <div [style.visibility]=\"!obs.loaded ? 'hidden' : 'visible'\">\n      <div #widgetsContainer class=\"widgets-container\">\n        @for (widget of (widgetsWithUuids$ | async) || []; track widget.uuid) {\n          <valtimo-widget-block\n            [widget]=\"widget\"\n            [widgetComponentMap]=\"widgetComponentMap$ | async\"\n            [widgetParams]=\"widgetParams\"\n          ></valtimo-widget-block>\n        }\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".widgets-container{position:relative;width:calc(100% + 16px);margin-left:-8px;margin-top:-8px;padding-bottom:32px;box-sizing:content-box}.loading-container{display:flex;justify-content:center;padding:16px 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: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: WidgetBlockComponent, selector: "valtimo-widget-block", inputs: ["widget", "widgetComponentMap", "widgetParams"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-container', standalone: true, imports: [CommonModule, WidgetBlockComponent, LoadingModule, CarbonListModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, 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<ng-container\n  *ngIf=\"{\n    loadingWidgetConfiguration: loadingWidgetConfiguration$ | async,\n    widgets: widgetsWithUuids$ | async,\n    loaded: loaded$ | async,\n  } as obs\"\n>\n  <ng-container\n    *ngIf=\"{\n      noWidgetsConfigured: obs.widgets && obs.widgets.length === 0,\n    } as vars\"\n  >\n    @if (!obs.loaded && !vars.noWidgetsConfigured) {\n      <div class=\"loading-container\">\n        <cds-loading></cds-loading>\n      </div>\n    }\n\n    @if (vars.noWidgetsConfigured) {\n      <valtimo-no-results\n        [title]=\"'case.widgets.noWidgets' | translate\"\n        [description]=\"'case.widgets.noWidgetsDescription' | translate\"\n        illustration=\"valtimo-layout/img/no-widgets.svg\"\n      ></valtimo-no-results>\n    }\n\n    <div [style.visibility]=\"!obs.loaded ? 'hidden' : 'visible'\">\n      <div #widgetsContainer class=\"widgets-container\">\n        @for (widget of (widgetsWithUuids$ | async) || []; track widget.uuid) {\n          <valtimo-widget-block\n            [widget]=\"widget\"\n            [widgetComponentMap]=\"widgetComponentMap$ | async\"\n            [widgetParams]=\"widgetParams\"\n          ></valtimo-widget-block>\n        }\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".widgets-container{position:relative;width:calc(100% + 16px);margin-left:-8px;margin-top:-8px;padding-bottom:32px;box-sizing:content-box}.loading-container{display:flex;justify-content:center;padding:16px 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: WidgetLayoutService }], propDecorators: { _widgetsContainerRef: [{
+                type: ViewChild,
+                args: ['widgetsContainer']
+            }], widgets: [{
+                type: Input
+            }], widgetComponentMap: [{
+                type: Input
+            }], widgetParams: [{
+                type: Input,
+                args: [{ required: false }]
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetWizardContentStepComponent {
+    constructor(cdr, widgetWizardService) {
+        this.cdr = cdr;
+        this.widgetWizardService = widgetWizardService;
+        this.contentValidEvent = new EventEmitter();
+    }
+    ngOnInit() {
+        this.renderComponent();
+    }
+    renderComponent() {
+        this._vcr.clear();
+        const $widget = this.widgetWizardService.$selectedWidget();
+        if (!$widget)
+            return;
+        const componentInstance = this._vcr.createComponent($widget.component).instance;
+        if (!componentInstance)
+            return;
+        componentInstance.changeValidEvent.subscribe((valid) => this.contentValidEvent.emit(valid));
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardContentStepComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetWizardContentStepComponent, isStandalone: true, selector: "valtimo-widget-wizard-content-step", outputs: { contentValidEvent: "contentValidEvent" }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["contentRenderer"], descendants: true, read: ViewContainerRef, static: 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<ng-template #contentRenderer></ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardContentStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-wizard-content-step', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], 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<ng-template #contentRenderer></ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: WidgetWizardService }], propDecorators: { _vcr: [{
+                type: ViewChild,
+                args: ['contentRenderer', { static: true, read: ViewContainerRef }]
+            }], contentValidEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetWizardStyleStepComponent {
+    constructor(widgetWizardService) {
+        this.widgetWizardService = widgetWizardService;
+        this.WidgetStyle = WidgetStyle;
+        this.$widgetStyle = this.widgetWizardService.$widgetStyle;
+    }
+    onSelectedEvent(event) {
+        this.widgetWizardService.$widgetStyle.set(event.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardStyleStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetWizardStyleStepComponent, isStandalone: true, selector: "valtimo-widget-wizard-style-step", 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]=\"WidgetStyle.DEFAULT\"\n    [selected]=\"$widgetStyle() === WidgetStyle.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.style.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.style.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/style/default.svg\"\n      [alt]=\"'widgetTabManagement.style.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetStyle.HIGH_CONTRAST\"\n    [selected]=\"$widgetStyle() === WidgetStyle.HIGH_CONTRAST\"\n  >\n    <h3>{{ 'widgetTabManagement.style.highContrast.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.style.highContrast.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/style/high-contrast.svg\"\n      [alt]=\"'widgetTabManagement.style.highContrast.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.15", ngImport: i0, type: WidgetWizardStyleStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-wizard-style-step', 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]=\"WidgetStyle.DEFAULT\"\n    [selected]=\"$widgetStyle() === WidgetStyle.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.style.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.style.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/style/default.svg\"\n      [alt]=\"'widgetTabManagement.style.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetStyle.HIGH_CONTRAST\"\n    [selected]=\"$widgetStyle() === WidgetStyle.HIGH_CONTRAST\"\n  >\n    <h3>{{ 'widgetTabManagement.style.highContrast.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.style.highContrast.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/style/high-contrast.svg\"\n      [alt]=\"'widgetTabManagement.style.highContrast.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n" }]
+        }], ctorParameters: () => [{ type: WidgetWizardService }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetWizardTypeStepComponent {
+    constructor(widgetWizardService) {
+        this.widgetWizardService = widgetWizardService;
+        this.$availableWidgetTypes = computed(() => {
+            const availableTypes = this.widgetWizardService.$availableWidgetTypes();
+            return !availableTypes
+                ? AVAILABLE_WIDGETS
+                : AVAILABLE_WIDGETS.filter((typeSelection) => availableTypes.includes(typeSelection.type));
+        });
+        this.$selectedWidget = this.widgetWizardService.$selectedWidget;
+    }
+    onSelectedEvent(event) {
+        if (event.value.type !== this.widgetWizardService.$selectedWidget()?.type) {
+            this.widgetWizardService.$widgetContent.set(null);
+            this.widgetWizardService.$widgetTitle.set(null);
+        }
+        this.widgetWizardService.$selectedWidget.set(event.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardTypeStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: WidgetWizardTypeStepComponent, isStandalone: true, selector: "valtimo-widget-wizard-type-step", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardTypeStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-wizard-type-step', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-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" }]
+        }], ctorParameters: () => [{ type: WidgetWizardService }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetWizardWidthStepComponent {
+    constructor(widgetWizardService) {
+        this.widgetWizardService = widgetWizardService;
+        this.$fieldsColumnsLength = computed(() => this.widgetWizardService.$selectedWidget()?.type === WidgetType.FIELDS
+            ? (this.widgetWizardService.$widgetContent()?.['columns']?.length ?? 0)
+            : 0);
+        this.$widgetWidth = this.widgetWizardService.$widgetWidth;
+    }
+    onSelectedEvent(event) {
+        this.widgetWizardService.$widgetWidth.set(event.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardWidthStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetWizardWidthStepComponent, isStandalone: true, selector: "valtimo-widget-wizard-width-step", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardWidthStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-wizard-width-step', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-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" }]
+        }], ctorParameters: () => [{ type: WidgetWizardService }] });
+
+/*
+ * Copyright 2015-2025 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_STEPS = [
+    WidgetWizardContentStepComponent,
+    WidgetWizardStyleStepComponent,
+    WidgetWizardTypeStepComponent,
+    WidgetWizardWidthStepComponent,
+];
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetManagementWizardComponent {
+    set editMode(value) {
+        this._editMode = value;
+        if (!value)
+            return;
+        this.$currentStep.set(WidgetWizardStep.CONTENT);
+    }
+    get editMode() {
+        return this._editMode;
+    }
+    constructor(keyGeneratorService, translateService, widgetWizardService) {
+        this.keyGeneratorService = keyGeneratorService;
+        this.translateService = translateService;
+        this.widgetWizardService = widgetWizardService;
+        this.open = false;
+        this.closeEvent = new EventEmitter();
+        this.WidgetWizardSteps = WidgetWizardStep;
+        this._secondaryLabels = computed(() => {
+            const selectedWidgetType = this.widgetWizardService.$selectedWidget()?.type ?? '';
+            const selectedWidth = this.widgetWizardService.$widgetWidth() ?? '';
+            const selectedStyle = this.widgetWizardService.$widgetStyle() ?? '';
+            return {
+                [WidgetWizardStep.TYPE]: selectedWidgetType
+                    ? `widgetTabManagement.types.${selectedWidgetType}.title`
+                    : '',
+                [WidgetWizardStep.WIDTH]: WIDGET_WIDTH_LABELS[selectedWidth] ?? '',
+                [WidgetWizardStep.STYLE]: WIDGET_STYLE_LABELS[selectedStyle] ?? '',
+            };
+        });
+        this.steps$ = combineLatest([
+            toObservable(this._secondaryLabels),
+            toObservable(this.widgetWizardService.$editMode),
+            this.translateService.stream('key'),
+        ]).pipe(map(([secondaryLabels, editMode]) => {
+            return [
+                {
+                    label: this.translateService.instant('widgetTabManagement.wizard.steps.type'),
+                    ...(secondaryLabels[WidgetWizardStep.TYPE] && {
+                        secondaryLabel: this.translateService.instant(secondaryLabels[WidgetWizardStep.TYPE]),
+                    }),
+                    disabled: editMode,
+                    complete: !!this.widgetWizardService.$selectedWidget()?.type,
+                },
+                {
+                    label: this.translateService.instant('widgetTabManagement.wizard.steps.width'),
+                    ...(secondaryLabels[WidgetWizardStep.WIDTH] && {
+                        secondaryLabel: this.translateService.instant(secondaryLabels[WidgetWizardStep.WIDTH]),
+                    }),
+                    disabled: !secondaryLabels[WidgetWizardStep.TYPE],
+                    complete: !!this.widgetWizardService.$widgetWidth(),
+                },
+                {
+                    label: this.translateService.instant('widgetTabManagement.wizard.steps.style'),
+                    ...(secondaryLabels[WidgetWizardStep.STYLE] && {
+                        secondaryLabel: this.translateService.instant(secondaryLabels[WidgetWizardStep.STYLE]),
+                    }),
+                    disabled: !secondaryLabels[WidgetWizardStep.WIDTH],
+                    complete: !!this.widgetWizardService.$widgetStyle(),
+                },
+                {
+                    label: this.translateService.instant('widgetTabManagement.wizard.steps.content'),
+                    disabled: !secondaryLabels[WidgetWizardStep.TYPE] ||
+                        !secondaryLabels[WidgetWizardStep.WIDTH] ||
+                        !secondaryLabels[WidgetWizardStep.STYLE],
+                    complete: !!this.widgetWizardService.$widgetContent(),
+                },
+            ];
+        }));
+        this._$contentStepValid = signal(false);
+        this.$currentStep = signal(WidgetWizardStep.TYPE);
+        this.$backButtonDisabled = computed(() => this.widgetWizardService.$editMode() && this.$currentStep() === WidgetWizardStep.WIDTH);
+        this.$nextButtonDisabled = computed(() => {
+            switch (this.$currentStep()) {
+                case WidgetWizardStep.TYPE:
+                    return !this.widgetWizardService.$selectedWidget();
+                case WidgetWizardStep.WIDTH:
+                    return !this.widgetWizardService.$widgetWidth();
+                case WidgetWizardStep.STYLE:
+                    return this.widgetWizardService.$widgetStyle() === null;
+                case WidgetWizardStep.CONTENT:
+                    return this.widgetWizardService.$widgetContent() === null || !this._$contentStepValid();
+                default:
+                    return true;
+            }
+        });
+    }
+    onStepSelected(event) {
+        this.$currentStep.set(event.index);
+    }
+    onNextButtonClick() {
+        if (this.$currentStep() === WidgetWizardStep.CONTENT) {
+            const isDuplicateMode = this.editMode && !this.widgetWizardService.$widgetKey();
+            if (isDuplicateMode || !this.editMode) {
+                this.widgetWizardService.$widgetKey.set(this.keyGeneratorService.getUniqueKey(this.widgetWizardService.$widgetTitle() ?? '', this.widgetWizardService.$usedWidgetKeys()));
+            }
+            this.closeEvent.emit({
+                type: this.editMode && !isDuplicateMode
+                    ? WidgetWizardCloseEventType.EDIT
+                    : WidgetWizardCloseEventType.CREATE,
+                widget: this.widgetWizardService.$widgetsConfig(),
+            });
+            this.resetWizard();
+            return;
+        }
+        this.$currentStep.update((step) => step + 1);
+    }
+    onBackButtonClick() {
+        this.$currentStep.update((step) => step - 1);
+    }
+    onClose() {
+        this.closeEvent.emit({ type: WidgetWizardCloseEventType.CANCEL, widget: null });
+        this.resetWizard();
+    }
+    onContentValidEvent(valid) {
+        this._$contentStepValid.set(valid);
+    }
+    resetWizard() {
+        setTimeout(() => {
+            this.widgetWizardService.resetWizard();
+            this.$currentStep.set(WidgetWizardStep.TYPE);
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWizardComponent, deps: [{ 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.15", type: WidgetManagementWizardComponent, isStandalone: true, selector: "valtimo-widget-management-wizard", inputs: { open: "open", editMode: "editMode" }, 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\n  *ngIf=\"{steps: steps$ | async} as obs\"\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]=\"$currentStep()\"\n      [skeleton]=\"!obs.steps\"\n      [spacing]=\"'equal'\"\n      [steps]=\"obs.steps\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    @switch ($currentStep()) {\n      @case (WidgetWizardSteps.TYPE) {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-type-step>\n      }\n      @case (WidgetWizardSteps.WIDTH) {\n        <p>{{ 'widgetTabManagement.width.description' | translate }}</p>\n\n        <valtimo-widget-wizard-width-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-width-step>\n      }\n      @case (WidgetWizardSteps.STYLE) {\n        <p>{{ 'widgetTabManagement.style.description' | translate }}</p>\n\n        <valtimo-widget-wizard-style-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-style-step>\n      }\n      @case (WidgetWizardSteps.CONTENT) {\n        <valtimo-widget-wizard-content-step\n          (contentValidEvent)=\"onContentValidEvent($event)\"\n        ></valtimo-widget-wizard-content-step>\n      }\n      @default {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step></valtimo-widget-wizard-type-step>\n      }\n    }\n  </section>\n\n  <cds-modal-footer class=\"valtimo-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 ($currentStep() !== WidgetWizardSteps.TYPE) {\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.' + ($currentStep() === WidgetWizardSteps.CONTENT ? 'save' : 'next') | 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}::ng-deep .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: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: WidgetWizardContentStepComponent, selector: "valtimo-widget-wizard-content-step", outputs: ["contentValidEvent"] }, { kind: "component", type: WidgetWizardStyleStepComponent, selector: "valtimo-widget-wizard-style-step" }, { kind: "component", type: WidgetWizardTypeStepComponent, selector: "valtimo-widget-wizard-type-step" }, { kind: "component", type: WidgetWizardWidthStepComponent, selector: "valtimo-widget-wizard-width-step" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementWizardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-management-wizard', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ProgressIndicatorModule,
+                        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  *ngIf=\"{steps: steps$ | async} as obs\"\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]=\"$currentStep()\"\n      [skeleton]=\"!obs.steps\"\n      [spacing]=\"'equal'\"\n      [steps]=\"obs.steps\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    @switch ($currentStep()) {\n      @case (WidgetWizardSteps.TYPE) {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-type-step>\n      }\n      @case (WidgetWizardSteps.WIDTH) {\n        <p>{{ 'widgetTabManagement.width.description' | translate }}</p>\n\n        <valtimo-widget-wizard-width-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-width-step>\n      }\n      @case (WidgetWizardSteps.STYLE) {\n        <p>{{ 'widgetTabManagement.style.description' | translate }}</p>\n\n        <valtimo-widget-wizard-style-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-style-step>\n      }\n      @case (WidgetWizardSteps.CONTENT) {\n        <valtimo-widget-wizard-content-step\n          (contentValidEvent)=\"onContentValidEvent($event)\"\n        ></valtimo-widget-wizard-content-step>\n      }\n      @default {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step></valtimo-widget-wizard-type-step>\n      }\n    }\n  </section>\n\n  <cds-modal-footer class=\"valtimo-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 ($currentStep() !== WidgetWizardSteps.TYPE) {\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.' + ($currentStep() === WidgetWizardSteps.CONTENT ? 'save' : 'next') | 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}::ng-deep .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: i1.KeyGeneratorService }, { type: i2$1.TranslateService }, { type: WidgetWizardService }], propDecorators: { open: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], closeEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetManagementEditorComponent {
+    set params(value) {
+        if (!value)
+            return;
+        this.widgetManagementService.initParams(value);
+    }
+    set availableWidgetTypes(value) {
+        if (!value)
+            return;
+        this.widgetWizardService.$availableWidgetTypes.set(value);
+    }
+    constructor(translateService, widgetWizardService, widgetManagementService) {
+        this.translateService = translateService;
+        this.widgetWizardService = widgetWizardService;
+        this.widgetManagementService = widgetManagementService;
+        this.FIELDS = [
+            {
+                key: 'title',
+                label: 'interface.title',
+                viewType: ViewType.TEXT,
+            },
+            {
+                key: 'tags',
+                label: 'widgetTabManagement.columns.type',
+                viewType: ViewType.TAGS,
+            },
+            {
+                key: 'key',
+                label: 'interface.key',
+                viewType: ViewType.TEXT,
+            },
+            {
+                key: 'widthTranslation',
+                label: 'widgetTabManagement.columns.width',
+                viewType: ViewType.TEXT,
+            },
+            {
+                key: 'highContrast',
+                label: 'widgetTabManagement.columns.highContrast',
+                viewType: ViewType.BOOLEAN,
+            },
+        ];
+        this.ACTION_ITEMS = [
+            {
+                label: 'interface.edit',
+                callback: this.editWidget.bind(this),
+            },
+            {
+                label: 'interface.duplicate',
+                callback: this.duplicateWidget.bind(this),
+            },
+            {
+                label: 'interface.delete',
+                callback: this.deleteWidget.bind(this),
+                type: 'danger',
+            },
+        ];
+        this._refresh$ = new BehaviorSubject(null);
+        this.widgets$ = this._refresh$.pipe(switchMap(() => combineLatest([
+            this.widgetManagementService.getWidgetConfiguration(),
+            this.translateService.stream('key'),
+        ])), filter(([widgets]) => !!widgets), tap(([widgets]) => this.widgetWizardService.$usedWidgetKeys.set(widgets.map((widget) => widget.key))), map(([widgets]) => widgets.map(item => ({
+            ...item,
+            widthTranslation: this.translateService.instant(this.getWidthTranslationKey(item.width)),
+            tags: [
+                {
+                    content: this.translateService.instant(`widgetTabManagement.types.${item.type}.title`),
+                    type: WidgetTypeTags[item.type],
+                },
+            ],
+        }))));
+        this.$isWizardOpen = signal(false);
+        this.$isEditMode = this.widgetWizardService.$editMode;
+        this.deleteModalOpen$ = new BehaviorSubject(false);
+        this.$deleteWidget = signal(null);
+        this.$dragAndDropDisabled = signal(false);
+    }
+    editWidget(tabWidget) {
+        this.widgetWizardService.$widgetTitle.set(tabWidget.title);
+        this.widgetWizardService.$widgetStyle.set(tabWidget.highContrast ? WidgetStyle.HIGH_CONTRAST : WidgetStyle.DEFAULT);
+        this.widgetWizardService.$widgetWidth.set(tabWidget.width);
+        this.widgetWizardService.$selectedWidget.set(AVAILABLE_WIDGETS.find(available => available.type === tabWidget.type) ?? null);
+        this.widgetWizardService.$widgetContent.set(tabWidget.properties);
+        this.widgetWizardService.$editMode.set(true);
+        this.widgetWizardService.$widgetKey.set(tabWidget.key);
+        this.widgetWizardService.$widgetActions.set(tabWidget.actions);
+        this.$isWizardOpen.set(true);
+    }
+    duplicateWidget(tabWidget) {
+        const tabWidgetClone = cloneDeep(tabWidget);
+        tabWidgetClone.key = '';
+        this.editWidget(tabWidgetClone);
+    }
+    openAddModal() {
+        this.$isWizardOpen.set(true);
+    }
+    onDeleteConfirm(widget) {
+        this.widgetManagementService
+            .deleteWidget?.(widget)
+            .pipe(take(1))
+            .subscribe(() => this._refresh$.next(null));
+    }
+    onCloseEvent(event) {
+        this.$isWizardOpen.set(false);
+        this.widgetWizardService.resetWizard();
+        const { type, widget } = event;
+        if (!widget || type === WidgetWizardCloseEventType.CANCEL)
+            return;
+        (type === WidgetWizardCloseEventType.CREATE
+            ? this.widgetManagementService.createWidget(widget)
+            : this.widgetManagementService.updateWidget(widget))
+            .pipe(take(1))
+            .subscribe(() => {
+            this._refresh$.next(null);
+        });
+    }
+    onItemsReordered(widgets) {
+        this.$dragAndDropDisabled.set(true);
+        this.widgetManagementService
+            .updateWidgetConfiguration(widgets)
+            .pipe(take(1))
+            .subscribe(() => this.$dragAndDropDisabled.set(false));
+    }
+    deleteWidget(tabWidget) {
+        this.$deleteWidget.set(tabWidget);
+        this.deleteModalOpen$.next(true);
+    }
+    getWidthTranslationKey(width) {
+        switch (width) {
+            case 1:
+                return 'widgetTabManagement.width.small.title';
+            case 2:
+                return 'widgetTabManagement.width.medium.title';
+            case 3:
+                return 'widgetTabManagement.width.large.title';
+            case 4:
+                return 'widgetTabManagement.width.xtraLarge.title';
+            default:
+                return '-';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementEditorComponent, deps: [{ 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.15", type: WidgetManagementEditorComponent, isStandalone: true, selector: "valtimo-widget-management-editor", inputs: { params: "params", availableWidgetTypes: "availableWidgetTypes" }, 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]=\"ACTION_ITEMS\"\n  [fields]=\"FIELDS\"\n  [header]=\"false\"\n  [items]=\"widgets$ | async\"\n  [dragAndDrop]=\"true\"\n  [dragAndDropDisabled]=\"$dragAndDropDisabled()\"\n  (itemsReordered)=\"onItemsReordered($event)\"\n  (rowClicked)=\"editWidget($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <ng-container *ngTemplateOutlet=\"addWidgetButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addWidgetButton\"\n    [description]=\"'widgetTabManagement.list.noResults.description' | translate\"\n    [title]=\"'widgetTabManagement.list.noResults.title' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #addWidgetButton>\n  <button cdsButton=\"primary\" (click)=\"openAddModal()\">\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-wizard\n  [editMode]=\"$isEditMode()\"\n  [open]=\"$isWizardOpen()\"\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.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", "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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-management-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        CarbonListModule,
+                        ButtonModule,
+                        IconModule,
+                        TabsModule,
+                        WidgetManagementWizardComponent,
+                        ConfirmationModalModule,
+                    ], 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]=\"ACTION_ITEMS\"\n  [fields]=\"FIELDS\"\n  [header]=\"false\"\n  [items]=\"widgets$ | async\"\n  [dragAndDrop]=\"true\"\n  [dragAndDropDisabled]=\"$dragAndDropDisabled()\"\n  (itemsReordered)=\"onItemsReordered($event)\"\n  (rowClicked)=\"editWidget($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <ng-container *ngTemplateOutlet=\"addWidgetButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addWidgetButton\"\n    [description]=\"'widgetTabManagement.list.noResults.description' | translate\"\n    [title]=\"'widgetTabManagement.list.noResults.title' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #addWidgetButton>\n  <button cdsButton=\"primary\" (click)=\"openAddModal()\">\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-wizard\n  [editMode]=\"$isEditMode()\"\n  [open]=\"$isWizardOpen()\"\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: i2$1.TranslateService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WIDGET_MANAGEMENT_SERVICE]
+                }] }], propDecorators: { params: [{
+                type: Input
+            }], availableWidgetTypes: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetManagementComponent {
+    set params(value) {
+        if (!value)
+            return;
+        this.widgetManagementService.initParams(value);
+    }
+    constructor(widgetManagementService) {
+        this.widgetManagementService = widgetManagementService;
+        this.jsonModel$ = this.widgetManagementService
+            .getWidgetConfiguration()
+            .pipe(map((widgets) => ({
+            value: JSON.stringify(widgets),
+            language: 'json',
+        })));
+        this.$activeTab = signal(WidgetManagementTab.VISUAL);
+        this.WidgetManagementTab = WidgetManagementTab;
+    }
+    onSaveEvent(widgets) {
+        this.widgetManagementService.updateWidgetConfiguration(widgets).pipe(take(1)).subscribe();
+    }
+    switchTab(tab) {
+        this.$activeTab.set(tab);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementComponent, deps: [{ token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetManagementComponent, isStandalone: true, selector: "valtimo-widget-management", inputs: { params: "params", availableWidgetTypes: "availableWidgetTypes" }, 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-tabs type=\"contained\">\n  <cds-tab\n    [heading]=\"'interface.editor.visualEditor' | translate\"\n    (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n  >\n    <valtimo-widget-management-editor\n      *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n      [availableWidgetTypes]=\"availableWidgetTypes\"\n    ></valtimo-widget-management-editor>\n  </cds-tab>\n\n  <cds-tab\n    [heading]=\"'interface.editor.jsonEditor' | translate\"\n    (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n  >\n    <valtimo-json-editor\n      *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n      [model]=\"jsonModel$ | async\"\n      [fitPage]=\"true\"\n      [fitPageExtraSpace]=\"136\"\n      (saveEvent)=\"onSaveEvent($event)\"\n    ></valtimo-json-editor>\n  </cds-tab>\n</cds-tabs>\n", styles: ["::ng-deep .cds--tab-content{padding: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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: WidgetManagementEditorComponent, selector: "valtimo-widget-management-editor", inputs: ["params", "availableWidgetTypes"] }, { 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: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "fitPageExtraSpace", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetManagementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-management', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        WidgetManagementEditorComponent,
+                        TabsModule,
+                        TranslateModule,
+                        JsonEditorComponent,
+                    ], 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-tabs type=\"contained\">\n  <cds-tab\n    [heading]=\"'interface.editor.visualEditor' | translate\"\n    (selected)=\"switchTab(WidgetManagementTab.VISUAL)\"\n  >\n    <valtimo-widget-management-editor\n      *ngIf=\"$activeTab() === WidgetManagementTab.VISUAL\"\n      [availableWidgetTypes]=\"availableWidgetTypes\"\n    ></valtimo-widget-management-editor>\n  </cds-tab>\n\n  <cds-tab\n    [heading]=\"'interface.editor.jsonEditor' | translate\"\n    (selected)=\"switchTab(WidgetManagementTab.JSON)\"\n  >\n    <valtimo-json-editor\n      *ngIf=\"$activeTab() === WidgetManagementTab.JSON\"\n      [model]=\"jsonModel$ | async\"\n      [fitPage]=\"true\"\n      [fitPageExtraSpace]=\"136\"\n      (saveEvent)=\"onSaveEvent($event)\"\n    ></valtimo-json-editor>\n  </cds-tab>\n</cds-tabs>\n", styles: ["::ng-deep .cds--tab-content{padding: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: undefined, decorators: [{
+                    type: Inject,
+                    args: [WIDGET_MANAGEMENT_SERVICE]
+                }] }], propDecorators: { params: [{
+                type: Input
+            }], availableWidgetTypes: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 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_WIDTH_1X = 320;
+const WIDGET_HEIGHT_1X = 200;
+const DEFAULT_WIDGET_COMPONENT_MAP = {
+    [WidgetType.FORMIO]: WidgetFormioComponent,
+    [WidgetType.CUSTOM]: WidgetCustomComponent,
+    [WidgetType.COLLECTION]: WidgetCollectionComponent,
+    [WidgetType.TABLE]: WidgetTableComponent,
+    [WidgetType.FIELDS]: WidgetFieldComponent,
+};
+
+/*
+ * Copyright 2015-2025 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_MANAGEMENT_SERVICE = new InjectionToken('WIDGET_MANAGEMENT_SERVICE');
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetLayoutService {
+    get _muuri$() {
+        return this._muuriSubject$.pipe(filter(muuri => !!muuri));
     }
-    unflattenObject(obj, delimiter = '.') {
-        return Object.keys(obj).reduce((res, k) => {
-            k.split(delimiter).reduce((acc, e, i, keys) => acc[e] ||
-                (acc[e] = isNaN(Number(keys[i + 1])) ? (keys.length - 1 === i ? obj[k] : {}) : []), res);
-            return res;
-        }, {});
+    get _containerWidth$() {
+        return this._containerWidthSubject$.pipe(filter(width => width !== null));
     }
-    getLocalizationsForUpdateRequest(changedValues, languageOptions) {
-        const localizations = [];
-        const translationObject = {};
-        languageOptions.forEach(languageOption => {
-            translationObject[languageOption] = {};
-        });
-        changedValues.forEach(changedValue => {
-            languageOptions.forEach((languageOption, index) => {
-                translationObject[languageOption] = {
-                    ...translationObject[languageOption],
-                    [changedValue[0]]: changedValue[index + 1],
-                };
-            });
+    get amountOfColumns$() {
+        return this._containerWidth$.pipe(map(containerWidth => Math.floor(containerWidth / WIDGET_WIDTH_1X)));
+    }
+    get _widgets$() {
+        return this._widgetsSubject$.pipe(filter(widgets => widgets !== null));
+    }
+    get _widgetDataLoaded$() {
+        return this._widgetDataLoadedSubject$.pipe(filter(loaded => loaded !== null));
+    }
+    get loaded$() {
+        return combineLatest([
+            this._widgetDataLoaded$,
+            this._widgets$,
+            this._widgetsWithExternalData$,
+            this._widgetsWithExternalDataReady$,
+            this._containerWidth$,
+        ]).pipe(map(([widgetDataLoaded, widgets, widgetsWithExternalData, widgetsWithExternalDataReady]) => widgetDataLoaded?.length === widgets.length &&
+            widgetsWithExternalData.length === widgetsWithExternalDataReady.length), filter(loaded => !!loaded));
+    }
+    constructor() {
+        this._containerWidthSubject$ = new BehaviorSubject(null);
+        this._widgetsSubject$ = new BehaviorSubject(null);
+        this._widgetDataLoadedSubject$ = new BehaviorSubject(null);
+        this._muuriSubject$ = new BehaviorSubject(null);
+        this._triggerMuuriLayout$ = new Subject();
+        this._widgetsWithExternalData$ = new BehaviorSubject([]);
+        this._widgetsWithExternalDataReady$ = new BehaviorSubject([]);
+        this._subscriptions = new Subscription();
+        this.openMuuriSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    setMuuri(muuri) {
+        this._muuriSubject$.next(muuri);
+    }
+    triggerMuuriLayout() {
+        this._triggerMuuriLayout$.next(null);
+    }
+    setWidgets(widgets) {
+        this._widgetsSubject$.next(widgets);
+    }
+    setWidgetWithExternalData(uuid) {
+        this._widgetsWithExternalData$.pipe(take(1)).subscribe(widgetsWithExternalData => {
+            this._widgetsWithExternalData$.next([...widgetsWithExternalData, uuid]);
         });
-        languageOptions.forEach(languageOption => {
-            translationObject[languageOption] = this.unflattenObject(translationObject[languageOption]);
+    }
+    setWidgetWithExternalDataReady(uuid) {
+        this._widgetsWithExternalDataReady$.pipe(take(1)).subscribe(widgetsWithExternalDataReady => {
+            this._widgetsWithExternalDataReady$.next([...widgetsWithExternalDataReady, uuid]);
         });
-        Object.keys(translationObject).forEach(languageKey => {
-            localizations.push({ languageKey, content: translationObject[languageKey] });
+    }
+    setContainerWidth(width) {
+        this._containerWidthSubject$.next(width);
+    }
+    setWidgetDataLoaded(uuid) {
+        this._widgetDataLoadedSubject$.pipe(take(1)).subscribe(widgetDataLoaded => {
+            if (!(widgetDataLoaded || []).includes(uuid)) {
+                this._widgetDataLoadedSubject$.next([...(widgetDataLoaded || []), uuid]);
+            }
         });
-        return localizations;
     }
-    mapMergedLocalizationsToMultiInput(languageOptions, mergedLocalizations) {
-        if (Object.keys(mergedLocalizations).length === 0) {
-            return [];
+    reset() {
+        this._containerWidthSubject$.next(null);
+        this._widgetsSubject$.next(null);
+        this._widgetDataLoadedSubject$.next(null);
+        this._widgetsWithExternalData$.next([]);
+        this._widgetsWithExternalDataReady$.next([]);
+        this._muuriSubject$.next(null);
+    }
+    openMuuriSubscription() {
+        this._subscriptions.add(combineLatest([this._muuri$, this._triggerMuuriLayout$])
+            .pipe(debounceTime(150))
+            .subscribe(([muuri]) => {
+            muuri.refreshItems();
+            muuri.layout();
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetLayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetLayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetFieldsService {
+    constructor(fb, translateService) {
+        this.fb = fb;
+        this.translateService = translateService;
+        this.displayTypeItems = [
+            {
+                content: this.translateService.instant(`widgetTabManagement.content.displayType.${WidgetDisplayTypeKey.TEXT}`),
+                id: WidgetDisplayTypeKey.TEXT,
+                selected: true,
+            },
+            {
+                content: this.translateService.instant(`widgetTabManagement.content.displayType.${WidgetDisplayTypeKey.BOOLEAN}`),
+                id: WidgetDisplayTypeKey.BOOLEAN,
+                selected: false,
+            },
+            {
+                content: this.translateService.instant(`widgetTabManagement.content.displayType.${WidgetDisplayTypeKey.CURRENCY}`),
+                id: WidgetDisplayTypeKey.CURRENCY,
+                selected: false,
+            },
+            {
+                content: this.translateService.instant(`widgetTabManagement.content.displayType.${WidgetDisplayTypeKey.DATE}`),
+                id: WidgetDisplayTypeKey.DATE,
+                selected: false,
+            },
+            {
+                content: this.translateService.instant(`widgetTabManagement.content.displayType.${WidgetDisplayTypeKey.DATE_TIME}`),
+                id: WidgetDisplayTypeKey.DATE_TIME,
+                selected: false,
+            },
+            {
+                content: this.translateService.instant(`widgetTabManagement.content.displayType.${WidgetDisplayTypeKey.ENUM}`),
+                id: WidgetDisplayTypeKey.ENUM,
+                selected: false,
+            },
+            {
+                content: this.translateService.instant(`widgetTabManagement.content.displayType.${WidgetDisplayTypeKey.NUMBER}`),
+                id: WidgetDisplayTypeKey.NUMBER,
+                selected: false,
+            },
+            {
+                content: this.translateService.instant(`widgetTabManagement.content.displayType.${WidgetDisplayTypeKey.PERCENT}`),
+                id: WidgetDisplayTypeKey.PERCENT,
+                selected: false,
+            },
+            {
+                content: this.translateService.instant(`widgetTabManagement.content.displayType.${WidgetDisplayTypeKey.LINK}`),
+                id: WidgetDisplayTypeKey.LINK,
+                selected: false,
+            },
+        ];
+    }
+    getDisplayItemsSelected(control) {
+        const typeControlValue = control.get('type')?.value;
+        if (!typeControlValue)
+            return this.displayTypeItems;
+        return this.displayTypeItems.map((item) => ({
+            ...item,
+            selected: typeControlValue.id === item.id && typeControlValue.selected,
+        }));
+    }
+    onDisplayTypeSelected(mainKeysArray, formGroup, event) {
+        const extraControlKeys = Object.keys(formGroup.controls).filter((key) => !mainKeysArray.includes(key));
+        extraControlKeys.forEach((controlKey) => formGroup.removeControl(controlKey));
+        switch (event.item.id) {
+            case WidgetDisplayTypeKey.BOOLEAN:
+                break;
+            case WidgetDisplayTypeKey.TEXT:
+                formGroup.addControl('ellipsisCharacterLimit', this.fb.control(''));
+                break;
+            case WidgetDisplayTypeKey.CURRENCY:
+                formGroup.addControl('currencyCode', this.fb.control(''));
+                formGroup.addControl('display', this.fb.control(''));
+                formGroup.addControl('digitsInfo', this.fb.control(''));
+                break;
+            case WidgetDisplayTypeKey.DATE:
+                formGroup.addControl('format', this.fb.control(''));
+                break;
+            case WidgetDisplayTypeKey.DATE_TIME:
+                formGroup.addControl('format', this.fb.control(''));
+                break;
+            case WidgetDisplayTypeKey.LINK:
+                formGroup.addControl('linkText', this.fb.control(''));
+                break;
+            case WidgetDisplayTypeKey.ENUM:
+                formGroup.addControl('values', this.fb.array([
+                    this.fb.group({
+                        key: this.fb.control('', Validators.required),
+                        value: this.fb.control('', Validators.required),
+                    }),
+                ], Validators.required));
+                break;
+            default:
+                formGroup.addControl('digitsInfo', this.fb.control(''));
+                break;
         }
-        const firstLanguageOption = languageOptions[0];
-        const firstLanguageTranslations = firstLanguageOption && mergedLocalizations[firstLanguageOption];
-        const flattenedFirstLanguageTranslations = firstLanguageTranslations && this.flattenObject(firstLanguageTranslations);
-        return Object.keys(flattenedFirstLanguageTranslations).map(flattenedTranslationKey => {
-            const emptyArbitraryValue = {};
-            emptyArbitraryValue['0'] = flattenedTranslationKey;
-            languageOptions.forEach((languageOption, index) => {
-                emptyArbitraryValue[`${index + 1}`] =
-                    this.flattenObject(mergedLocalizations[languageOption])[flattenedTranslationKey] || '';
-            });
-            return emptyArbitraryValue;
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementComponent, deps: [{ token: i1.TranslateService }, { token: i2$2.LocalizationService }, { token: i2$1.PageHeaderService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TranslationManagementComponent, isStandalone: false, selector: "valtimo-translation-management", 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<ng-container\n  *ngIf=\"{\n    localizationTranslationValues: localizationTranslationValues$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async,\n    multiInputTitles: multiInputTiles$ | async,\n    amountOfArbitraryValues: amountOfArbitraryValues$ | async,\n    showConfirmationModal: showConfirmationModal$,\n    allChangedValuesValid: allChangedValuesValid$ | async,\n    valuesChanged: valuesChanged$ | async,\n    compactMode: compactMode$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"!obs.loading && obs.localizationTranslationValues; else loading\">\n    <valtimo-carbon-multi-input\n      [disabled]=\"obs.disabled\"\n      [arbitraryAmountTitles]=\"obs.multiInputTitles\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      type=\"arbitraryAmount\"\n      [arbitraryValueAmount]=\"obs.amountOfArbitraryValues\"\n      [defaultValues]=\"obs.localizationTranslationValues\"\n      (allValuesValidEvent)=\"validChange($event)\"\n      (valueChange)=\"valueChange($event)\"\n      addRowTranslationKey=\"translationManagement.add\"\n    ></valtimo-carbon-multi-input>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"loading-container\"><cds-loading></cds-loading></div>\n  </ng-template>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"obs.showConfirmationModal\"\n    (confirmEvent)=\"saveAndRefresh()\"\n    (optionalEvent)=\"saveAndStay()\"\n    (cancelEvent)=\"cancel()\"\n    [showOptionalButton]=\"true\"\n    cancelButtonType=\"ghost\"\n    optionalButtonType=\"secondary\"\n    confirmButtonTextTranslationKey=\"translationManagement.saveWithReload\"\n    optionalButtonTextTranslationKey=\"translationManagement.saveWithoutReload\"\n    titleTranslationKey=\"translationManagement.modalTitle\"\n    contentTranslationKey=\"translationManagement.modalContent\"\n    [spacerAfterCancelButton]=\"true\"\n  ></valtimo-confirmation-modal>\n\n  <ng-container renderInPageHeader>\n    <ng-template>\n      <button\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"showModal()\"\n        [disabled]=\"!obs.allChangedValuesValid || obs.disabled || !obs.valuesChanged\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\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: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i5.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i2$1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldsService, deps: [{ token: i2.FormBuilder }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-translation-management', standalone: false, 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<ng-container\n  *ngIf=\"{\n    localizationTranslationValues: localizationTranslationValues$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async,\n    multiInputTitles: multiInputTiles$ | async,\n    amountOfArbitraryValues: amountOfArbitraryValues$ | async,\n    showConfirmationModal: showConfirmationModal$,\n    allChangedValuesValid: allChangedValuesValid$ | async,\n    valuesChanged: valuesChanged$ | async,\n    compactMode: compactMode$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"!obs.loading && obs.localizationTranslationValues; else loading\">\n    <valtimo-carbon-multi-input\n      [disabled]=\"obs.disabled\"\n      [arbitraryAmountTitles]=\"obs.multiInputTitles\"\n      [fullWidth]=\"true\"\n      [minimumAmountOfRows]=\"0\"\n      type=\"arbitraryAmount\"\n      [arbitraryValueAmount]=\"obs.amountOfArbitraryValues\"\n      [defaultValues]=\"obs.localizationTranslationValues\"\n      (allValuesValidEvent)=\"validChange($event)\"\n      (valueChange)=\"valueChange($event)\"\n      addRowTranslationKey=\"translationManagement.add\"\n    ></valtimo-carbon-multi-input>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"loading-container\"><cds-loading></cds-loading></div>\n  </ng-template>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"obs.showConfirmationModal\"\n    (confirmEvent)=\"saveAndRefresh()\"\n    (optionalEvent)=\"saveAndStay()\"\n    (cancelEvent)=\"cancel()\"\n    [showOptionalButton]=\"true\"\n    cancelButtonType=\"ghost\"\n    optionalButtonType=\"secondary\"\n    confirmButtonTextTranslationKey=\"translationManagement.saveWithReload\"\n    optionalButtonTextTranslationKey=\"translationManagement.saveWithoutReload\"\n    titleTranslationKey=\"translationManagement.modalTitle\"\n    contentTranslationKey=\"translationManagement.modalContent\"\n    [spacerAfterCancelButton]=\"true\"\n  ></valtimo-confirmation-modal>\n\n  <ng-container renderInPageHeader>\n    <ng-template>\n      <button\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"showModal()\"\n        [disabled]=\"!obs.allChangedValuesValid || obs.disabled || !obs.valuesChanged\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </ng-template>\n  </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\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.TranslateService }, { type: i2$2.LocalizationService }, { type: i2$1.PageHeaderService }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetFieldsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i2$1.TranslateService }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetWizardService {
+    constructor() {
+        this.$selectedWidget = signal(null);
+        this.$widgetWidth = signal(null);
+        this.$widgetStyle = signal(null);
+        this.$widgetContent = signal(null);
+        this.$widgetTitle = signal(null);
+        this.$widgetKey = signal(null);
+        this.$widgetActions = signal(undefined);
+        this.$widgetsConfig = computed(() => ({
+            key: this.$widgetKey() ?? '',
+            title: this.$widgetTitle() ?? '',
+            type: this.$selectedWidget()?.type ?? WidgetType.FIELDS,
+            width: this.$widgetWidth() ?? 4,
+            highContrast: (this.$widgetStyle() ?? WidgetStyle.DEFAULT) === WidgetStyle.HIGH_CONTRAST,
+            properties: this.$widgetContent() ?? {},
+            actions: this.$widgetActions() ?? [],
+        }));
+        this.$editMode = signal(false);
+        this.$usedWidgetKeys = signal([]);
+        this.$availableWidgetTypes = signal(null);
+    }
+    resetWizard() {
+        this.$selectedWidget.set(null);
+        this.$widgetWidth.set(null);
+        this.$widgetStyle.set(null);
+        this.$widgetContent.set(null);
+        this.$widgetTitle.set(null);
+        this.$widgetKey.set(null);
+        this.$widgetActions.set(undefined);
+        this.$editMode.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetWizardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class LayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: LayoutModule, declarations: [LayoutComponent, LayoutPublicComponent, LayoutInternalComponent], imports: [RouterModule,
+            MenuRoutingModule,
+            TopbarModule,
+            LeftSidebarModule,
+            RightSidebarModule,
+            PageHeaderModule,
+            AlertModule,
+            CommonModule,
+            PromptModule,
+            GlobalNotificationComponent], exports: [LayoutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutModule, imports: [RouterModule,
+            MenuRoutingModule,
+            TopbarModule,
+            LeftSidebarModule,
+            RightSidebarModule,
+            PageHeaderModule,
+            AlertModule,
+            CommonModule,
+            PromptModule,
+            GlobalNotificationComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LayoutComponent, LayoutPublicComponent, LayoutInternalComponent],
+                    imports: [
+                        RouterModule,
+                        MenuRoutingModule,
+                        TopbarModule,
+                        LeftSidebarModule,
+                        RightSidebarModule,
+                        PageHeaderModule,
+                        AlertModule,
+                        CommonModule,
+                        PromptModule,
+                        GlobalNotificationComponent,
+                    ],
+                    exports: [LayoutComponent],
+                }]
+        }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -452,11 +3273,11 @@ const routes = [
     },
 ];
 class TranslationManagementRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementRoutingModule, imports: [i2$2.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],
@@ -480,8 +3301,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * limitations under the License.
  */
 class TranslationManagementModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementModule, declarations: [TranslationManagementComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementModule, declarations: [TranslationManagementComponent], imports: [CommonModule,
             TranslateModule,
             TranslationManagementRoutingModule,
             MultiInputFormModule,
@@ -491,7 +3312,7 @@ class TranslationManagementModule {
             ButtonModule,
             IconModule,
             ConfirmationModalModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementModule, imports: [CommonModule,
             TranslateModule,
             TranslationManagementRoutingModule,
             MultiInputFormModule,
@@ -501,7 +3322,7 @@ class TranslationManagementModule {
             IconModule,
             ConfirmationModalModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TranslationManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TranslationManagementModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TranslationManagementComponent],
@@ -521,6 +3342,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -544,5 +3397,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LayoutComponent, LayoutModule, LayoutService, TranslationManagementModule };
+export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, TranslationManagementComponent, TranslationManagementModule, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_STYLE_LABELS, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WidgetBlockComponent, WidgetCollectionComponent, WidgetContainerComponent, WidgetCustomComponent, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetStyle, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
 //# sourceMappingURL=valtimo-layout.mjs.map