@valtimo/layout 13.31.0 → 13.33.0

package/fesm2022/valtimo-layout.mjs

@@ -11,7 +11,7 @@ import { CommonModule, DOCUMENT, DatePipe } from '@angular/common';
 import * as i2$2 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
 import * as i1$1 from '@valtimo/components';
-import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, FormIoModule, CARBON_THEME, CurrentCarbonTheme, InputLabelModule, InputModule as InputModule$1, FormModule, SelectModule, ParagraphModule, DateTimePickerComponent, OverflowMenuComponent, OverflowMenuOptionComponent, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, ConfirmationModalModule, JsonEditorComponent, RemoveClassnamesDirective, ValuePathSelectorComponent, MdiIconSelectorComponent, ValuePathType, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, RenderInPageHeaderDirective } from '@valtimo/components';
+import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, WIDGET_ROW_HEIGHT_DEFAULT, FormIoModule, CARBON_THEME, CurrentCarbonTheme, InputLabelModule, InputModule as InputModule$1, FormModule, SelectModule, ParagraphModule, DateTimePickerComponent, OverflowMenuComponent, OverflowMenuOptionComponent, resolveWidgetLayout, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, ConfirmationModalModule, JsonEditorComponent, RemoveClassnamesDirective, ValuePathSelectorComponent, MdiIconSelectorComponent, ValuePathType, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, RenderInPageHeaderDirective } from '@valtimo/components';
 import * as i3 from 'carbon-components-angular';
 import { ButtonModule, InputModule, LayerModule, SkeletonModule, PaginationModel, PaginationModule, TilesModule, IconModule, TimePickerModule, MenuButtonModule, ContextMenuModule, LoadingModule, ModalModule, TooltipModule, ComboBoxModule, CheckboxModule, DropdownModule, StructuredListModule, ToggleModule, AccordionModule, ProgressIndicatorModule, TabsModule, ToggletipModule, TagModule, Tab, SelectModule as SelectModule$1, RadioModule, PlaceholderModule } from 'carbon-components-angular';
 import { Subscription, BehaviorSubject, combineLatest, map, tap, switchMap, take, filter as filter$1, Subject, debounceTime, of, startWith, merge, delay } from 'rxjs';
