@valtimo/layout 13.31.0 → 13.32.0

package/fesm2022/valtimo-layout.mjs

@@ -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
@@ -4613,12 +4620,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 +4651,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)
@@ -6110,12 +6119,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 +6141,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 +6169,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 +6204,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 +6219,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']