@@ -121,7 +121,7 @@ var WidgetColor;
 })(WidgetColor || (WidgetColor = {}));
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -524,8 +524,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * limitations under the License.
  */
 class WidgetActionButtonComponent {
-    constructor(globalNotificationService) {
+    constructor(globalNotificationService, router) {
         this.globalNotificationService = globalNotificationService;
+        this.router = router;
     }
     onNavigateButtonClick(buttonAction) {
         const navigateTo = this.getNavigateToUrl(buttonAction);
@@ -540,6 +541,12 @@ class WidgetActionButtonComponent {
         if (buttonAction?.openInNewTab) {
             window.open(navigateTo, '_blank', 'noopener,noreferrer');
         }
+        else if (navigateTo.startsWith(window.location.origin)) {
+            this.router.navigateByUrl(navigateTo.substring(window.location.origin.length));
+        }
+        else if (navigateTo.startsWith('/')) {
+            this.router.navigateByUrl(navigateTo);
+        }
         else {
             window.open(navigateTo, '_self');
         }
@@ -556,13 +563,13 @@ class WidgetActionButtonComponent {
         const value = resolved[property];
         return value != null ? String(value) : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetActionButtonComponent, deps: [{ token: i2.GlobalNotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetActionButtonComponent, deps: [{ token: i2.GlobalNotificationService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetActionButtonComponent, isStandalone: true, selector: "valtimo-widget-action-button", inputs: { widgetConfiguration: "widgetConfiguration", resolvedData: "resolvedData" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n@if (widgetConfiguration.actions?.[0] && getNavigateToUrl(widgetConfiguration.actions[0])) {\n  <button\n    class=\"action-button\"\n    cdsButton=\"ghost\"\n    (click)=\"onNavigateButtonClick(widgetConfiguration.actions[0])\"\n  >\n    {{ widgetConfiguration.actions[0].name }}\n  </button>\n}\n", styles: [":host:empty{display:none}.action-button{--cds-layout-size-height-local: 0;--cds-layout-density-padding-inline-local: 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: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetActionButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-widget-action-button', standalone: true, imports: [CommonModule, ButtonModule], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n@if (widgetConfiguration.actions?.[0] && getNavigateToUrl(widgetConfiguration.actions[0])) {\n  <button\n    class=\"action-button\"\n    cdsButton=\"ghost\"\n    (click)=\"onNavigateButtonClick(widgetConfiguration.actions[0])\"\n  >\n    {{ widgetConfiguration.actions[0].name }}\n  </button>\n}\n", styles: [":host:empty{display:none}.action-button{--cds-layout-size-height-local: 0;--cds-layout-density-padding-inline-local: 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: i2.GlobalNotificationService }], propDecorators: { widgetConfiguration: [{
+        }], ctorParameters: () => [{ type: i2.GlobalNotificationService }, { type: i2$1.Router }], propDecorators: { widgetConfiguration: [{
                 type: Input
             }], resolvedData: [{
                 type: Input
@@ -915,7 +922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  */
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -939,6 +946,9 @@ class WidgetLayoutService {
     get amountOfColumns$() {
         return this._containerWidth$.pipe(map(containerWidth => Math.floor(containerWidth / WIDGET_WIDTH_1X)));
     }
+    get rowHeightUnit$() {
+        return this._rowHeightUnit$.asObservable();
+    }
     get _widgets$() {
         return this._widgetsSubject$.pipe(filter$1(widgets => widgets !== null));
     }
@@ -961,6 +971,8 @@ class WidgetLayoutService {
         this._widgetDataLoadedSubject$ = new BehaviorSubject(null);
         this._muuriSubject$ = new BehaviorSubject(null);
         this._triggerMuuriLayout$ = new Subject();
+        /** Row-unit height (px) each widget snaps to; depends on the layout algorithm. */
+        this._rowHeightUnit$ = new BehaviorSubject(WIDGET_ROW_HEIGHT_DEFAULT);
         this._widgetsWithExternalData$ = new BehaviorSubject([]);
         this._widgetsWithExternalDataReady$ = new BehaviorSubject([]);
         this._subscriptions = new Subscription();
@@ -991,6 +1003,9 @@ class WidgetLayoutService {
     setContainerWidth(width) {
         this._containerWidthSubject$.next(width);
     }
+    setRowHeightUnit(rowHeightUnit) {
+        this._rowHeightUnit$.next(rowHeightUnit);
+    }
     setWidgetDataLoaded(uuid) {
         this._widgetDataLoadedSubject$.pipe(take(1)).subscribe(widgetDataLoaded => {
             if (!(widgetDataLoaded || []).includes(uuid)) {
@@ -1008,7 +1023,7 @@ class WidgetLayoutService {
     }
     openMuuriSubscription() {
         this._subscriptions.add(combineLatest([this._muuri$, this._triggerMuuriLayout$])
-            .pipe(debounceTime(150))
+            .pipe(debounceTime(400))
             .subscribe(([muuri]) => {
             muuri.refreshItems();
             muuri.layout();
@@ -2216,8 +2231,9 @@ class WidgetBlockComponent {
             this._contentHeight$,
             this._viewContainerRef$,
             this.widget$,
-        ]).pipe(filter$1(([contentHeight]) => contentHeight !== 0), tap(([contentHeight, viewRef, widget]) => {
-            const blockHeight = Math.ceil((contentHeight + 16) / WIDGET_HEIGHT_1X) * WIDGET_HEIGHT_1X;
+            this.widgetLayoutService.rowHeightUnit$,
+        ]).pipe(filter$1(([contentHeight]) => contentHeight !== 0), tap(([contentHeight, viewRef, , rowHeightUnit]) => {
+            const blockHeight = Math.ceil((contentHeight + 16) / rowHeightUnit) * rowHeightUnit;
             this.renderer.setStyle(viewRef.element.nativeElement, 'height', `${blockHeight}px`);
             this.widgetLayoutService.triggerMuuriLayout();
         }));
@@ -2351,6 +2367,10 @@ class WidgetContainerComponent {
         this.loadingWidgetConfiguration$.next(false);
         this.initLayout();
     }
+    set widgetLayout(value) {
+        this._resolvedLayout = resolveWidgetLayout(value);
+        this.widgetLayoutService.setRowHeightUnit(this._resolvedLayout.rowHeightUnit);
+    }
     get widgetComponentMap$() {
         return this._widgetComponentMap$.pipe(filter(componentMap => componentMap !== null));
     }
@@ -2360,6 +2380,7 @@ class WidgetContainerComponent {
     constructor(widgetLayoutService) {
         this.widgetLayoutService = widgetLayoutService;
         this.widgetsWithUuids$ = new BehaviorSubject(null);
+        this._resolvedLayout = resolveWidgetLayout(null);
         this._widgetComponentMap$ = new BehaviorSubject(DEFAULT_WIDGET_COMPONENT_MAP);
         this.widgetParams = {};
         this.loadingWidgetConfiguration$ = new BehaviorSubject(true);
@@ -2401,15 +2422,13 @@ class WidgetContainerComponent {
     initMuuri() {
         this.widgetLayoutService.loaded$.pipe(take(1), delay(300)).subscribe(() => {
             this.widgetLayoutService.setMuuri(new Muuri(this._widgetsContainerRef.nativeElement, {
-                layout: {
-                    fillGaps: true,
-                },
+                layout: this._resolvedLayout.muuriLayout,
                 layoutOnResize: false,
             }));
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetContainerComponent, deps: [{ token: WidgetLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetContainerComponent, isStandalone: true, selector: "valtimo-widget-container", inputs: { widgets: "widgets", widgetComponentMap: "widgetComponentMap", widgetParams: "widgetParams" }, providers: [WidgetLayoutService], 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]=\"'widgets.noWidgets' | translate\"\n        [description]=\"'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$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetContainerComponent, isStandalone: true, selector: "valtimo-widget-container", inputs: { widgets: "widgets", widgetLayout: "widgetLayout", widgetComponentMap: "widgetComponentMap", widgetParams: "widgetParams" }, providers: [WidgetLayoutService], 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]=\"'widgets.noWidgets' | translate\"\n        [description]=\"'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$1.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.20", ngImport: i0, type: WidgetContainerComponent, decorators: [{
             type: Component,
@@ -2419,6 +2438,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 args: ['widgetsContainer']
             }], widgets: [{
                 type: Input
+            }], widgetLayout: [{
+                type: Input
             }], widgetComponentMap: [{
                 type: Input
             }], widgetParams: [{
@@ -4613,12 +4634,14 @@ class WidgetMetrolineComponent {
         this.class = 'valtimo-widget-metroline';
         this.widgetConfiguration$ = new BehaviorSubject(null);
         this.widgetData$ = new BehaviorSubject(null);
-        this.orientation$ = this.widgetConfiguration$.pipe(map(config => config?.properties?.orientation === MetrolineOrientation.VERTICAL ? 'vertical' : 'horizontal'));
+        this.orientation$ = this.widgetConfiguration$.pipe(map(config => config?.properties?.orientation === MetrolineOrientation.VERTICAL
+            ? 'vertical'
+            : 'horizontal'));
         this.displayState$ = combineLatest([
             this.widgetData$,
             this.widgetConfiguration$,
         ]).pipe(map(([items, config]) => {
-            const mode = config?.properties?.mode ?? MetrolineMode.INTERNAL_CASE_STATUS;
+            const mode = config?.properties?.mode ?? null;
             return {
                 steps: this.toSteps(items, mode),
                 currentStepIndex: this.toCurrentStepIndex(items, mode),
@@ -4642,30 +4665,30 @@ class WidgetMetrolineComponent {
     toSteps(items, mode) {
         if (!items?.length)
             return [];
-        if (mode === MetrolineMode.ZAAKSTATUS) {
-            return items.map(item => ({
+        if (mode === MetrolineMode.INTERNAL_CASE_STATUS) {
+            const lastIndex = items.length - 1;
+            return items.map((item, index) => ({
                 label: item.title,
                 secondaryLabel: this.formatCompleted(item.completed),
-                complete: item.completed != null,
+                complete: index < lastIndex,
                 itemLabel: item.label,
             }));
         }
-        const lastIndex = items.length - 1;
-        return items.map((item, index) => ({
+        return items.map(item => ({
             label: item.title,
             secondaryLabel: this.formatCompleted(item.completed),
-            complete: index < lastIndex,
+            complete: item.completed != null,
             itemLabel: item.label,
         }));
     }
     toCurrentStepIndex(items, mode) {
         if (!items?.length)
             return 0;
-        if (mode === MetrolineMode.ZAAKSTATUS) {
-            const firstNotCompleted = items.findIndex(item => item.completed == null);
-            return firstNotCompleted === -1 ? items.length : firstNotCompleted;
+        if (mode === MetrolineMode.INTERNAL_CASE_STATUS) {
+            return items.length - 1;
         }
-        return items.length - 1;
+        const firstNotCompleted = items.findIndex(item => item.completed == null);
+        return firstNotCompleted === -1 ? items.length : firstNotCompleted;
     }
     formatCompleted(completed) {
         if (!completed)
@@ -4730,7 +4753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  */
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4745,7 +4768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * limitations under the License.
  */
 const WIDGET_WIDTH_1X = 320;
-const WIDGET_HEIGHT_1X = 200;
+const WIDGET_HEIGHT_1X = 92;
 const DEFAULT_WIDGET_COMPONENT_MAP = {
     [WidgetType.FORMIO]: WidgetFormioComponent,
     [WidgetType.CUSTOM]: WidgetCustomComponent,
@@ -6110,12 +6133,20 @@ class WidgetManagementMetrolineComponent {
         this.class = 'valtimo-widget-management-metroline';
         this.testIds = WIDGET_CONTENT_METROLINE_TEST_IDS;
         this.orientationOptions = MetrolineOrientation;
+        this.MetrolineMode = MetrolineMode;
+        this.$widgetContext = this.widgetWizardService.$widgetContext;
         this._initialContent = this.widgetWizardService.$widgetContent();
+        this._initialCaseContent = this._initialContent;
+        this._initialIkoContent = this._initialContent;
         this.form = this.fb.group({
             widgetTitle: this.fb.control(this.widgetWizardService.$widgetTitle(), Validators.required),
             widgetIcon: this.fb.control(this.widgetWizardService.$widgetIcon()),
             orientation: this.fb.control(this._initialContent?.orientation ?? MetrolineOrientation.HORIZONTAL, Validators.required),
-            mode: this.fb.control(this._initialContent?.mode ?? null, Validators.required),
+            mode: this.fb.control(this._initialCaseContent?.mode ?? null, Validators.required),
+            source: this.fb.control(this._initialIkoContent?.source ?? ''),
+            titlePath: this.fb.control(this._initialIkoContent?.titlePath ?? ''),
+            labelPath: this.fb.control(this._initialIkoContent?.labelPath ?? null),
+            completedPath: this.fb.control(this._initialIkoContent?.completedPath ?? ''),
         });
         this.modeItems$ = combineLatest([
             this.metrolineWidgetApiService.getAvailableModes(),
@@ -6124,6 +6155,17 @@ class WidgetManagementMetrolineComponent {
         this._subscriptions = new Subscription();
     }
     ngOnInit() {
+        if (this.$widgetContext() === 'iko') {
+            // Mode is irrelevant for IKO widgets: the data shape (per-item completedPath) drives rendering.
+            this.form.controls.mode.clearValidators();
+            this.form.controls.mode.updateValueAndValidity({ emitEvent: false });
+            this.form.controls.source.addValidators(Validators.required);
+            this.form.controls.titlePath.addValidators(Validators.required);
+            this.form.controls.completedPath.addValidators(Validators.required);
+            this.form.controls.source.updateValueAndValidity({ emitEvent: false });
+            this.form.controls.titlePath.updateValueAndValidity({ emitEvent: false });
+            this.form.controls.completedPath.updateValueAndValidity({ emitEvent: false });
+        }
         this.syncWizardServiceFromForm();
         this.widgetWizardService.$widgetContentValid.set(this.form.valid);
         this._subscriptions.add(this.form.valueChanges.pipe(debounceTime(100)).subscribe(() => {
@@ -6141,14 +6183,28 @@ class WidgetManagementMetrolineComponent {
             return;
         this.form.patchValue({ mode: event.item.id });
     }
+    onOrientationChange(value) {
+        this.form.controls.orientation.setValue(value);
+    }
     syncWizardServiceFromForm() {
         const value = this.form.getRawValue();
         this.widgetWizardService.$widgetTitle.set(value.widgetTitle ?? '');
         this.widgetWizardService.$widgetIcon.set(value.widgetIcon ?? '');
-        this.widgetWizardService.$widgetContent.set({
-            orientation: value.orientation ?? MetrolineOrientation.HORIZONTAL,
-            mode: value.mode,
-        });
+        if (this.$widgetContext() === 'iko') {
+            this.widgetWizardService.$widgetContent.set({
+                orientation: value.orientation ?? MetrolineOrientation.HORIZONTAL,
+                source: value.source ?? '',
+                titlePath: value.titlePath ?? '',
+                labelPath: value.labelPath || null,
+                completedPath: value.completedPath ?? '',
+            });
+        }
+        else {
+            this.widgetWizardService.$widgetContent.set({
+                orientation: value.orientation ?? MetrolineOrientation.HORIZONTAL,
+                mode: value.mode,
+            });
+        }
     }
     buildModeItems(availableModes) {
         const current = this.form.get('mode')?.value;
@@ -6162,13 +6218,14 @@ class WidgetManagementMetrolineComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementMetrolineComponent, deps: [{ token: i1$3.FormBuilder }, { token: MetrolineWidgetApiService }, { token: i2$2.TranslateService }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetManagementMetrolineComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-metroline__title-form\"\n>\n  <cds-text-label class=\"valtimo-widget-management-metroline__title-input\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [attr.data-test-id]=\"testIds.widgetTitleInput\"\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\n\n<section\n  class=\"valtimo-widget-management-metroline__settings\"\n  [formGroup]=\"form\"\n>\n  <cds-radio-group\n    class=\"valtimo-widget-management-metroline__radio-group\"\n    orientation=\"horizontal\"\n    formControlName=\"orientation\"\n    [attr.data-test-id]=\"testIds.displayTypeRadio\"\n    [legend]=\"'widgetTabManagement.content.metroline.displayType.label' | translate\"\n  >\n    <cds-radio [value]=\"orientationOptions.HORIZONTAL\">\n      {{ 'widgetTabManagement.content.metroline.displayType.horizontal' | translate }}\n    </cds-radio>\n    <cds-radio [value]=\"orientationOptions.VERTICAL\">\n      {{ 'widgetTabManagement.content.metroline.displayType.vertical' | translate }}\n    </cds-radio>\n  </cds-radio-group>\n\n  <cds-dropdown\n    class=\"valtimo-widget-management-metroline__dropdown\"\n    [appendInline]=\"false\"\n    [dropUp]=\"false\"\n    [attr.data-test-id]=\"testIds.statusSourceDropdown\"\n    [label]=\"'widgetTabManagement.content.metroline.statusSource.label' | translate\"\n    [placeholder]=\"'widgetTabManagement.content.metroline.statusSource.placeholder' | translate\"\n    (selected)=\"onModeSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"modeItems$ | async\"></cds-dropdown-list>\n  </cds-dropdown>\n</section>\n", styles: [".valtimo-widget-management-metroline{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-metroline__title-form{background:var(--cds-layer-02);display:flex;gap:16px}.valtimo-widget-management-metroline__title-input{max-width:300px}.valtimo-widget-management-metroline__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-metroline__settings{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-metroline__settings>*{flex:0 0 auto}.valtimo-widget-management-metroline__radio-group{padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-metroline__dropdown{width:300px}.valtimo-widget-management-metroline__dropdown .cds--list-box{background:var(--cds-layer-01)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { 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: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: RadioModule }, { kind: "component", type: i3.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i3.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementMetrolineComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-metroline__title-form\"\n>\n  <cds-text-label class=\"valtimo-widget-management-metroline__title-input\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [attr.data-test-id]=\"testIds.widgetTitleInput\"\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\n\n<section class=\"valtimo-widget-management-metroline__settings\">\n  <cds-radio-group\n    class=\"valtimo-widget-management-metroline__radio-group\"\n    orientation=\"horizontal\"\n    [attr.data-test-id]=\"testIds.displayTypeRadio\"\n    [legend]=\"'widgetTabManagement.content.metroline.displayType.label' | translate\"\n    [ngModel]=\"form.controls.orientation.value\"\n    (ngModelChange)=\"onOrientationChange($event)\"\n    [ngModelOptions]=\"{standalone: true}\"\n  >\n    <cds-radio [value]=\"orientationOptions.HORIZONTAL\">\n      {{ 'widgetTabManagement.content.metroline.displayType.horizontal' | translate }}\n    </cds-radio>\n    <cds-radio [value]=\"orientationOptions.VERTICAL\">\n      {{ 'widgetTabManagement.content.metroline.displayType.vertical' | translate }}\n    </cds-radio>\n  </cds-radio-group>\n\n  @if ($widgetContext() !== 'iko') {\n    <cds-dropdown\n      class=\"valtimo-widget-management-metroline__dropdown\"\n      [appendInline]=\"false\"\n      [dropUp]=\"false\"\n      [attr.data-test-id]=\"testIds.statusSourceDropdown\"\n      [label]=\"'widgetTabManagement.content.metroline.statusSource.label' | translate\"\n      [placeholder]=\"'widgetTabManagement.content.metroline.statusSource.placeholder' | translate\"\n      (selected)=\"onModeSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"modeItems$ | async\"></cds-dropdown-list>\n    </cds-dropdown>\n  }\n</section>\n\n@if ($widgetContext() === 'iko') {\n  <section\n    class=\"valtimo-widget-management-metroline__iko-block\"\n    [formGroup]=\"form\"\n  >\n    <cds-text-label class=\"valtimo-widget-management-metroline__path-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.metroline.iko.source.label' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.metroline.iko.source.tooltip' | translate\"\n      >\n      </v-input-label>\n      <input\n        formControlName=\"source\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.metroline.iko.source.placeholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label class=\"valtimo-widget-management-metroline__path-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.metroline.iko.titlePath.label' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.metroline.iko.titlePath.tooltip' | translate\"\n      >\n      </v-input-label>\n      <input\n        formControlName=\"titlePath\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.metroline.iko.titlePath.placeholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label class=\"valtimo-widget-management-metroline__path-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.metroline.iko.labelPath.label' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.metroline.iko.labelPath.tooltip' | translate\"\n      >\n      </v-input-label>\n      <input\n        formControlName=\"labelPath\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.metroline.iko.labelPath.placeholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label class=\"valtimo-widget-management-metroline__path-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.metroline.iko.completedPath.label' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.metroline.iko.completedPath.tooltip' | translate\"\n      >\n      </v-input-label>\n      <input\n        formControlName=\"completedPath\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.metroline.iko.completedPath.placeholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n  </section>\n}\n", styles: [".valtimo-widget-management-metroline{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-metroline__title-form{background:var(--cds-layer-02);display:flex;gap:16px}.valtimo-widget-management-metroline__title-input{max-width:300px}.valtimo-widget-management-metroline__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-metroline__settings{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-metroline__settings>*{flex:0 0 auto}.valtimo-widget-management-metroline__radio-group{padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-metroline__dropdown{width:300px}.valtimo-widget-management-metroline__dropdown .cds--list-box{background:var(--cds-layer-01)}.valtimo-widget-management-metroline__iko-block{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-metroline__path-input{max-width:480px}.valtimo-widget-management-metroline__path-input input{background:var(--cds-layer-01)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { 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: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: RadioModule }, { kind: "component", type: i3.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i3.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementMetrolineComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         CommonModule,
                         DropdownModule,
+                        FormsModule,
                         InputLabelModule,
                         InputModule,
                         LayerModule,
@@ -6176,7 +6233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         RadioModule,
                         ReactiveFormsModule,
                         TranslateModule,
-                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-metroline__title-form\"\n>\n  <cds-text-label class=\"valtimo-widget-management-metroline__title-input\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [attr.data-test-id]=\"testIds.widgetTitleInput\"\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\n\n<section\n  class=\"valtimo-widget-management-metroline__settings\"\n  [formGroup]=\"form\"\n>\n  <cds-radio-group\n    class=\"valtimo-widget-management-metroline__radio-group\"\n    orientation=\"horizontal\"\n    formControlName=\"orientation\"\n    [attr.data-test-id]=\"testIds.displayTypeRadio\"\n    [legend]=\"'widgetTabManagement.content.metroline.displayType.label' | translate\"\n  >\n    <cds-radio [value]=\"orientationOptions.HORIZONTAL\">\n      {{ 'widgetTabManagement.content.metroline.displayType.horizontal' | translate }}\n    </cds-radio>\n    <cds-radio [value]=\"orientationOptions.VERTICAL\">\n      {{ 'widgetTabManagement.content.metroline.displayType.vertical' | translate }}\n    </cds-radio>\n  </cds-radio-group>\n\n  <cds-dropdown\n    class=\"valtimo-widget-management-metroline__dropdown\"\n    [appendInline]=\"false\"\n    [dropUp]=\"false\"\n    [attr.data-test-id]=\"testIds.statusSourceDropdown\"\n    [label]=\"'widgetTabManagement.content.metroline.statusSource.label' | translate\"\n    [placeholder]=\"'widgetTabManagement.content.metroline.statusSource.placeholder' | translate\"\n    (selected)=\"onModeSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"modeItems$ | async\"></cds-dropdown-list>\n  </cds-dropdown>\n</section>\n", styles: [".valtimo-widget-management-metroline{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-metroline__title-form{background:var(--cds-layer-02);display:flex;gap:16px}.valtimo-widget-management-metroline__title-input{max-width:300px}.valtimo-widget-management-metroline__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-metroline__settings{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-metroline__settings>*{flex:0 0 auto}.valtimo-widget-management-metroline__radio-group{padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-metroline__dropdown{width:300px}.valtimo-widget-management-metroline__dropdown .cds--list-box{background:var(--cds-layer-01)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-metroline__title-form\"\n>\n  <cds-text-label class=\"valtimo-widget-management-metroline__title-input\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [attr.data-test-id]=\"testIds.widgetTitleInput\"\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\n\n<section class=\"valtimo-widget-management-metroline__settings\">\n  <cds-radio-group\n    class=\"valtimo-widget-management-metroline__radio-group\"\n    orientation=\"horizontal\"\n    [attr.data-test-id]=\"testIds.displayTypeRadio\"\n    [legend]=\"'widgetTabManagement.content.metroline.displayType.label' | translate\"\n    [ngModel]=\"form.controls.orientation.value\"\n    (ngModelChange)=\"onOrientationChange($event)\"\n    [ngModelOptions]=\"{standalone: true}\"\n  >\n    <cds-radio [value]=\"orientationOptions.HORIZONTAL\">\n      {{ 'widgetTabManagement.content.metroline.displayType.horizontal' | translate }}\n    </cds-radio>\n    <cds-radio [value]=\"orientationOptions.VERTICAL\">\n      {{ 'widgetTabManagement.content.metroline.displayType.vertical' | translate }}\n    </cds-radio>\n  </cds-radio-group>\n\n  @if ($widgetContext() !== 'iko') {\n    <cds-dropdown\n      class=\"valtimo-widget-management-metroline__dropdown\"\n      [appendInline]=\"false\"\n      [dropUp]=\"false\"\n      [attr.data-test-id]=\"testIds.statusSourceDropdown\"\n      [label]=\"'widgetTabManagement.content.metroline.statusSource.label' | translate\"\n      [placeholder]=\"'widgetTabManagement.content.metroline.statusSource.placeholder' | translate\"\n      (selected)=\"onModeSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"modeItems$ | async\"></cds-dropdown-list>\n    </cds-dropdown>\n  }\n</section>\n\n@if ($widgetContext() === 'iko') {\n  <section\n    class=\"valtimo-widget-management-metroline__iko-block\"\n    [formGroup]=\"form\"\n  >\n    <cds-text-label class=\"valtimo-widget-management-metroline__path-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.metroline.iko.source.label' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.metroline.iko.source.tooltip' | translate\"\n      >\n      </v-input-label>\n      <input\n        formControlName=\"source\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.metroline.iko.source.placeholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label class=\"valtimo-widget-management-metroline__path-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.metroline.iko.titlePath.label' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.metroline.iko.titlePath.tooltip' | translate\"\n      >\n      </v-input-label>\n      <input\n        formControlName=\"titlePath\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.metroline.iko.titlePath.placeholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label class=\"valtimo-widget-management-metroline__path-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.metroline.iko.labelPath.label' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.metroline.iko.labelPath.tooltip' | translate\"\n      >\n      </v-input-label>\n      <input\n        formControlName=\"labelPath\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.metroline.iko.labelPath.placeholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label class=\"valtimo-widget-management-metroline__path-input\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.metroline.iko.completedPath.label' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.metroline.iko.completedPath.tooltip' | translate\"\n      >\n      </v-input-label>\n      <input\n        formControlName=\"completedPath\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.metroline.iko.completedPath.placeholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n  </section>\n}\n", styles: [".valtimo-widget-management-metroline{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-metroline__title-form{background:var(--cds-layer-02);display:flex;gap:16px}.valtimo-widget-management-metroline__title-input{max-width:300px}.valtimo-widget-management-metroline__title-input input{background:var(--cds-layer-01)}.valtimo-widget-management-metroline__settings{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-metroline__settings>*{flex:0 0 auto}.valtimo-widget-management-metroline__radio-group{padding:8px;background:var(--cds-layer-01)}.valtimo-widget-management-metroline__dropdown{width:300px}.valtimo-widget-management-metroline__dropdown .cds--list-box{background:var(--cds-layer-01)}.valtimo-widget-management-metroline__iko-block{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-metroline__path-input{max-width:480px}.valtimo-widget-management-metroline__path-input input{background:var(--cds-layer-01)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: MetrolineWidgetApiService }, { type: i2$2.TranslateService }, { type: WidgetWizardService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']