@valtimo/form-flow-management 13.42.0 → 13.44.0

package/fesm2022/valtimo-form-flow-management.mjs

@@ -1,21 +1,89 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Inject, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ViewChild, signal, ViewChildren, NgModule } from '@angular/core';
 import * as i2 from '@valtimo/shared';
 import { BaseApiService, getCaseManagementRouteParams, getContextObservable, getBuildingBlockManagementRouteParams } from '@valtimo/shared';
 import * as i1 from '@angular/common/http';
+import { filter, BehaviorSubject, combineLatest, tap, switchMap, of, map, Subscription, take, catchError, shareReplay, finalize } from 'rxjs';
 import * as i1$2 from '@valtimo/components';
-import { CARBON_CONSTANTS, ValtimoCdsModalDirective, ViewType, CarbonListComponent, ConfirmationModalModule, EditorModule, RenderInPageHeaderDirective, OverflowMenuComponent, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, CarbonListModule } from '@valtimo/components';
-import { BehaviorSubject, combineLatest, tap, switchMap, of, map, shareReplay, take, finalize } from 'rxjs';
-import * as i3$1 from '@angular/router';
+import { CARBON_CONSTANTS, ValtimoCdsModalDirective, ViewType, CarbonListComponent, EditorModule, OverflowMenuComponent, OverflowMenuOptionComponent, TooltipIconModule, FitPageDirective, PendingChangesComponent, ConfirmationModalModule, RenderInPageHeaderDirective, OverflowMenuTriggerComponent, CarbonListModule } from '@valtimo/components';
+import * as i3 from '@angular/router';
 import * as i4 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from 'carbon-components-angular';
-import { ModalModule, InputModule, ButtonModule, IconModule, LoadingModule, NotificationModule, DropdownModule } from 'carbon-components-angular';
+import * as i2$1 from 'carbon-components-angular';
+import { ModalModule, InputModule, ButtonModule, IconModule, DropdownModule, LayerModule, NotificationModule, TagModule, LoadingModule, Tab, TabsModule } from 'carbon-components-angular';
 import * as i1$1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { ArrowLeft16 } from '@carbon/icons';
+import { Add16, TrashCan16, ArrowDown16, ArrowUp16, Flag16, WarningFilled16, ArrowLeft16 } from '@carbon/icons';
+import * as i4$1 from '@valtimo/form-management';
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const FORM_FLOW_EDITOR_TEST_IDS = {
+    saveButton: 'formFlowEditorSaveButton',
+    backButton: 'formFlowEditorBackButton',
+    stepList: 'formFlowEditorStepList',
+    stepListItem: 'formFlowEditorStepListItem',
+    addStepButton: 'formFlowEditorAddStepButton',
+    deleteStepButton: 'formFlowEditorDeleteStepButton',
+    makeStartStepButton: 'formFlowEditorMakeStartStepButton',
+    stepKeyInput: 'formFlowEditorStepKeyInput',
+    stepTitleInput: 'formFlowEditorStepTitleInput',
+    stepTypeDropdown: 'formFlowEditorStepTypeDropdown',
+    stepPropertyInput: 'formFlowEditorStepPropertyInput',
+    stepPropertyDropdown: 'formFlowEditorStepPropertyDropdown',
+    addTransitionButton: 'formFlowEditorAddTransitionButton',
+    transitionRow: 'formFlowEditorTransitionRow',
+    addExpressionButton: 'formFlowEditorAddExpressionButton',
+    expressionInput: 'formFlowEditorExpressionInput',
+};
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const FORM_FLOW_COMPONENT_TOKEN = new InjectionToken('Supported form-flow Angular components', { factory: () => [] });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -33,6 +101,43 @@ import { ArrowLeft16 } from '@carbon/icons';
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var FormFlowEditorTab;
+(function (FormFlowEditorTab) {
+    FormFlowEditorTab["EDITOR"] = "editor";
+    FormFlowEditorTab["JSON_EDITOR"] = "jsonEditor";
+})(FormFlowEditorTab || (FormFlowEditorTab = {}));
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -58,6 +163,12 @@ class FormFlowService extends BaseApiService {
     getFormFlowDefinitionSchema() {
         return this.httpClient.get(this.getApiUrl('management/v1/form-flow-definition/schema'));
     }
+    // The registry describes what can be used in a form flow definition (step types, expression
+    // beans and additional properties). The backend builds it once at startup, so this is a cheap
+    // call that is made fresh every time — no client-side caching.
+    getFormFlowRegistry() {
+        return this.httpClient.get(this.getApiUrl('management/v1/form-flow/registry'));
+    }
     getFormFlowDefinitions(caseDefinitionKey, caseVersionTag) {
         return this.httpClient.get(this.getApiUrl(`management/v1/case-definition/${caseDefinitionKey}/version/${caseVersionTag}/form-flow-definition`));
     }
@@ -98,6 +209,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormFlowComponentService {
+    get supportedComponents$() {
+        return this._supportedComponents$.pipe(filter(components => !!components));
+    }
+    constructor(supportedCustomComponents) {
+        this.supportedCustomComponents = supportedCustomComponents;
+        this._supportedComponents$ = new BehaviorSubject(null);
+        this.setSupportedComponents(supportedCustomComponents);
+    }
+    setSupportedComponents(supportedComponents) {
+        this._supportedComponents$.next(supportedComponents);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowComponentService, deps: [{ token: FORM_FLOW_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowComponentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowComponentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: Array, decorators: [{
+                    type: Inject,
+                    args: [FORM_FLOW_COMPONENT_TOKEN]
+                }] }] });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -152,7 +303,16 @@ class NewFormFlowModalComponent {
         this.closeEvent.emit({
             key: this.key.value ?? '',
             startStep: 'start-step',
-            steps: [],
+            // Every form flow needs a start step, so create one up front: without it the editor opens on a
+            // "start step does not exist" error for a flow the user has only just named. The form
+            // definition is intentionally left blank — the editor flags it as the field still to fill in.
+            steps: [
+                {
+                    key: 'start-step',
+                    type: { name: 'form', properties: { definition: '' } },
+                    nextSteps: [],
+                },
+            ],
         });
         this.resetForm();
     }
@@ -162,7 +322,7 @@ class NewFormFlowModalComponent {
         }, CARBON_CONSTANTS.modalAnimationMs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NewFormFlowModalComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: NewFormFlowModalComponent, isStandalone: true, selector: "valtimo-new-form-flow-modal", inputs: { open: "open" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  [open]=\"open\"\n  showFooter=\"true\"\n  [title]=\"'formFlow.add' | translate\"\n  valtimoCdsModal\n  (close)=\"onCancel()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCancel()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'formFlow.add' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"form\">\n      <cds-label [invalid]=\"key.dirty && key.invalid\">\n        {{ 'formFlow.key' | translate }}\n\n        <input\n          formControlName=\"key\"\n          cdsText\n          placeholder=\"{{ 'formFlow.key' | translate }}\"\n          [attr.modal-primary-focus]=\"true\"\n          [invalid]=\"key.dirty && key.invalid\"\n        />\n      </cds-label>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCancel()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button [disabled]=\"this.form.invalid\" (click)=\"onConfirm()\" cdsButton=\"primary\">\n      {{ 'interface.create' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: NewFormFlowModalComponent, isStandalone: true, selector: "valtimo-new-form-flow-modal", inputs: { open: "open" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  [open]=\"open\"\n  showFooter=\"true\"\n  [title]=\"'formFlow.add' | translate\"\n  valtimoCdsModal\n  (close)=\"onCancel()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCancel()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'formFlow.add' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"form\">\n      <cds-label [invalid]=\"key.dirty && key.invalid\">\n        {{ 'formFlow.key' | translate }}\n\n        <input\n          formControlName=\"key\"\n          cdsText\n          placeholder=\"{{ 'formFlow.key' | translate }}\"\n          [attr.modal-primary-focus]=\"true\"\n          [invalid]=\"key.dirty && key.invalid\"\n        />\n      </cds-label>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCancel()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button [disabled]=\"this.form.invalid\" (click)=\"onConfirm()\" cdsButton=\"primary\">\n      {{ 'interface.create' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$1.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$1.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$1.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$1.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NewFormFlowModalComponent, decorators: [{
             type: Component,
@@ -289,13 +449,13 @@ class FormFlowOverviewComponent {
             this._refresh$.next(null);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowOverviewComponent, deps: [{ token: FormFlowService }, { token: i2.GlobalNotificationService }, { token: i3$1.ActivatedRoute }, { token: i3$1.Router }, { token: i4.TranslateService }, { token: i2.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormFlowOverviewComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"ACTION_ITEMS\"\n  [header]=\"false\"\n  [items]=\"formFlowDefinitions$ | async\"\n  [fields]=\"FIELDS\"\n  [loading]=\"loading$ | async\"\n  (rowClicked)=\"editFormFlowDetails($event)\"\n>\n  <ng-container header> {{ 'formFlow.title' | translate }} </ng-container>\n\n  <div carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addFormFlowButton\"></ng-container>\n  </div>\n\n  <valtimo-no-results\n    [action]=\"addFormFlowButton\"\n    description=\"{{ 'formFlow.noResults.description' | translate }}\"\n    title=\"{{ 'formFlow.noResults.title' | translate }}\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-new-form-flow-modal\n  [open]=\"showAddModal$ | async\"\n  (closeEvent)=\"onAdd($event)\"\n></valtimo-new-form-flow-modal>\n\n<ng-template #addFormFlowButton>\n  <button *ngIf=\"hasEditPermissions$ | async\" cdsButton=\"primary\" (click)=\"openAddModal()\">\n    {{ 'formFlow.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"formFlow.deleteModalContent\"\n  [outputOnConfirm]=\"deleteDefinitionKey$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDelete($event)\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i1$2.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i1$2.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: NewFormFlowModalComponent, selector: "valtimo-new-form-flow-modal", inputs: ["open"], outputs: ["closeEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowOverviewComponent, deps: [{ token: FormFlowService }, { token: i2.GlobalNotificationService }, { token: i3.ActivatedRoute }, { token: i3.Router }, { token: i4.TranslateService }, { token: i2.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormFlowOverviewComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"ACTION_ITEMS\"\n  [header]=\"false\"\n  [items]=\"formFlowDefinitions$ | async\"\n  [fields]=\"FIELDS\"\n  [loading]=\"loading$ | async\"\n  (rowClicked)=\"editFormFlowDetails($event)\"\n>\n  <ng-container header> {{ 'formFlow.title' | translate }} </ng-container>\n\n  <div carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addFormFlowButton\"></ng-container>\n  </div>\n\n  <valtimo-no-results\n    [action]=\"addFormFlowButton\"\n    description=\"{{ 'formFlow.noResults.description' | translate }}\"\n    title=\"{{ 'formFlow.noResults.title' | translate }}\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-new-form-flow-modal\n  [open]=\"showAddModal$ | async\"\n  (closeEvent)=\"onAdd($event)\"\n></valtimo-new-form-flow-modal>\n\n<ng-template #addFormFlowButton>\n  <button *ngIf=\"hasEditPermissions$ | async\" cdsButton=\"primary\" (click)=\"openAddModal()\">\n    {{ 'formFlow.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"formFlow.deleteModalContent\"\n  [outputOnConfirm]=\"deleteDefinitionKey$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDelete($event)\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i1$2.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i1$2.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: NewFormFlowModalComponent, selector: "valtimo-new-form-flow-modal", inputs: ["open"], outputs: ["closeEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowOverviewComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"ACTION_ITEMS\"\n  [header]=\"false\"\n  [items]=\"formFlowDefinitions$ | async\"\n  [fields]=\"FIELDS\"\n  [loading]=\"loading$ | async\"\n  (rowClicked)=\"editFormFlowDetails($event)\"\n>\n  <ng-container header> {{ 'formFlow.title' | translate }} </ng-container>\n\n  <div carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addFormFlowButton\"></ng-container>\n  </div>\n\n  <valtimo-no-results\n    [action]=\"addFormFlowButton\"\n    description=\"{{ 'formFlow.noResults.description' | translate }}\"\n    title=\"{{ 'formFlow.noResults.title' | translate }}\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-new-form-flow-modal\n  [open]=\"showAddModal$ | async\"\n  (closeEvent)=\"onAdd($event)\"\n></valtimo-new-form-flow-modal>\n\n<ng-template #addFormFlowButton>\n  <button *ngIf=\"hasEditPermissions$ | async\" cdsButton=\"primary\" (click)=\"openAddModal()\">\n    {{ 'formFlow.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"formFlow.deleteModalContent\"\n  [outputOnConfirm]=\"deleteDefinitionKey$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDelete($event)\"\n></valtimo-confirmation-modal>\n" }]
-        }], ctorParameters: () => [{ type: FormFlowService }, { type: i2.GlobalNotificationService }, { type: i3$1.ActivatedRoute }, { type: i3$1.Router }, { type: i4.TranslateService }, { type: i2.EditPermissionsService }], propDecorators: { carbonList: [{
+        }], ctorParameters: () => [{ type: FormFlowService }, { type: i2.GlobalNotificationService }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i4.TranslateService }, { type: i2.EditPermissionsService }], propDecorators: { carbonList: [{
                 type: ViewChild,
                 args: [CarbonListComponent]
             }] } });
@@ -335,7 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", 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.
@@ -349,177 +509,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class FormFlowEditorComponent {
-    constructor(breadcrumbService, formFlowDownloadService, formFlowService, iconService, notificationService, pageHeaderService, pageTitleService, route, router, translateService) {
-        this.breadcrumbService = breadcrumbService;
-        this.formFlowDownloadService = formFlowDownloadService;
-        this.formFlowService = formFlowService;
-        this.iconService = iconService;
-        this.notificationService = notificationService;
-        this.pageHeaderService = pageHeaderService;
-        this.pageTitleService = pageTitleService;
-        this.route = route;
-        this.router = router;
-        this.translateService = translateService;
-        this.readOnly$ = new BehaviorSubject(false);
-        this.valid$ = new BehaviorSubject(false);
-        this.loading$ = new BehaviorSubject(true);
-        this.showDeleteModal$ = new BehaviorSubject(false);
-        this.CARBON_THEME = 'g10';
-        this._context$ = getContextObservable(this.route);
-        this._params$ = this._context$.pipe(switchMap(context => {
-            if (context === 'buildingBlock') {
-                return combineLatest([
-                    getBuildingBlockManagementRouteParams(this.route),
-                    this.route.params,
-                ]).pipe(map(([bbParams, params]) => ({
-                    caseDefinitionKey: bbParams?.buildingBlockDefinitionKey ?? '',
-                    caseDefinitionVersionTag: bbParams?.buildingBlockDefinitionVersionTag ?? '',
-                    formFlowDefinitionKey: params.formFlowDefinitionKey,
-                })));
-            }
-            return combineLatest([
-                getCaseManagementRouteParams(this.route),
-                this.route.params,
-            ]).pipe(map(([caseManagementParams, params]) => ({
-                ...(caseManagementParams ?? { caseDefinitionKey: '', caseDefinitionVersionTag: '' }),
-                ...params,
-            })));
-        }));
-        this.formFlowSchemaJson$ = this.formFlowService
-            .getFormFlowDefinitionSchema()
-            .pipe(shareReplay(1));
+class FormFlowJsonEditorTabComponent {
+    constructor() {
+        this.disabled = false;
+        this.schema = null;
+        this.validEvent = new EventEmitter();
+        this.valueChangeEvent = new EventEmitter();
         this.editorOptions = {
             quickSuggestions: { other: true, comments: false, strings: true },
         };
-        this._formFlowDefinition2$ = combineLatest([this._params$, this._context$]).pipe(tap(() => this.loading$.next(true)), switchMap(([params, context]) => {
-            this.initBreadcrumbs(params, context);
-            if (context === 'buildingBlock') {
-                return this.formFlowService.getBuildingBlockFormFlowDefinitionByKey(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey);
-            }
-            return this.formFlowService.getFormFlowDefinitionByKey(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey);
-        }), tap((formFlowDefinition) => {
-            this.pageTitleService.setCustomPageTitle(formFlowDefinition.key);
-            this.readOnly$.next(formFlowDefinition.readOnly === true);
-            this.loading$.next(false);
-        }));
-        this.model$ = this._formFlowDefinition2$.pipe(map((formFlowDefinition) => this.getEditorModel(formFlowDefinition)));
-        this._updatedModelValue$ = new BehaviorSubject('');
-        this.compactMode$ = this.pageHeaderService.compactMode$;
-        this.iconService.registerAll([ArrowLeft16]);
-        this.pageTitleService.disableReset();
-    }
-    ngOnDestroy() {
-        this.pageTitleService.enableReset();
-        this.breadcrumbService.clearThirdBreadcrumb();
-        this.breadcrumbService.clearFourthBreadcrumb();
     }
     onValid(valid) {
-        this.valid$.next(valid);
+        this.validEvent.emit(valid);
     }
     onValueChange(value) {
-        this._updatedModelValue$.next(value);
-    }
-    updateFormFlowDefinition() {
-        this.loading$.next(true);
-        combineLatest([this._params$, this._updatedModelValue$, this._context$])
-            .pipe(take(1), switchMap(([params, updatedModelValue, context]) => {
-            const updatedDefinition = {
-                ...JSON.parse(updatedModelValue),
-                key: params.formFlowDefinitionKey,
-            };
-            if (context === 'buildingBlock') {
-                return this.formFlowService.updateBuildingBlockFormFlowDefinition(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey, updatedDefinition);
-            }
-            return this.formFlowService.updateFormFlowDefinition(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey, updatedDefinition);
-        }), finalize(() => this.loading$.next(false)))
-            .subscribe(result => {
-            this.showSuccessMessage(result.key);
-        });
-    }
-    onDelete() {
-        this.loading$.next(true);
-        combineLatest([this._params$, this._context$])
-            .pipe(take(1), switchMap(([params, context]) => {
-            if (context === 'buildingBlock') {
-                return this.formFlowService.deleteBuildingBlockFormFlowDefinition(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey);
-            }
-            return this.formFlowService.deleteFormFlowDefinition(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey);
-        }))
-            .subscribe(() => {
-            this.router.navigate(['../'], { relativeTo: this.route });
-        });
-    }
-    showDeleteModal() {
-        this.showDeleteModal$.next(true);
+        this.valueChangeEvent.emit(value);
     }
-    downloadFormFlowDefinition(model) {
-        this._params$
-            .pipe(take(1))
-            .subscribe((params) => this.formFlowDownloadService.downloadJson(JSON.parse(model.value), params));
-    }
-    navigateBack() {
-        this.router.navigate(['../'], { relativeTo: this.route });
-    }
-    getEditorModel(formFlowDefinition) {
-        const clone = { ...formFlowDefinition };
-        delete clone.readOnly;
-        return {
-            value: JSON.stringify(clone),
-            language: 'json',
-            uri: `inmemory://form-flow/${formFlowDefinition.key}.formflow.json`,
-        };
-    }
-    showSuccessMessage(formFlowDefinitionKey) {
-        this.notificationService.showToast({
-            caption: this.translateService.instant('formFlow.savedSuccessTitleMessage', {
-                key: formFlowDefinitionKey,
-            }),
-            type: 'success',
-            title: this.translateService.instant('formFlow.savedSuccessTitle'),
-        });
-    }
-    initBreadcrumbs(params, context) {
-        if (context === 'buildingBlock') {
-            const route = `/building-block-management/building-block/${params.caseDefinitionKey}/version/${params.caseDefinitionVersionTag}`;
-            const generalRoute = `${route}/general`;
-            this.breadcrumbService.setThirdBreadcrumb({
-                route: [generalRoute],
-                content: `${params.caseDefinitionKey} (${params.caseDefinitionVersionTag})`,
-                href: generalRoute,
-            });
-            const routeWithFormFlows = `${route}/form-flows`;
-            this.breadcrumbService.setFourthBreadcrumb({
-                route: [routeWithFormFlows],
-                content: this.translateService.instant('buildingBlockManagement.tabs.formFlows'),
-                href: routeWithFormFlows,
-            });
-        }
-        else {
-            const route = `/case-management/case/${params.caseDefinitionKey}/version/${params.caseDefinitionVersionTag}`;
-            this.breadcrumbService.setThirdBreadcrumb({
-                route: [route],
-                content: `${params.caseDefinitionKey} (${params.caseDefinitionVersionTag})`,
-                href: route,
-            });
-            const routeWithFormFlows = `${route}/form-flows`;
-            this.breadcrumbService.setFourthBreadcrumb({
-                route: [routeWithFormFlows],
-                content: this.translateService.instant('caseManagement.tabs.formFlows'),
-                href: routeWithFormFlows,
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowEditorComponent, deps: [{ token: i1$2.BreadcrumbService }, { token: FormFlowDownloadService }, { token: FormFlowService }, { token: i3.IconService }, { token: i2.GlobalNotificationService }, { token: i1$2.PageHeaderService }, { token: i1$2.PageTitleService }, { token: i3$1.ActivatedRoute }, { token: i3$1.Router }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFlowEditorComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@if ({model: model$ | async, schema: formFlowSchemaJson$ | async}; as obs) {\n  @if (obs.model && obs.schema) {\n    <valtimo-editor\n      [disabled]=\"(loading$ | async) === false && readOnly$ | async\"\n      [editorOptions]=\"editorOptions\"\n      [model]=\"obs.model\"\n      [jsonSchema]=\"obs.schema\"\n      (validEvent)=\"onValid($event)\"\n      (valueChangeEvent)=\"onValueChange($event)\"\n      [fitPage]=\"true\"\n    ></valtimo-editor>\n  } @else {\n    <cds-loading></cds-loading>\n  }\n}\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <div\n      *ngIf=\"{\n        compactMode: compactMode$ | async,\n        valid: valid$ | async,\n        readOnly: readOnly$ | async,\n        model: model$ | async,\n      } as obs\"\n      class=\"buttons-container\"\n    >\n      <v-overflow-menu placement=\"bottom-end\">\n        <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n        <v-overflow-menu-option\n          [disabled]=\"!obs.valid && !obs.readOnly\"\n          (selected)=\"downloadFormFlowDefinition(obs.model)\"\n          >{{ 'interface.export' | translate }}\n        </v-overflow-menu-option>\n\n        <v-overflow-menu-option\n          [disabled]=\"obs.readOnly\"\n          type=\"danger\"\n          (selected)=\"showDeleteModal()\"\n          >{{ 'interface.delete' | translate }}\n        </v-overflow-menu-option>\n      </v-overflow-menu>\n\n      <button cdsButton=\"secondary\" [size]=\"obs.compactMode ? 'sm' : 'md'\" (click)=\"navigateBack()\">\n        {{ 'interface.back' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"arrow--left\" size=\"16\"></svg>\n      </button>\n\n      <button\n        [disabled]=\"!obs.valid || obs.readOnly\"\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"updateFormFlowDefinition()\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </div>\n  </ng-template>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"formFlow.deleteModalContent\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDelete()\"\n></valtimo-confirmation-modal>\n", styles: ["cds-loading{display:flex;justify-content:center}.buttons-container{display:flex;align-items:center;justify-self:flex-end;gap:16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i1$2.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i1$2.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "directive", type: i1$2.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i1$2.OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: i1$2.OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: i1$2.OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowJsonEditorTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFlowJsonEditorTabComponent, isStandalone: true, selector: "valtimo-form-flow-json-editor-tab", inputs: { disabled: "disabled", model: "model", schema: "schema" }, outputs: { validEvent: "validEvent", valueChangeEvent: "valueChangeEvent" }, 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@if (schema) {\n  <valtimo-editor\n    [disabled]=\"disabled ?? false\"\n    [editorOptions]=\"editorOptions\"\n    [fitPage]=\"true\"\n    [jsonSchema]=\"schema\"\n    [model]=\"model\"\n    (validEvent)=\"onValid($event)\"\n    (valueChangeEvent)=\"onValueChange($event)\"\n  ></valtimo-editor>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i1$2.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage"], outputs: ["validEvent", "valueChangeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowJsonEditorTabComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@if ({model: model$ | async, schema: formFlowSchemaJson$ | async}; as obs) {\n  @if (obs.model && obs.schema) {\n    <valtimo-editor\n      [disabled]=\"(loading$ | async) === false && readOnly$ | async\"\n      [editorOptions]=\"editorOptions\"\n      [model]=\"obs.model\"\n      [jsonSchema]=\"obs.schema\"\n      (validEvent)=\"onValid($event)\"\n      (valueChangeEvent)=\"onValueChange($event)\"\n      [fitPage]=\"true\"\n    ></valtimo-editor>\n  } @else {\n    <cds-loading></cds-loading>\n  }\n}\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <div\n      *ngIf=\"{\n        compactMode: compactMode$ | async,\n        valid: valid$ | async,\n        readOnly: readOnly$ | async,\n        model: model$ | async,\n      } as obs\"\n      class=\"buttons-container\"\n    >\n      <v-overflow-menu placement=\"bottom-end\">\n        <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n        <v-overflow-menu-option\n          [disabled]=\"!obs.valid && !obs.readOnly\"\n          (selected)=\"downloadFormFlowDefinition(obs.model)\"\n          >{{ 'interface.export' | translate }}\n        </v-overflow-menu-option>\n\n        <v-overflow-menu-option\n          [disabled]=\"obs.readOnly\"\n          type=\"danger\"\n          (selected)=\"showDeleteModal()\"\n          >{{ 'interface.delete' | translate }}\n        </v-overflow-menu-option>\n      </v-overflow-menu>\n\n      <button cdsButton=\"secondary\" [size]=\"obs.compactMode ? 'sm' : 'md'\" (click)=\"navigateBack()\">\n        {{ 'interface.back' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"arrow--left\" size=\"16\"></svg>\n      </button>\n\n      <button\n        [disabled]=\"!obs.valid || obs.readOnly\"\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"updateFormFlowDefinition()\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </div>\n  </ng-template>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"formFlow.deleteModalContent\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDelete()\"\n></valtimo-confirmation-modal>\n", styles: ["cds-loading{display:flex;justify-content:center}.buttons-container{display:flex;align-items:center;justify-self:flex-end;gap:16px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.BreadcrumbService }, { type: FormFlowDownloadService }, { type: FormFlowService }, { type: i3.IconService }, { type: i2.GlobalNotificationService }, { type: i1$2.PageHeaderService }, { type: i1$2.PageTitleService }, { type: i3$1.ActivatedRoute }, { type: i3$1.Router }, { type: i4.TranslateService }] });
+            args: [{ standalone: true, selector: 'valtimo-form-flow-json-editor-tab', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, EditorModule], 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@if (schema) {\n  <valtimo-editor\n    [disabled]=\"disabled ?? false\"\n    [editorOptions]=\"editorOptions\"\n    [fitPage]=\"true\"\n    [jsonSchema]=\"schema\"\n    [model]=\"model\"\n    (validEvent)=\"onValid($event)\"\n    (valueChangeEvent)=\"onValueChange($event)\"\n  ></valtimo-editor>\n}\n" }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], schema: [{
+                type: Input
+            }], validEvent: [{
+                type: Output
+            }], valueChangeEvent: [{
+                type: Output
+            }] } });
 
 /*
- * 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.
@@ -533,9 +558,1354 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DeleteFormFlowModalComponent {
-    constructor() {
-        this.deleteEvent = new EventEmitter();
+/**
+ * Builds and reads the reactive form tree that backs the visual form flow editor.
+ *
+ * The form mirrors the definition JSON: a `startStep` control and a `steps` array where every step
+ * has its key, title, type (name plus a dynamic properties group driven by the registry),
+ * transitions and the three expression lists. Serialization produces the same JSON contract the
+ * JSON editor tab emits, so both tabs are interchangeable to the surrounding editor page.
+ */
+class FormFlowEditorFormService {
+    constructor(fb) {
+        this.fb = fb;
+    }
+    buildDefinitionForm(definition, registry) {
+        return this.fb.group({
+            startStep: this.fb.control(definition.startStep ?? '', Validators.required),
+            steps: this.fb.array((definition.steps ?? []).map(step => this.buildStepGroup(step, registry)), [uniqueStepKeysValidator]),
+        }, { validators: [startStepExistsValidator, transitionTargetsExistValidator] });
+    }
+    buildStepGroup(step, registry) {
+        const typeName = step.type?.name ?? '';
+        // The legacy single `nextStep` field is normalized into a `nextSteps` transition, mirroring
+        // how the backend interprets it.
+        const transitions = step.nextSteps ?? (step.nextStep ? [{ step: step.nextStep }] : []);
+        return this.fb.group({
+            key: this.fb.control(step.key ?? '', Validators.required),
+            title: this.fb.control(step.title ?? ''),
+            typeName: this.fb.control(typeName, Validators.required),
+            properties: this.buildPropertiesGroup(typeName, (step.type?.properties ?? {}), registry),
+            nextSteps: this.fb.array(transitions.map(transition => this.buildTransitionGroup(transition)), [singleDefaultTransitionValidator]),
+            onOpen: this.buildExpressionArray(step.onOpen),
+            onComplete: this.buildExpressionArray(step.onComplete),
+            onBack: this.buildExpressionArray(step.onBack),
+        });
+    }
+    buildNewStepGroup(existingKeys, registry) {
+        const defaultType = registry.stepTypes.find(stepType => stepType.name === 'form')?.name ??
+            registry.stepTypes[0]?.name ??
+            'form';
+        return this.buildStepGroup({
+            key: this.generateStepKey(existingKeys),
+            type: { name: defaultType, properties: {} },
+            nextSteps: [],
+        }, registry);
+    }
+    /**
+     * Builds the dynamic properties group for a step type. Known types get one required control per
+     * registry property; unknown (custom) types keep controls for whatever properties the loaded
+     * definition already contained. Values for properties that exist in both the old and the new
+     * type are preserved.
+     */
+    buildPropertiesGroup(typeName, currentProperties, registry) {
+        const registryStepType = registry.stepTypes.find(stepType => stepType.name === typeName);
+        const propertyNames = registryStepType
+            ? registryStepType.properties.map(property => property.name)
+            : Object.keys(currentProperties);
+        return this.fb.group(Object.fromEntries(propertyNames.map(name => [
+            name,
+            this.fb.control(currentProperties[name] ?? '', Validators.required),
+        ])));
+    }
+    buildTransitionGroup(transition) {
+        return this.fb.group({
+            step: this.fb.control(transition?.step ?? '', Validators.required),
+            condition: this.fb.control(transition?.condition ?? ''),
+        });
+    }
+    buildExpressionControl(expression = '') {
+        return this.fb.control(expression, Validators.required);
+    }
+    serialize(form, definitionKey) {
+        const value = form.getRawValue();
+        return {
+            key: definitionKey,
+            startStep: value.startStep,
+            steps: value.steps.map(step => ({
+                key: step.key,
+                ...(step.title?.trim() ? { title: step.title.trim() } : {}),
+                type: {
+                    name: step.typeName,
+                    properties: step.properties,
+                },
+                nextSteps: step.nextSteps.map(transition => ({
+                    step: transition.step,
+                    ...(transition.condition?.trim() ? { condition: transition.condition.trim() } : {}),
+                })),
+                onBack: step.onBack,
+                onOpen: step.onOpen,
+                onComplete: step.onComplete,
+            })),
+        };
+    }
+    /**
+     * Rewrites every reference to a renamed step key: the start step and all transition targets.
+     * Used while the user types a new key, so the definition stays internally consistent.
+     */
+    renameStepReferences(form, oldKey, newKey) {
+        if (!oldKey || oldKey === newKey)
+            return;
+        const startStepControl = form.get('startStep');
+        if (startStepControl?.value === oldKey) {
+            startStepControl.setValue(newKey, { emitEvent: false });
+        }
+        this.getStepsArray(form).controls.forEach(stepGroup => {
+            stepGroup.get('nextSteps').controls.forEach(transitionGroup => {
+                const stepControl = transitionGroup.get('step');
+                if (stepControl?.value === oldKey) {
+                    stepControl.setValue(newKey, { emitEvent: false });
+                }
+            });
+        });
+    }
+    getStepsArray(form) {
+        return form.get('steps');
+    }
+    buildExpressionArray(expressions) {
+        return this.fb.array((expressions ?? []).map(expression => this.buildExpressionControl(expression)));
+    }
+    generateStepKey(existingKeys) {
+        let index = existingKeys.length + 1;
+        while (existingKeys.includes(`step-${index}`)) {
+            index++;
+        }
+        return `step-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowEditorFormService, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowEditorFormService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowEditorFormService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }] });
+/** Marks duplicated step keys invalid on the `steps` array. */
+const uniqueStepKeysValidator = (control) => {
+    const keys = control.controls
+        .map(stepGroup => (stepGroup.get('key')?.value ?? '').trim())
+        .filter(key => key !== '');
+    const duplicates = keys.filter((key, index) => keys.indexOf(key) !== index);
+    return duplicates.length ? { duplicateStepKeys: { keys: [...new Set(duplicates)] } } : null;
+};
+/** The configured start step must reference an existing step. */
+const startStepExistsValidator = (control) => {
+    const startStep = control.get('startStep')?.value;
+    if (!startStep)
+        return null;
+    const keys = control.get('steps').controls.map(stepGroup => stepGroup.get('key')?.value);
+    return keys.includes(startStep) ? null : { startStepMissing: { startStep } };
+};
+/** Every transition must point to an existing step. */
+const transitionTargetsExistValidator = (control) => {
+    const steps = control.get('steps').controls;
+    const keys = steps.map(stepGroup => stepGroup.get('key')?.value);
+    const unknownTargets = steps.flatMap(stepGroup => stepGroup.get('nextSteps').controls
+        .map(transitionGroup => transitionGroup.get('step')?.value)
+        .filter(target => !!target && !keys.includes(target)));
+    return unknownTargets.length
+        ? { unknownTransitionTargets: { targets: [...new Set(unknownTargets)] } }
+        : null;
+};
+/**
+ * Transitions are evaluated in order and the first condition-less entry acts as the default, so at
+ * most one transition per step may omit its condition.
+ */
+const singleDefaultTransitionValidator = (control) => {
+    const defaultCount = control.controls.filter(transitionGroup => !(transitionGroup.get('condition')?.value ?? '').trim()).length;
+    return defaultCount > 1 ? { multipleDefaultTransitions: true } : null;
+};
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Translates a key and falls back to the given value when no translation exists (ngx-translate
+ * returns the key itself in that case). Used for registry-driven labels where only the well-known
+ * entries have translations.
+ */
+function translateWithFallback(translateService, key, fallback) {
+    const translation = translateService.instant(key);
+    return translation === key ? fallback : translation;
+}
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Lists the `additionalProperties` entries that expressions can rely on, grouped by how the form
+ * flow is linked (user task or start event). The property names come from the form flow registry,
+ * so this always matches what the backend actually provides.
+ */
+class FormFlowContextPropertiesComponent {
+    set registry(registry) {
+        const properties = registry?.additionalProperties ?? [];
+        this.groups = [
+            { labelKey: 'formFlow.uiEditor.additionalPropertiesUserTask', context: 'userTask' },
+            { labelKey: 'formFlow.uiEditor.additionalPropertiesStartEvent', context: 'startEvent' },
+        ]
+            .map(group => ({
+            labelKey: group.labelKey,
+            properties: properties.filter(property => property.context === group.context),
+        }))
+            .filter(group => group.properties.length > 0);
+    }
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.groups = [];
+    }
+    getDescription(property) {
+        return translateWithFallback(this.translateService, `formFlow.uiEditor.additionalProperties.${property.name}`, '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowContextPropertiesComponent, deps: [{ token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFlowContextPropertiesComponent, isStandalone: true, selector: "valtimo-form-flow-context-properties", inputs: { registry: "registry" }, 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@if (groups.length) {\n  <div class=\"context-properties\">\n    <p class=\"context-properties__title\">\n      {{ 'formFlow.uiEditor.additionalPropertiesTitle' | translate }}\n    </p>\n\n    @for (group of groups; track group.labelKey) {\n      <p class=\"context-properties__group\">{{ group.labelKey | translate }}</p>\n\n      <ul>\n        @for (property of group.properties; track property.name) {\n          <li>\n            <code>additionalProperties.{{ property.name }}</code>\n\n            @if (!property.alwaysPresent) {\n              <span class=\"context-properties__optional\">{{\n                'formFlow.uiEditor.additionalPropertiesOptional' | translate\n              }}</span>\n            }\n\n            @if (getDescription(property)) {\n              \u2014 {{ getDescription(property) }}\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n}\n", styles: [".context-properties{display:flex;flex-direction:column;gap:var(--cds-spacing-02);color:var(--cds-text-secondary);font-size:var(--cds-label-01-font-size, .75rem)}.context-properties__title{font-weight:600}.context-properties__group{margin-top:var(--cds-spacing-02)}.context-properties__optional{color:var(--cds-text-helper);font-style:italic;margin-left:var(--cds-spacing-02)}.context-properties ul{display:flex;flex-direction:column;gap:var(--cds-spacing-02);list-style:disc;padding-left:var(--cds-spacing-05)}.context-properties code{font-family:IBM Plex Mono,monospace;color:var(--cds-text-primary)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowContextPropertiesComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-form-flow-context-properties', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, 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@if (groups.length) {\n  <div class=\"context-properties\">\n    <p class=\"context-properties__title\">\n      {{ 'formFlow.uiEditor.additionalPropertiesTitle' | translate }}\n    </p>\n\n    @for (group of groups; track group.labelKey) {\n      <p class=\"context-properties__group\">{{ group.labelKey | translate }}</p>\n\n      <ul>\n        @for (property of group.properties; track property.name) {\n          <li>\n            <code>additionalProperties.{{ property.name }}</code>\n\n            @if (!property.alwaysPresent) {\n              <span class=\"context-properties__optional\">{{\n                'formFlow.uiEditor.additionalPropertiesOptional' | translate\n              }}</span>\n            }\n\n            @if (getDescription(property)) {\n              \u2014 {{ getDescription(property) }}\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n}\n", styles: [".context-properties{display:flex;flex-direction:column;gap:var(--cds-spacing-02);color:var(--cds-text-secondary);font-size:var(--cds-label-01-font-size, .75rem)}.context-properties__title{font-weight:600}.context-properties__group{margin-top:var(--cds-spacing-02)}.context-properties__optional{color:var(--cds-text-helper);font-style:italic;margin-left:var(--cds-spacing-02)}.context-properties ul{display:flex;flex-direction:column;gap:var(--cds-spacing-02);list-style:disc;padding-left:var(--cds-spacing-05)}.context-properties code{font-family:IBM Plex Mono,monospace;color:var(--cds-text-primary)}\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: i4.TranslateService }], propDecorators: { registry: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Explains how SpEL expressions work in a form flow — conditions, action hooks and the data they
+ * can access — in a modal, so the editor itself only needs a compact pointer to this help.
+ */
+class FormFlowExpressionHelpModalComponent {
+    constructor() {
+        this.open = false;
+        this.registry = null;
+        this.closeEvent = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowExpressionHelpModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormFlowExpressionHelpModalComponent, isStandalone: true, selector: "valtimo-form-flow-expression-help-modal", inputs: { open: "open", registry: "registry" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  size=\"md\"\n  [open]=\"open\"\n  [title]=\"'formFlow.uiEditor.help.title' | translate\"\n  valtimoCdsModal\n  (close)=\"closeEvent.emit()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeEvent.emit()\">\n    <h3 cdsModalHeaderHeading>{{ 'formFlow.uiEditor.help.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"expression-help\">\n    <p>{{ 'formFlow.uiEditor.help.intro' | translate }}</p>\n\n    <h5>{{ 'formFlow.uiEditor.help.conditionsHeading' | translate }}</h5>\n\n    <p>{{ 'formFlow.uiEditor.conditionExamplesTitle' | translate }}</p>\n\n    <ul>\n      <li>\n        <code>{{ '${step.submissionData.age >= 21}' }}</code>\n        \u2014 {{ 'formFlow.uiEditor.conditionExampleSubmission' | translate }}\n      </li>\n\n      <li>\n        <code>{{ '${additionalProperties.documentId != null}' }}</code>\n        \u2014 {{ 'formFlow.uiEditor.conditionExampleContext' | translate }}\n      </li>\n    </ul>\n\n    <p>{{ 'formFlow.uiEditor.conditionExampleDefault' | translate }}</p>\n\n    <h5>{{ 'formFlow.uiEditor.help.actionsHeading' | translate }}</h5>\n\n    <p>{{ 'formFlow.uiEditor.help.actionsBody' | translate }}</p>\n\n    <h5>{{ 'formFlow.uiEditor.help.dataHeading' | translate }}</h5>\n\n    <valtimo-form-flow-context-properties\n      [registry]=\"registry\"\n    ></valtimo-form-flow-context-properties>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"primary\" (click)=\"closeEvent.emit()\">\n      {{ 'interface.close' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".expression-help{display:flex;flex-direction:column;gap:var(--cds-spacing-04);color:var(--cds-text-primary)}.expression-help h5{margin-top:var(--cds-spacing-03)}.expression-help p{color:var(--cds-text-secondary)}.expression-help ul{display:flex;flex-direction:column;gap:var(--cds-spacing-02);list-style:disc;padding-left:var(--cds-spacing-05);color:var(--cds-text-secondary)}.expression-help code{font-family:IBM Plex Mono,monospace;color:var(--cds-text-primary)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$1.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$1.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$1.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: FormFlowContextPropertiesComponent, selector: "valtimo-form-flow-context-properties", inputs: ["registry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowExpressionHelpModalComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-form-flow-expression-help-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ButtonModule,
+                        ModalModule,
+                        ValtimoCdsModalDirective,
+                        FormFlowContextPropertiesComponent,
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  size=\"md\"\n  [open]=\"open\"\n  [title]=\"'formFlow.uiEditor.help.title' | translate\"\n  valtimoCdsModal\n  (close)=\"closeEvent.emit()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeEvent.emit()\">\n    <h3 cdsModalHeaderHeading>{{ 'formFlow.uiEditor.help.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"expression-help\">\n    <p>{{ 'formFlow.uiEditor.help.intro' | translate }}</p>\n\n    <h5>{{ 'formFlow.uiEditor.help.conditionsHeading' | translate }}</h5>\n\n    <p>{{ 'formFlow.uiEditor.conditionExamplesTitle' | translate }}</p>\n\n    <ul>\n      <li>\n        <code>{{ '${step.submissionData.age >= 21}' }}</code>\n        \u2014 {{ 'formFlow.uiEditor.conditionExampleSubmission' | translate }}\n      </li>\n\n      <li>\n        <code>{{ '${additionalProperties.documentId != null}' }}</code>\n        \u2014 {{ 'formFlow.uiEditor.conditionExampleContext' | translate }}\n      </li>\n    </ul>\n\n    <p>{{ 'formFlow.uiEditor.conditionExampleDefault' | translate }}</p>\n\n    <h5>{{ 'formFlow.uiEditor.help.actionsHeading' | translate }}</h5>\n\n    <p>{{ 'formFlow.uiEditor.help.actionsBody' | translate }}</p>\n\n    <h5>{{ 'formFlow.uiEditor.help.dataHeading' | translate }}</h5>\n\n    <valtimo-form-flow-context-properties\n      [registry]=\"registry\"\n    ></valtimo-form-flow-context-properties>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"primary\" (click)=\"closeEvent.emit()\">\n      {{ 'interface.close' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".expression-help{display:flex;flex-direction:column;gap:var(--cds-spacing-04);color:var(--cds-text-primary)}.expression-help h5{margin-top:var(--cds-spacing-03)}.expression-help p{color:var(--cds-text-secondary)}.expression-help ul{display:flex;flex-direction:column;gap:var(--cds-spacing-02);list-style:disc;padding-left:var(--cds-spacing-05);color:var(--cds-text-secondary)}.expression-help code{font-family:IBM Plex Mono,monospace;color:var(--cds-text-primary)}\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"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], registry: [{
+                type: Input
+            }], closeEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Editable list of SpEL expressions for one of a step's lifecycle hooks (on open, on complete,
+ * on back). The add-menu offers the expression beans from the form flow registry as ready-made
+ * templates next to a blank expression.
+ */
+class FormFlowExpressionListComponent {
+    set registry(registry) {
+        this.suggestions = (registry?.expressionBeans ?? []).flatMap(bean => bean.methods.map(method => {
+            const call = `${bean.name}.${this.formatMethod(method)}`;
+            return { label: call, expression: `\${${call}}` };
+        }));
+    }
+    constructor(formService, iconService) {
+        this.formService = formService;
+        this.iconService = iconService;
+        this.label = '';
+        this.description = '';
+        this.readOnly = false;
+        /** While false the admin is still modelling and empty-expression errors stay hidden; a save
+         * attempt flips it to reveal them. */
+        this.revealErrors = false;
+        this.suggestions = [];
+        this.testIds = FORM_FLOW_EDITOR_TEST_IDS;
+        this.iconService.registerAll([Add16, TrashCan16]);
+    }
+    get expressionControls() {
+        return this.expressions.controls;
+    }
+    addExpression(expression = '') {
+        this.expressions.push(this.formService.buildExpressionControl(expression));
+        this.expressions.markAsDirty();
+    }
+    removeExpression(index) {
+        this.expressions.removeAt(index);
+        this.expressions.markAsDirty();
+    }
+    formatMethod(method) {
+        return `${method.name}(${method.parameters.map(parameter => parameter.name).join(', ')})`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowExpressionListComponent, deps: [{ token: FormFlowEditorFormService }, { token: i2$1.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFlowExpressionListComponent, isStandalone: true, selector: "valtimo-form-flow-expression-list", inputs: { expressions: "expressions", label: "label", description: "description", readOnly: "readOnly", revealErrors: "revealErrors", registry: "registry" }, 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<div class=\"expression-list\">\n  <div class=\"expression-list__header\">\n    <h6>{{ label }}</h6>\n\n    <p class=\"expression-list__description\">{{ description }}</p>\n  </div>\n\n  @for (control of expressionControls; track control; let index = $index) {\n    <div class=\"expression-list__row\">\n      <input\n        cdsText\n        [formControl]=\"control\"\n        [invalid]=\"control.invalid && revealErrors\"\n        [attr.data-test-id]=\"testIds.expressionInput\"\n        placeholder=\"${valtimoFormFlow.completeTask(additionalProperties)}\"\n      />\n\n      @if (!readOnly) {\n        <button\n          cdsButton=\"ghost\"\n          size=\"md\"\n          [iconOnly]=\"true\"\n          [attr.aria-label]=\"'interface.delete' | translate\"\n          (click)=\"removeExpression(index)\"\n        >\n          <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n        </button>\n      }\n    </div>\n  } @empty {\n    <p class=\"expression-list__empty\">{{ 'formFlow.uiEditor.noExpressions' | translate }}</p>\n  }\n\n  @if (!readOnly) {\n    <div class=\"expression-list__add\">\n      <v-overflow-menu placement=\"bottom-start\">\n        <button\n          cdsButton=\"tertiary\"\n          size=\"sm\"\n          overflowTrigger\n          [attr.data-test-id]=\"testIds.addExpressionButton\"\n        >\n          {{ 'formFlow.uiEditor.addExpression' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n        </button>\n\n        <v-overflow-menu-option (selected)=\"addExpression()\">{{\n          'formFlow.uiEditor.blankExpression' | translate\n        }}</v-overflow-menu-option>\n\n        @for (suggestion of suggestions; track suggestion.label) {\n          <v-overflow-menu-option (selected)=\"addExpression(suggestion.expression)\">{{\n            suggestion.label\n          }}</v-overflow-menu-option>\n        }\n      </v-overflow-menu>\n    </div>\n  }\n</div>\n", styles: [".expression-list{display:flex;flex-direction:column;gap:var(--cds-spacing-03)}.expression-list__header h6{margin:0}.expression-list__description{color:var(--cds-text-secondary);font-size:var(--cds-label-01-font-size, .75rem);margin:var(--cds-spacing-02) 0 0 0}.expression-list__row{display:flex;align-items:center;gap:var(--cds-spacing-03)}.expression-list__row input{flex:1;font-family:IBM Plex Mono,monospace}.expression-list__empty{color:var(--cds-text-helper);font-size:var(--cds-body-compact-01-font-size, .875rem);margin:0}.expression-list__add{margin-top:var(--cds-spacing-03)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "directive", type: i2$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowExpressionListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-form-flow-expression-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        ButtonModule,
+                        IconModule,
+                        InputModule,
+                        OverflowMenuComponent,
+                        OverflowMenuOptionComponent,
+                    ], 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<div class=\"expression-list\">\n  <div class=\"expression-list__header\">\n    <h6>{{ label }}</h6>\n\n    <p class=\"expression-list__description\">{{ description }}</p>\n  </div>\n\n  @for (control of expressionControls; track control; let index = $index) {\n    <div class=\"expression-list__row\">\n      <input\n        cdsText\n        [formControl]=\"control\"\n        [invalid]=\"control.invalid && revealErrors\"\n        [attr.data-test-id]=\"testIds.expressionInput\"\n        placeholder=\"${valtimoFormFlow.completeTask(additionalProperties)}\"\n      />\n\n      @if (!readOnly) {\n        <button\n          cdsButton=\"ghost\"\n          size=\"md\"\n          [iconOnly]=\"true\"\n          [attr.aria-label]=\"'interface.delete' | translate\"\n          (click)=\"removeExpression(index)\"\n        >\n          <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n        </button>\n      }\n    </div>\n  } @empty {\n    <p class=\"expression-list__empty\">{{ 'formFlow.uiEditor.noExpressions' | translate }}</p>\n  }\n\n  @if (!readOnly) {\n    <div class=\"expression-list__add\">\n      <v-overflow-menu placement=\"bottom-start\">\n        <button\n          cdsButton=\"tertiary\"\n          size=\"sm\"\n          overflowTrigger\n          [attr.data-test-id]=\"testIds.addExpressionButton\"\n        >\n          {{ 'formFlow.uiEditor.addExpression' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n        </button>\n\n        <v-overflow-menu-option (selected)=\"addExpression()\">{{\n          'formFlow.uiEditor.blankExpression' | translate\n        }}</v-overflow-menu-option>\n\n        @for (suggestion of suggestions; track suggestion.label) {\n          <v-overflow-menu-option (selected)=\"addExpression(suggestion.expression)\">{{\n            suggestion.label\n          }}</v-overflow-menu-option>\n        }\n      </v-overflow-menu>\n    </div>\n  }\n</div>\n", styles: [".expression-list{display:flex;flex-direction:column;gap:var(--cds-spacing-03)}.expression-list__header h6{margin:0}.expression-list__description{color:var(--cds-text-secondary);font-size:var(--cds-label-01-font-size, .75rem);margin:var(--cds-spacing-02) 0 0 0}.expression-list__row{display:flex;align-items:center;gap:var(--cds-spacing-03)}.expression-list__row input{flex:1;font-family:IBM Plex Mono,monospace}.expression-list__empty{color:var(--cds-text-helper);font-size:var(--cds-body-compact-01-font-size, .875rem);margin:0}.expression-list__add{margin-top:var(--cds-spacing-03)}\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: FormFlowEditorFormService }, { type: i2$1.IconService }], propDecorators: { expressions: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], revealErrors: [{
+                type: Input
+            }], registry: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Editable list of a step's outgoing transitions. Transitions are evaluated top to bottom — the
+ * first entry whose condition holds is taken and a condition-less entry acts as the default — so
+ * the rows can be reordered.
+ */
+class FormFlowTransitionListComponent {
+    constructor(formService, iconService) {
+        this.formService = formService;
+        this.iconService = iconService;
+        this.stepKeys = [];
+        this.readOnly = false;
+        /** While false the admin is still modelling and empty-target errors stay hidden; a save attempt
+         * flips it to reveal them. */
+        this.revealErrors = false;
+        this.testIds = FORM_FLOW_EDITOR_TEST_IDS;
+        // Per-row dropdown items, cached per transition group. The Carbon dropdown resets its visual
+        // selection whenever its items array is swapped, so the array is only rebuilt when the step keys
+        // or the row's own selection actually change.
+        this._rowItems = new WeakMap();
+        this.iconService.registerAll([Add16, ArrowDown16, ArrowUp16, TrashCan16]);
+    }
+    ngOnChanges(changes) {
+        if (changes['stepKeys']) {
+            // A new keys reference invalidates every cached row; rows lazily rebuild on the next read.
+            this.transitionGroups.forEach(group => this._rowItems.delete(group));
+        }
+    }
+    get transitionGroups() {
+        return this.transitions.controls;
+    }
+    getRowItems(transitionGroup) {
+        const value = transitionGroup.get('step')?.value ?? '';
+        const cached = this._rowItems.get(transitionGroup);
+        if (cached && cached.keys === this.stepKeys && cached.value === value) {
+            return cached.items;
+        }
+        const items = this.stepKeys.map(key => ({ content: key, id: key, selected: key === value }));
+        this._rowItems.set(transitionGroup, { keys: this.stepKeys, value, items });
+        return items;
+    }
+    addTransition() {
+        this.transitions.push(this.formService.buildTransitionGroup());
+        this.transitions.markAsDirty();
+    }
+    removeTransition(index) {
+        this.transitions.removeAt(index);
+        this.transitions.markAsDirty();
+    }
+    moveTransition(index, offset) {
+        const target = index + offset;
+        if (target < 0 || target >= this.transitions.length)
+            return;
+        const control = this.transitions.at(index);
+        this.transitions.removeAt(index);
+        this.transitions.insert(target, control);
+        this.transitions.markAsDirty();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowTransitionListComponent, deps: [{ token: FormFlowEditorFormService }, { token: i2$1.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFlowTransitionListComponent, isStandalone: true, selector: "valtimo-form-flow-transition-list", inputs: { transitions: "transitions", stepKeys: "stepKeys", readOnly: "readOnly", revealErrors: "revealErrors" }, usesOnChanges: true, 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<div class=\"transition-list\">\n  @for (transitionGroup of transitionGroups; track transitionGroup; let index = $index) {\n    <div\n      class=\"transition-list__row\"\n      [formGroup]=\"transitionGroup\"\n      [attr.data-test-id]=\"testIds.transitionRow\"\n    >\n      <div class=\"transition-list__target\">\n        <cds-dropdown\n          formControlName=\"step\"\n          itemValueKey=\"id\"\n          [invalid]=\"transitionGroup.get('step')?.invalid && revealErrors\"\n          [label]=\"targetStepLabelTemplate\"\n          [placeholder]=\"'formFlow.uiEditor.selectStep' | translate\"\n        >\n          <cds-dropdown-list [items]=\"getRowItems(transitionGroup)\"></cds-dropdown-list>\n        </cds-dropdown>\n\n        <ng-template #targetStepLabelTemplate>\n          <span class=\"transition-list__label\">\n            {{ 'formFlow.uiEditor.targetStep' | translate }}\n\n            <v-tooltip-icon\n              [tooltip]=\"'formFlow.uiEditor.fieldTooltips.targetStep' | translate\"\n            ></v-tooltip-icon>\n          </span>\n        </ng-template>\n      </div>\n\n      <cds-label class=\"transition-list__condition\">\n        <span class=\"transition-list__label\">\n          {{ 'formFlow.uiEditor.condition' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'formFlow.uiEditor.fieldTooltips.condition' | translate\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input\n          cdsText\n          formControlName=\"condition\"\n          placeholder=\"{{ 'formFlow.uiEditor.conditionPlaceholder' | translate }}\"\n        />\n      </cds-label>\n\n      @if (!readOnly) {\n        <div class=\"transition-list__actions\">\n          <button\n            cdsButton=\"ghost\"\n            size=\"md\"\n            [iconOnly]=\"true\"\n            [disabled]=\"index === 0\"\n            [attr.aria-label]=\"'formFlow.uiEditor.moveUp' | translate\"\n            (click)=\"moveTransition(index, -1)\"\n          >\n            <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n          </button>\n\n          <button\n            cdsButton=\"ghost\"\n            size=\"md\"\n            [iconOnly]=\"true\"\n            [disabled]=\"index === transitionGroups.length - 1\"\n            [attr.aria-label]=\"'formFlow.uiEditor.moveDown' | translate\"\n            (click)=\"moveTransition(index, 1)\"\n          >\n            <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n          </button>\n\n          <button\n            cdsButton=\"ghost\"\n            size=\"md\"\n            [iconOnly]=\"true\"\n            [attr.aria-label]=\"'interface.delete' | translate\"\n            (click)=\"removeTransition(index)\"\n          >\n            <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n          </button>\n        </div>\n      }\n    </div>\n  } @empty {\n    <p class=\"transition-list__empty\">{{ 'formFlow.uiEditor.noTransitions' | translate }}</p>\n  }\n\n  @if (revealErrors && transitions.hasError('multipleDefaultTransitions')) {\n    <p class=\"transition-list__error\">\n      {{ 'formFlow.uiEditor.multipleDefaultTransitions' | translate }}\n    </p>\n  }\n\n  @if (!readOnly) {\n    <div>\n      <button\n        cdsButton=\"tertiary\"\n        size=\"sm\"\n        [attr.data-test-id]=\"testIds.addTransitionButton\"\n        (click)=\"addTransition()\"\n      >\n        {{ 'formFlow.uiEditor.addTransition' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  }\n</div>\n", styles: [".transition-list{display:flex;flex-direction:column;gap:var(--cds-spacing-04)}.transition-list__row{display:flex;align-items:flex-end;gap:var(--cds-spacing-04);padding:var(--cds-spacing-04);border:1px solid var(--cds-border-subtle)}.transition-list__target{flex:0 0 220px}.transition-list__condition{flex:1;margin-bottom:0}.transition-list__condition input{font-family:IBM Plex Mono,monospace}.transition-list__actions{display:flex;align-items:center}.transition-list__label{display:inline-flex;align-items:center;gap:var(--cds-spacing-02)}.transition-list__empty{color:var(--cds-text-helper);font-size:var(--cds-body-compact-01-font-size, .875rem);margin:0}.transition-list__error{color:var(--cds-text-error);font-size:var(--cds-label-01-font-size, .75rem);margin:0}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$1.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: i2$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$1.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TooltipIconModule }, { kind: "component", type: i1$2.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowTransitionListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-form-flow-transition-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        ButtonModule,
+                        DropdownModule,
+                        IconModule,
+                        InputModule,
+                        TooltipIconModule,
+                    ], 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<div class=\"transition-list\">\n  @for (transitionGroup of transitionGroups; track transitionGroup; let index = $index) {\n    <div\n      class=\"transition-list__row\"\n      [formGroup]=\"transitionGroup\"\n      [attr.data-test-id]=\"testIds.transitionRow\"\n    >\n      <div class=\"transition-list__target\">\n        <cds-dropdown\n          formControlName=\"step\"\n          itemValueKey=\"id\"\n          [invalid]=\"transitionGroup.get('step')?.invalid && revealErrors\"\n          [label]=\"targetStepLabelTemplate\"\n          [placeholder]=\"'formFlow.uiEditor.selectStep' | translate\"\n        >\n          <cds-dropdown-list [items]=\"getRowItems(transitionGroup)\"></cds-dropdown-list>\n        </cds-dropdown>\n\n        <ng-template #targetStepLabelTemplate>\n          <span class=\"transition-list__label\">\n            {{ 'formFlow.uiEditor.targetStep' | translate }}\n\n            <v-tooltip-icon\n              [tooltip]=\"'formFlow.uiEditor.fieldTooltips.targetStep' | translate\"\n            ></v-tooltip-icon>\n          </span>\n        </ng-template>\n      </div>\n\n      <cds-label class=\"transition-list__condition\">\n        <span class=\"transition-list__label\">\n          {{ 'formFlow.uiEditor.condition' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'formFlow.uiEditor.fieldTooltips.condition' | translate\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input\n          cdsText\n          formControlName=\"condition\"\n          placeholder=\"{{ 'formFlow.uiEditor.conditionPlaceholder' | translate }}\"\n        />\n      </cds-label>\n\n      @if (!readOnly) {\n        <div class=\"transition-list__actions\">\n          <button\n            cdsButton=\"ghost\"\n            size=\"md\"\n            [iconOnly]=\"true\"\n            [disabled]=\"index === 0\"\n            [attr.aria-label]=\"'formFlow.uiEditor.moveUp' | translate\"\n            (click)=\"moveTransition(index, -1)\"\n          >\n            <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n          </button>\n\n          <button\n            cdsButton=\"ghost\"\n            size=\"md\"\n            [iconOnly]=\"true\"\n            [disabled]=\"index === transitionGroups.length - 1\"\n            [attr.aria-label]=\"'formFlow.uiEditor.moveDown' | translate\"\n            (click)=\"moveTransition(index, 1)\"\n          >\n            <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n          </button>\n\n          <button\n            cdsButton=\"ghost\"\n            size=\"md\"\n            [iconOnly]=\"true\"\n            [attr.aria-label]=\"'interface.delete' | translate\"\n            (click)=\"removeTransition(index)\"\n          >\n            <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n          </button>\n        </div>\n      }\n    </div>\n  } @empty {\n    <p class=\"transition-list__empty\">{{ 'formFlow.uiEditor.noTransitions' | translate }}</p>\n  }\n\n  @if (revealErrors && transitions.hasError('multipleDefaultTransitions')) {\n    <p class=\"transition-list__error\">\n      {{ 'formFlow.uiEditor.multipleDefaultTransitions' | translate }}\n    </p>\n  }\n\n  @if (!readOnly) {\n    <div>\n      <button\n        cdsButton=\"tertiary\"\n        size=\"sm\"\n        [attr.data-test-id]=\"testIds.addTransitionButton\"\n        (click)=\"addTransition()\"\n      >\n        {{ 'formFlow.uiEditor.addTransition' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  }\n</div>\n", styles: [".transition-list{display:flex;flex-direction:column;gap:var(--cds-spacing-04)}.transition-list__row{display:flex;align-items:flex-end;gap:var(--cds-spacing-04);padding:var(--cds-spacing-04);border:1px solid var(--cds-border-subtle)}.transition-list__target{flex:0 0 220px}.transition-list__condition{flex:1;margin-bottom:0}.transition-list__condition input{font-family:IBM Plex Mono,monospace}.transition-list__actions{display:flex;align-items:center}.transition-list__label{display:inline-flex;align-items:center;gap:var(--cds-spacing-02)}.transition-list__empty{color:var(--cds-text-helper);font-size:var(--cds-body-compact-01-font-size, .875rem);margin:0}.transition-list__error{color:var(--cds-text-error);font-size:var(--cds-label-01-font-size, .75rem);margin:0}\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: FormFlowEditorFormService }, { type: i2$1.IconService }], propDecorators: { transitions: [{
+                type: Input
+            }], stepKeys: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], revealErrors: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Detail editor for a single form flow step: its key, title, type with type-specific properties,
+ * outgoing transitions and the three lifecycle expression lists.
+ */
+class FormFlowStepDetailComponent {
+    constructor(formService, iconService, translateService) {
+        this.formService = formService;
+        this.iconService = iconService;
+        this.translateService = translateService;
+        this.registry = null;
+        this.stepKeys = [];
+        this.formOptions = [];
+        this.componentOptions = [];
+        this.isStartStep = false;
+        this.readOnly = false;
+        this.duplicateKey = false;
+        /** When false the admin is still modelling and required-field errors stay hidden; a save attempt
+         * flips it to reveal them. */
+        this.revealErrors = false;
+        this.deleteStepEvent = new EventEmitter();
+        this.makeStartEvent = new EventEmitter();
+        this.stepTypeItems = [];
+        this.$showHelpModal = signal(false);
+        // The "how do expressions work" action on the inline help notifications, opening the modal that
+        // holds the full explanation.
+        this.helpActions = [];
+        this.testIds = FORM_FLOW_EDITOR_TEST_IDS;
+        // Cached per property: the Carbon dropdown resets its visual selection whenever its items array
+        // is swapped, so an array is only rebuilt when its options or its selection change.
+        this._selectItemsCache = new Map();
+        this._typeSubscription = new Subscription();
+        this.iconService.registerAll([Flag16, TrashCan16]);
+    }
+    ngOnInit() {
+        this.helpActions = [
+            {
+                text: this.translateService.instant('formFlow.uiEditor.help.button'),
+                click: () => this.$showHelpModal.set(true),
+            },
+        ];
+    }
+    ngOnChanges(changes) {
+        if (changes['stepGroup'] || changes['registry'] || changes['componentOptions']) {
+            this.buildStepTypeItems();
+        }
+        if (changes['stepGroup'] || changes['registry']) {
+            this.openTypeSubscription();
+        }
+    }
+    ngOnDestroy() {
+        this._typeSubscription.unsubscribe();
+    }
+    get propertiesGroup() {
+        return this.stepGroup.get('properties');
+    }
+    get propertyNames() {
+        return Object.keys(this.propertiesGroup.controls);
+    }
+    get transitions() {
+        return this.stepGroup.get('nextSteps');
+    }
+    getExpressions(hook) {
+        return this.stepGroup.get(hook);
+    }
+    isControlInvalid(name) {
+        const control = this.stepGroup.get(name);
+        return !!control && control.invalid && this.revealErrors;
+    }
+    getPropertyLabel(name) {
+        return translateWithFallback(this.translateService, `formFlow.uiEditor.properties.${name}`, name);
+    }
+    // The `definition` property of the built-in `form` step type references a form of the
+    // surrounding case definition or building block, so it is offered as a choice list.
+    isFormDefinitionProperty(name) {
+        return name === 'definition' && this.formOptions.length > 0;
+    }
+    getFormDefinitionItems() {
+        return this.getSelectItems('definition', this.formOptions);
+    }
+    // The `componentId` property of the built-in `custom-component` step type references an Angular
+    // component registered by the implementation, so the registered ids are offered as a choice list.
+    isCustomComponentProperty(name) {
+        return name === 'componentId' && this.componentOptions.length > 0;
+    }
+    getCustomComponentItems() {
+        return this.getSelectItems('componentId', this.componentOptions);
+    }
+    getSelectItems(propertyName, options) {
+        const value = this.propertiesGroup.get(propertyName)?.value ?? '';
+        const cached = this._selectItemsCache.get(propertyName);
+        if (cached && cached.options === options && cached.value === value) {
+            return cached.items;
+        }
+        // A value that is no longer available stays selectable, so opening an older definition never
+        // silently changes it.
+        const names = options.includes(value) || !value ? options : [...options, value];
+        const items = names.map(name => ({ content: name, id: name, selected: name === value }));
+        this._selectItemsCache.set(propertyName, { options, value, items });
+        return items;
+    }
+    buildStepTypeItems() {
+        const registryTypeNames = (this.registry?.stepTypes ?? []).map(stepType => stepType.name);
+        const currentTypeName = this.stepGroup?.get('typeName')?.value;
+        const typeNames = currentTypeName && !registryTypeNames.includes(currentTypeName)
+            ? [...registryTypeNames, currentTypeName]
+            : registryTypeNames;
+        this.stepTypeItems = typeNames.map(name => ({
+            content: name,
+            id: name,
+            selected: name === currentTypeName,
+            // `custom-component` steps need a component registered by the implementation; without any,
+            // the type cannot be configured (unless the step already uses it).
+            disabled: name === 'custom-component' &&
+                this.componentOptions.length === 0 &&
+                currentTypeName !== 'custom-component',
+        }));
+    }
+    getTypeTooltip() {
+        const tooltip = this.translateService.instant('formFlow.uiEditor.fieldTooltips.type');
+        return this.componentOptions.length === 0
+            ? `${tooltip} ${this.translateService.instant('formFlow.uiEditor.fieldTooltips.typeNoComponents')}`
+            : tooltip;
+    }
+    // Selecting another step type swaps the properties group for the controls that type needs,
+    // keeping the values of properties both types share.
+    openTypeSubscription() {
+        this._typeSubscription.unsubscribe();
+        this._typeSubscription = new Subscription();
+        if (!this.stepGroup || !this.registry)
+            return;
+        this._typeSubscription.add(this.stepGroup.get('typeName')?.valueChanges.subscribe(typeName => {
+            const currentValues = this.propertiesGroup.getRawValue();
+            this.stepGroup.setControl('properties', this.formService.buildPropertiesGroup(typeName, currentValues, this.registry));
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowStepDetailComponent, deps: [{ token: FormFlowEditorFormService }, { token: i2$1.IconService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFlowStepDetailComponent, isStandalone: true, selector: "valtimo-form-flow-step-detail", inputs: { stepGroup: "stepGroup", registry: "registry", stepKeys: "stepKeys", formOptions: "formOptions", componentOptions: "componentOptions", isStartStep: "isStartStep", readOnly: "readOnly", duplicateKey: "duplicateKey", revealErrors: "revealErrors" }, outputs: { deleteStepEvent: "deleteStepEvent", makeStartEvent: "makeStartEvent" }, usesOnChanges: true, 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<div class=\"step-detail\" [cdsLayer]=\"1\" [formGroup]=\"stepGroup\">\n  <div class=\"step-detail__header\">\n    <div class=\"step-detail__heading\">\n      <h5>{{ 'formFlow.uiEditor.stepDetails' | translate }}</h5>\n\n      @if (isStartStep) {\n        <cds-tag type=\"green\" size=\"sm\">{{ 'formFlow.uiEditor.startStep' | translate }}</cds-tag>\n      }\n    </div>\n\n    @if (!readOnly) {\n      <div class=\"step-detail__header-actions\">\n        @if (!isStartStep) {\n          <button\n            cdsButton=\"tertiary\"\n            size=\"sm\"\n            [attr.data-test-id]=\"testIds.makeStartStepButton\"\n            (click)=\"makeStartEvent.emit()\"\n          >\n            {{ 'formFlow.uiEditor.makeStartStep' | translate }}\n\n            <svg class=\"cds--btn__icon\" cdsIcon=\"flag\" size=\"16\"></svg>\n          </button>\n        }\n\n        <button\n          cdsButton=\"danger--ghost\"\n          size=\"sm\"\n          [attr.data-test-id]=\"testIds.deleteStepButton\"\n          (click)=\"deleteStepEvent.emit()\"\n        >\n          {{ 'formFlow.uiEditor.deleteStep' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n\n  <div class=\"step-detail__grid\">\n    <cds-label\n      [invalid]=\"isControlInvalid('key') || (duplicateKey && revealErrors)\"\n      [invalidText]=\"\n        duplicateKey\n          ? ('formFlow.uiEditor.duplicateKey' | translate)\n          : ('formFlow.uiEditor.required' | translate)\n      \"\n    >\n      <span class=\"step-detail__label\">\n        {{ 'formFlow.key' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'formFlow.uiEditor.fieldTooltips.key' | translate\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"key\"\n        [invalid]=\"isControlInvalid('key') || (duplicateKey && revealErrors)\"\n        [attr.data-test-id]=\"testIds.stepKeyInput\"\n        placeholder=\"{{ 'formFlow.uiEditor.keyPlaceholder' | translate }}\"\n      />\n    </cds-label>\n\n    <cds-label>\n      <span class=\"step-detail__label\">\n        {{ 'formFlow.uiEditor.title' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'formFlow.uiEditor.fieldTooltips.title' | translate\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"title\"\n        [attr.data-test-id]=\"testIds.stepTitleInput\"\n        placeholder=\"{{ 'formFlow.uiEditor.titlePlaceholder' | translate }}\"\n      />\n    </cds-label>\n\n    <div [attr.data-test-id]=\"testIds.stepTypeDropdown\">\n      <cds-dropdown formControlName=\"typeName\" itemValueKey=\"id\" [label]=\"stepTypeLabelTemplate\">\n        <cds-dropdown-list [items]=\"stepTypeItems\"></cds-dropdown-list>\n      </cds-dropdown>\n\n      <ng-template #stepTypeLabelTemplate>\n        <span class=\"step-detail__label\">\n          {{ 'formFlow.uiEditor.stepType' | translate }}\n\n          <v-tooltip-icon [tooltip]=\"getTypeTooltip()\"></v-tooltip-icon>\n        </span>\n      </ng-template>\n    </div>\n\n    <ng-container formGroupName=\"properties\">\n      @for (propertyName of propertyNames; track propertyName) {\n        @if (isFormDefinitionProperty(propertyName)) {\n          <div [attr.data-test-id]=\"testIds.stepPropertyDropdown\">\n            <cds-dropdown\n              formControlName=\"definition\"\n              itemValueKey=\"id\"\n              [invalid]=\"propertiesGroup.get('definition')?.invalid && revealErrors\"\n              [label]=\"formDefinitionLabelTemplate\"\n              [placeholder]=\"'formFlow.uiEditor.selectForm' | translate\"\n            >\n              <cds-dropdown-list [items]=\"getFormDefinitionItems()\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-template #formDefinitionLabelTemplate>\n              <span class=\"step-detail__label\">\n                {{ getPropertyLabel(propertyName) }}\n\n                <v-tooltip-icon\n                  [tooltip]=\"'formFlow.uiEditor.fieldTooltips.definition' | translate\"\n                ></v-tooltip-icon>\n              </span>\n            </ng-template>\n          </div>\n        } @else if (isCustomComponentProperty(propertyName)) {\n          <div [attr.data-test-id]=\"testIds.stepPropertyDropdown\">\n            <cds-dropdown\n              formControlName=\"componentId\"\n              itemValueKey=\"id\"\n              [invalid]=\"propertiesGroup.get('componentId')?.invalid && revealErrors\"\n              [label]=\"componentIdLabelTemplate\"\n              [placeholder]=\"'formFlow.uiEditor.selectComponent' | translate\"\n            >\n              <cds-dropdown-list [items]=\"getCustomComponentItems()\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-template #componentIdLabelTemplate>\n              <span class=\"step-detail__label\">\n                {{ getPropertyLabel(propertyName) }}\n\n                <v-tooltip-icon\n                  [tooltip]=\"'formFlow.uiEditor.fieldTooltips.componentId' | translate\"\n                ></v-tooltip-icon>\n              </span>\n            </ng-template>\n          </div>\n        } @else {\n          <cds-label\n            [invalid]=\"propertiesGroup.get(propertyName)?.invalid && revealErrors\"\n            [invalidText]=\"'formFlow.uiEditor.required' | translate\"\n          >\n            {{ getPropertyLabel(propertyName) }}\n\n            <input\n              cdsText\n              [formControlName]=\"propertyName\"\n              [invalid]=\"propertiesGroup.get(propertyName)?.invalid && revealErrors\"\n              [attr.data-test-id]=\"testIds.stepPropertyInput\"\n            />\n          </cds-label>\n        }\n      }\n    </ng-container>\n  </div>\n\n  <hr class=\"step-detail__divider\" />\n\n  <section class=\"step-detail__section\">\n    <div class=\"step-detail__section-header\">\n      <h5>{{ 'formFlow.uiEditor.navigation' | translate }}</h5>\n\n      <p class=\"step-detail__section-description\">\n        {{ 'formFlow.uiEditor.navigationDescription' | translate }}\n      </p>\n    </div>\n\n    <valtimo-form-flow-transition-list\n      [readOnly]=\"readOnly\"\n      [revealErrors]=\"revealErrors\"\n      [stepKeys]=\"stepKeys\"\n      [transitions]=\"transitions\"\n    ></valtimo-form-flow-transition-list>\n\n    <cds-actionable-notification\n      class=\"step-detail__help-notification\"\n      [notificationObj]=\"{\n        type: 'info',\n        lowContrast: true,\n        showClose: false,\n        title: 'formFlow.uiEditor.help.conditionsInlineTitle' | translate,\n        message: 'formFlow.uiEditor.help.conditionsInlineMessage' | translate,\n        actions: helpActions,\n      }\"\n    ></cds-actionable-notification>\n  </section>\n\n  <hr class=\"step-detail__divider\" />\n\n  <section class=\"step-detail__section\">\n    <div class=\"step-detail__section-header\">\n      <h5>{{ 'formFlow.uiEditor.actions' | translate }}</h5>\n\n      <p class=\"step-detail__section-description\">\n        {{ 'formFlow.uiEditor.actionsDescription' | translate }}\n      </p>\n    </div>\n\n    <cds-actionable-notification\n      class=\"step-detail__help-notification\"\n      [notificationObj]=\"{\n        type: 'info',\n        lowContrast: true,\n        showClose: false,\n        title: 'formFlow.uiEditor.help.actionsInlineTitle' | translate,\n        message: 'formFlow.uiEditor.help.actionsInlineMessage' | translate,\n        actions: helpActions,\n      }\"\n    ></cds-actionable-notification>\n\n    <valtimo-form-flow-expression-list\n      [description]=\"'formFlow.uiEditor.onOpenDescription' | translate\"\n      [expressions]=\"getExpressions('onOpen')\"\n      [label]=\"'formFlow.uiEditor.onOpen' | translate\"\n      [readOnly]=\"readOnly\"\n      [registry]=\"registry\"\n      [revealErrors]=\"revealErrors\"\n    ></valtimo-form-flow-expression-list>\n\n    <valtimo-form-flow-expression-list\n      [description]=\"'formFlow.uiEditor.onCompleteDescription' | translate\"\n      [expressions]=\"getExpressions('onComplete')\"\n      [label]=\"'formFlow.uiEditor.onComplete' | translate\"\n      [readOnly]=\"readOnly\"\n      [registry]=\"registry\"\n      [revealErrors]=\"revealErrors\"\n    ></valtimo-form-flow-expression-list>\n\n    <valtimo-form-flow-expression-list\n      [description]=\"'formFlow.uiEditor.onBackDescription' | translate\"\n      [expressions]=\"getExpressions('onBack')\"\n      [label]=\"'formFlow.uiEditor.onBack' | translate\"\n      [readOnly]=\"readOnly\"\n      [registry]=\"registry\"\n      [revealErrors]=\"revealErrors\"\n    ></valtimo-form-flow-expression-list>\n  </section>\n\n  <valtimo-form-flow-expression-help-modal\n    [open]=\"$showHelpModal()\"\n    [registry]=\"registry\"\n    (closeEvent)=\"$showHelpModal.set(false)\"\n  ></valtimo-form-flow-expression-help-modal>\n</div>\n", styles: [".step-detail{display:flex;flex-direction:column;gap:var(--cds-spacing-06)}.step-detail__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cds-spacing-05)}.step-detail__heading{display:flex;align-items:center;gap:var(--cds-spacing-03)}.step-detail__heading cds-tag{margin:0}.step-detail__header-actions{display:flex;align-items:center;gap:var(--cds-spacing-03)}.step-detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--cds-spacing-05)}.step-detail__grid cds-label{margin-bottom:0}.step-detail__divider{border:none;border-top:1px solid var(--cds-border-subtle);margin:0;width:100%}.step-detail__section{display:flex;flex-direction:column;gap:var(--cds-spacing-05)}.step-detail__section-header h5{margin:0 0 var(--cds-spacing-02) 0}.step-detail__section-description{color:var(--cds-text-secondary);font-size:var(--cds-body-compact-01-font-size, .875rem);margin:0}.step-detail__help-notification{display:block;margin:0;max-inline-size:none;max-width:none}.step-detail__label{display:inline-flex;align-items:center;gap:var(--cds-spacing-02)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$1.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: i2$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$1.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$1.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2$1.ActionableNotification, selector: "cds-actionable-notification, ibm-actionable-notification", inputs: ["notificationObj"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: TooltipIconModule }, { kind: "component", type: i1$2.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: FormFlowExpressionHelpModalComponent, selector: "valtimo-form-flow-expression-help-modal", inputs: ["open", "registry"], outputs: ["closeEvent"] }, { kind: "component", type: FormFlowExpressionListComponent, selector: "valtimo-form-flow-expression-list", inputs: ["expressions", "label", "description", "readOnly", "revealErrors", "registry"] }, { kind: "component", type: FormFlowTransitionListComponent, selector: "valtimo-form-flow-transition-list", inputs: ["transitions", "stepKeys", "readOnly", "revealErrors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowStepDetailComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-form-flow-step-detail', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        ButtonModule,
+                        DropdownModule,
+                        IconModule,
+                        InputModule,
+                        LayerModule,
+                        NotificationModule,
+                        TagModule,
+                        TooltipIconModule,
+                        FormFlowExpressionHelpModalComponent,
+                        FormFlowExpressionListComponent,
+                        FormFlowTransitionListComponent,
+                    ], 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<div class=\"step-detail\" [cdsLayer]=\"1\" [formGroup]=\"stepGroup\">\n  <div class=\"step-detail__header\">\n    <div class=\"step-detail__heading\">\n      <h5>{{ 'formFlow.uiEditor.stepDetails' | translate }}</h5>\n\n      @if (isStartStep) {\n        <cds-tag type=\"green\" size=\"sm\">{{ 'formFlow.uiEditor.startStep' | translate }}</cds-tag>\n      }\n    </div>\n\n    @if (!readOnly) {\n      <div class=\"step-detail__header-actions\">\n        @if (!isStartStep) {\n          <button\n            cdsButton=\"tertiary\"\n            size=\"sm\"\n            [attr.data-test-id]=\"testIds.makeStartStepButton\"\n            (click)=\"makeStartEvent.emit()\"\n          >\n            {{ 'formFlow.uiEditor.makeStartStep' | translate }}\n\n            <svg class=\"cds--btn__icon\" cdsIcon=\"flag\" size=\"16\"></svg>\n          </button>\n        }\n\n        <button\n          cdsButton=\"danger--ghost\"\n          size=\"sm\"\n          [attr.data-test-id]=\"testIds.deleteStepButton\"\n          (click)=\"deleteStepEvent.emit()\"\n        >\n          {{ 'formFlow.uiEditor.deleteStep' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n\n  <div class=\"step-detail__grid\">\n    <cds-label\n      [invalid]=\"isControlInvalid('key') || (duplicateKey && revealErrors)\"\n      [invalidText]=\"\n        duplicateKey\n          ? ('formFlow.uiEditor.duplicateKey' | translate)\n          : ('formFlow.uiEditor.required' | translate)\n      \"\n    >\n      <span class=\"step-detail__label\">\n        {{ 'formFlow.key' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'formFlow.uiEditor.fieldTooltips.key' | translate\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"key\"\n        [invalid]=\"isControlInvalid('key') || (duplicateKey && revealErrors)\"\n        [attr.data-test-id]=\"testIds.stepKeyInput\"\n        placeholder=\"{{ 'formFlow.uiEditor.keyPlaceholder' | translate }}\"\n      />\n    </cds-label>\n\n    <cds-label>\n      <span class=\"step-detail__label\">\n        {{ 'formFlow.uiEditor.title' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'formFlow.uiEditor.fieldTooltips.title' | translate\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"title\"\n        [attr.data-test-id]=\"testIds.stepTitleInput\"\n        placeholder=\"{{ 'formFlow.uiEditor.titlePlaceholder' | translate }}\"\n      />\n    </cds-label>\n\n    <div [attr.data-test-id]=\"testIds.stepTypeDropdown\">\n      <cds-dropdown formControlName=\"typeName\" itemValueKey=\"id\" [label]=\"stepTypeLabelTemplate\">\n        <cds-dropdown-list [items]=\"stepTypeItems\"></cds-dropdown-list>\n      </cds-dropdown>\n\n      <ng-template #stepTypeLabelTemplate>\n        <span class=\"step-detail__label\">\n          {{ 'formFlow.uiEditor.stepType' | translate }}\n\n          <v-tooltip-icon [tooltip]=\"getTypeTooltip()\"></v-tooltip-icon>\n        </span>\n      </ng-template>\n    </div>\n\n    <ng-container formGroupName=\"properties\">\n      @for (propertyName of propertyNames; track propertyName) {\n        @if (isFormDefinitionProperty(propertyName)) {\n          <div [attr.data-test-id]=\"testIds.stepPropertyDropdown\">\n            <cds-dropdown\n              formControlName=\"definition\"\n              itemValueKey=\"id\"\n              [invalid]=\"propertiesGroup.get('definition')?.invalid && revealErrors\"\n              [label]=\"formDefinitionLabelTemplate\"\n              [placeholder]=\"'formFlow.uiEditor.selectForm' | translate\"\n            >\n              <cds-dropdown-list [items]=\"getFormDefinitionItems()\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-template #formDefinitionLabelTemplate>\n              <span class=\"step-detail__label\">\n                {{ getPropertyLabel(propertyName) }}\n\n                <v-tooltip-icon\n                  [tooltip]=\"'formFlow.uiEditor.fieldTooltips.definition' | translate\"\n                ></v-tooltip-icon>\n              </span>\n            </ng-template>\n          </div>\n        } @else if (isCustomComponentProperty(propertyName)) {\n          <div [attr.data-test-id]=\"testIds.stepPropertyDropdown\">\n            <cds-dropdown\n              formControlName=\"componentId\"\n              itemValueKey=\"id\"\n              [invalid]=\"propertiesGroup.get('componentId')?.invalid && revealErrors\"\n              [label]=\"componentIdLabelTemplate\"\n              [placeholder]=\"'formFlow.uiEditor.selectComponent' | translate\"\n            >\n              <cds-dropdown-list [items]=\"getCustomComponentItems()\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-template #componentIdLabelTemplate>\n              <span class=\"step-detail__label\">\n                {{ getPropertyLabel(propertyName) }}\n\n                <v-tooltip-icon\n                  [tooltip]=\"'formFlow.uiEditor.fieldTooltips.componentId' | translate\"\n                ></v-tooltip-icon>\n              </span>\n            </ng-template>\n          </div>\n        } @else {\n          <cds-label\n            [invalid]=\"propertiesGroup.get(propertyName)?.invalid && revealErrors\"\n            [invalidText]=\"'formFlow.uiEditor.required' | translate\"\n          >\n            {{ getPropertyLabel(propertyName) }}\n\n            <input\n              cdsText\n              [formControlName]=\"propertyName\"\n              [invalid]=\"propertiesGroup.get(propertyName)?.invalid && revealErrors\"\n              [attr.data-test-id]=\"testIds.stepPropertyInput\"\n            />\n          </cds-label>\n        }\n      }\n    </ng-container>\n  </div>\n\n  <hr class=\"step-detail__divider\" />\n\n  <section class=\"step-detail__section\">\n    <div class=\"step-detail__section-header\">\n      <h5>{{ 'formFlow.uiEditor.navigation' | translate }}</h5>\n\n      <p class=\"step-detail__section-description\">\n        {{ 'formFlow.uiEditor.navigationDescription' | translate }}\n      </p>\n    </div>\n\n    <valtimo-form-flow-transition-list\n      [readOnly]=\"readOnly\"\n      [revealErrors]=\"revealErrors\"\n      [stepKeys]=\"stepKeys\"\n      [transitions]=\"transitions\"\n    ></valtimo-form-flow-transition-list>\n\n    <cds-actionable-notification\n      class=\"step-detail__help-notification\"\n      [notificationObj]=\"{\n        type: 'info',\n        lowContrast: true,\n        showClose: false,\n        title: 'formFlow.uiEditor.help.conditionsInlineTitle' | translate,\n        message: 'formFlow.uiEditor.help.conditionsInlineMessage' | translate,\n        actions: helpActions,\n      }\"\n    ></cds-actionable-notification>\n  </section>\n\n  <hr class=\"step-detail__divider\" />\n\n  <section class=\"step-detail__section\">\n    <div class=\"step-detail__section-header\">\n      <h5>{{ 'formFlow.uiEditor.actions' | translate }}</h5>\n\n      <p class=\"step-detail__section-description\">\n        {{ 'formFlow.uiEditor.actionsDescription' | translate }}\n      </p>\n    </div>\n\n    <cds-actionable-notification\n      class=\"step-detail__help-notification\"\n      [notificationObj]=\"{\n        type: 'info',\n        lowContrast: true,\n        showClose: false,\n        title: 'formFlow.uiEditor.help.actionsInlineTitle' | translate,\n        message: 'formFlow.uiEditor.help.actionsInlineMessage' | translate,\n        actions: helpActions,\n      }\"\n    ></cds-actionable-notification>\n\n    <valtimo-form-flow-expression-list\n      [description]=\"'formFlow.uiEditor.onOpenDescription' | translate\"\n      [expressions]=\"getExpressions('onOpen')\"\n      [label]=\"'formFlow.uiEditor.onOpen' | translate\"\n      [readOnly]=\"readOnly\"\n      [registry]=\"registry\"\n      [revealErrors]=\"revealErrors\"\n    ></valtimo-form-flow-expression-list>\n\n    <valtimo-form-flow-expression-list\n      [description]=\"'formFlow.uiEditor.onCompleteDescription' | translate\"\n      [expressions]=\"getExpressions('onComplete')\"\n      [label]=\"'formFlow.uiEditor.onComplete' | translate\"\n      [readOnly]=\"readOnly\"\n      [registry]=\"registry\"\n      [revealErrors]=\"revealErrors\"\n    ></valtimo-form-flow-expression-list>\n\n    <valtimo-form-flow-expression-list\n      [description]=\"'formFlow.uiEditor.onBackDescription' | translate\"\n      [expressions]=\"getExpressions('onBack')\"\n      [label]=\"'formFlow.uiEditor.onBack' | translate\"\n      [readOnly]=\"readOnly\"\n      [registry]=\"registry\"\n      [revealErrors]=\"revealErrors\"\n    ></valtimo-form-flow-expression-list>\n  </section>\n\n  <valtimo-form-flow-expression-help-modal\n    [open]=\"$showHelpModal()\"\n    [registry]=\"registry\"\n    (closeEvent)=\"$showHelpModal.set(false)\"\n  ></valtimo-form-flow-expression-help-modal>\n</div>\n", styles: [".step-detail{display:flex;flex-direction:column;gap:var(--cds-spacing-06)}.step-detail__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cds-spacing-05)}.step-detail__heading{display:flex;align-items:center;gap:var(--cds-spacing-03)}.step-detail__heading cds-tag{margin:0}.step-detail__header-actions{display:flex;align-items:center;gap:var(--cds-spacing-03)}.step-detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--cds-spacing-05)}.step-detail__grid cds-label{margin-bottom:0}.step-detail__divider{border:none;border-top:1px solid var(--cds-border-subtle);margin:0;width:100%}.step-detail__section{display:flex;flex-direction:column;gap:var(--cds-spacing-05)}.step-detail__section-header h5{margin:0 0 var(--cds-spacing-02) 0}.step-detail__section-description{color:var(--cds-text-secondary);font-size:var(--cds-body-compact-01-font-size, .875rem);margin:0}.step-detail__help-notification{display:block;margin:0;max-inline-size:none;max-width:none}.step-detail__label{display:inline-flex;align-items:center;gap:var(--cds-spacing-02)}\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: FormFlowEditorFormService }, { type: i2$1.IconService }, { type: i4.TranslateService }], propDecorators: { stepGroup: [{
+                type: Input
+            }], registry: [{
+                type: Input
+            }], stepKeys: [{
+                type: Input
+            }], formOptions: [{
+                type: Input
+            }], componentOptions: [{
+                type: Input
+            }], isStartStep: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], duplicateKey: [{
+                type: Input
+            }], revealErrors: [{
+                type: Input
+            }], deleteStepEvent: [{
+                type: Output
+            }], makeStartEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/** Clickable overview of all steps in the flow, ordered as defined, with the start step first. */
+class FormFlowStepListComponent {
+    constructor(iconService) {
+        this.iconService = iconService;
+        this.steps = [];
+        this.selectedIndex = null;
+        this.readOnly = false;
+        this.selectEvent = new EventEmitter();
+        this.addEvent = new EventEmitter();
+        this.testIds = FORM_FLOW_EDITOR_TEST_IDS;
+        this.iconService.registerAll([Add16, WarningFilled16]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowStepListComponent, deps: [{ token: i2$1.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFlowStepListComponent, isStandalone: true, selector: "valtimo-form-flow-step-list", inputs: { steps: "steps", selectedIndex: "selectedIndex", readOnly: "readOnly" }, outputs: { selectEvent: "selectEvent", addEvent: "addEvent" }, 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<div class=\"step-list__header\">\n  <span class=\"step-list__title\">{{ 'formFlow.uiEditor.stepsTitle' | translate }}</span>\n\n  @if (!readOnly) {\n    <button\n      cdsButton=\"primary\"\n      size=\"sm\"\n      [attr.data-test-id]=\"testIds.addStepButton\"\n      (click)=\"addEvent.emit()\"\n    >\n      {{ 'formFlow.uiEditor.addStep' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  }\n</div>\n\n<ul class=\"step-list__list\" [attr.data-test-id]=\"testIds.stepList\">\n  @for (step of steps; track $index) {\n    <li class=\"step-list__list-item\">\n      <button\n        class=\"step-list__item\"\n        [class.step-list__item--selected]=\"selectedIndex === $index\"\n        [attr.data-test-id]=\"testIds.stepListItem\"\n        type=\"button\"\n        (click)=\"selectEvent.emit($index)\"\n      >\n        <span class=\"step-list__item-heading\">\n          <span class=\"step-list__item-key\" [title]=\"step.key\">{{ step.key }}</span>\n\n          @if (step.invalid) {\n            <svg\n              class=\"step-list__item-warning\"\n              cdsIcon=\"warning--filled\"\n              size=\"16\"\n              [attr.aria-label]=\"'formFlow.uiEditor.stepInvalid' | translate\"\n            ></svg>\n          }\n        </span>\n\n        @if (step.title) {\n          <span class=\"step-list__item-title\">{{ step.title }}</span>\n        }\n\n        <span class=\"step-list__item-tags\">\n          @if (step.isStart) {\n            <cds-tag type=\"green\" size=\"sm\">{{\n              'formFlow.uiEditor.startStep' | translate\n            }}</cds-tag>\n          }\n\n          <cds-tag type=\"blue\" size=\"sm\">{{ step.typeName }}</cds-tag>\n        </span>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.step-list__header{align-items:center;border-bottom:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex:0 0 auto;justify-content:space-between;padding:12px}.step-list__title{color:var(--cds-text-secondary, #525252);font-size:14px;line-height:24px;font-weight:600}.step-list__list{flex:1 1 auto;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:0}.step-list__list-item{margin:0}.step-list__item{background:transparent;border:0;border-left:3px solid transparent;cursor:pointer;display:flex;flex-direction:column;gap:.375rem;padding:.75rem 1rem;text-align:left;width:100%}.step-list__item:hover{background:var(--cds-layer-hover-01, #e8e8e8)}.step-list__item:focus-visible{outline:2px solid var(--cds-focus, #0f62fe);outline-offset:-2px}.step-list__item--selected{background:var(--cds-layer-selected-01, #e0e0e0);border-left-color:var(--cds-border-interactive, #0f62fe)}.step-list__item--selected:hover{background:var(--cds-layer-selected-hover-01, #d1d1d1)}.step-list__item-heading{align-items:center;display:flex;gap:.5rem;justify-content:space-between;max-width:100%}.step-list__item-key{color:var(--cds-text-primary, #161616);font-size:.875rem;font-weight:600;line-height:1.29;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-list__item-warning{fill:var(--cds-support-error, #da1e28);flex-shrink:0;height:1rem;width:1rem}.step-list__item-title{color:var(--cds-text-secondary, #525252);font-size:.75rem;line-height:1.34}.step-list__item-tags{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.step-list__item-tags ::ng-deep .cds--tag{margin:0;max-width:none;box-shadow:0 0 0 1px 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowStepListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-form-flow-step-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule, ButtonModule, IconModule, TagModule], 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<div class=\"step-list__header\">\n  <span class=\"step-list__title\">{{ 'formFlow.uiEditor.stepsTitle' | translate }}</span>\n\n  @if (!readOnly) {\n    <button\n      cdsButton=\"primary\"\n      size=\"sm\"\n      [attr.data-test-id]=\"testIds.addStepButton\"\n      (click)=\"addEvent.emit()\"\n    >\n      {{ 'formFlow.uiEditor.addStep' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  }\n</div>\n\n<ul class=\"step-list__list\" [attr.data-test-id]=\"testIds.stepList\">\n  @for (step of steps; track $index) {\n    <li class=\"step-list__list-item\">\n      <button\n        class=\"step-list__item\"\n        [class.step-list__item--selected]=\"selectedIndex === $index\"\n        [attr.data-test-id]=\"testIds.stepListItem\"\n        type=\"button\"\n        (click)=\"selectEvent.emit($index)\"\n      >\n        <span class=\"step-list__item-heading\">\n          <span class=\"step-list__item-key\" [title]=\"step.key\">{{ step.key }}</span>\n\n          @if (step.invalid) {\n            <svg\n              class=\"step-list__item-warning\"\n              cdsIcon=\"warning--filled\"\n              size=\"16\"\n              [attr.aria-label]=\"'formFlow.uiEditor.stepInvalid' | translate\"\n            ></svg>\n          }\n        </span>\n\n        @if (step.title) {\n          <span class=\"step-list__item-title\">{{ step.title }}</span>\n        }\n\n        <span class=\"step-list__item-tags\">\n          @if (step.isStart) {\n            <cds-tag type=\"green\" size=\"sm\">{{\n              'formFlow.uiEditor.startStep' | translate\n            }}</cds-tag>\n          }\n\n          <cds-tag type=\"blue\" size=\"sm\">{{ step.typeName }}</cds-tag>\n        </span>\n      </button>\n    </li>\n  }\n</ul>\n", styles: [":host{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.step-list__header{align-items:center;border-bottom:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex:0 0 auto;justify-content:space-between;padding:12px}.step-list__title{color:var(--cds-text-secondary, #525252);font-size:14px;line-height:24px;font-weight:600}.step-list__list{flex:1 1 auto;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:0}.step-list__list-item{margin:0}.step-list__item{background:transparent;border:0;border-left:3px solid transparent;cursor:pointer;display:flex;flex-direction:column;gap:.375rem;padding:.75rem 1rem;text-align:left;width:100%}.step-list__item:hover{background:var(--cds-layer-hover-01, #e8e8e8)}.step-list__item:focus-visible{outline:2px solid var(--cds-focus, #0f62fe);outline-offset:-2px}.step-list__item--selected{background:var(--cds-layer-selected-01, #e0e0e0);border-left-color:var(--cds-border-interactive, #0f62fe)}.step-list__item--selected:hover{background:var(--cds-layer-selected-hover-01, #d1d1d1)}.step-list__item-heading{align-items:center;display:flex;gap:.5rem;justify-content:space-between;max-width:100%}.step-list__item-key{color:var(--cds-text-primary, #161616);font-size:.875rem;font-weight:600;line-height:1.29;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-list__item-warning{fill:var(--cds-support-error, #da1e28);flex-shrink:0;height:1rem;width:1rem}.step-list__item-title{color:var(--cds-text-secondary, #525252);font-size:.75rem;line-height:1.34}.step-list__item-tags{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.step-list__item-tags ::ng-deep .cds--tag{margin:0;max-width:none;box-shadow:0 0 0 1px 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: i2$1.IconService }], propDecorators: { steps: [{
+                type: Input
+            }], selectedIndex: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], selectEvent: [{
+                type: Output
+            }], addEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * The visual form flow editor. Renders the definition as a step list with a detail panel and emits
+ * the modified definition as JSON through the same contract as the JSON editor tab, so the
+ * surrounding editor page treats both tabs identically.
+ */
+class FormFlowUiEditorTabComponent {
+    constructor(formService, formFlowService, formFlowComponentService, formManagementService, route, translateService) {
+        this.formService = formService;
+        this.formFlowService = formFlowService;
+        this.formFlowComponentService = formFlowComponentService;
+        this.formManagementService = formManagementService;
+        this.route = route;
+        this.translateService = translateService;
+        this.model = null;
+        this.readOnly = false;
+        /** The parent's save-attempt state: while false the admin is still modelling and no validation
+         * errors are shown; a save attempt flips it and reveals them. */
+        this.revealErrors = false;
+        this.validEvent = new EventEmitter();
+        this.valueChangeEvent = new EventEmitter();
+        this.form = null;
+        this.registry = null;
+        this.$selectedIndex = signal(null);
+        this.$stepListItems = signal([]);
+        // Only replaced when the keys themselves change: the Carbon dropdown resets its visual
+        // selection whenever its items array is swapped, so a stable reference prevents flicker while
+        // typing in unrelated fields.
+        this.$stepKeys = signal([]);
+        this.$formOptions = signal([]);
+        this.$componentOptions = signal([]);
+        this.$definitionErrors = signal([]);
+        this.$parseFailed = signal(false);
+        this.testIds = FORM_FLOW_EDITOR_TEST_IDS;
+        this._definition = null;
+        this._definitionKey = '';
+        this._previousStepKeys = [];
+        this._formSubscriptions = new Subscription();
+        this._subscriptions = new Subscription();
+        this._subscriptions.add(this.formFlowService.getFormFlowRegistry().subscribe(registry => {
+            this.registry = registry;
+            this.buildForm();
+        }));
+        // The custom Angular components an implementation has registered for `custom-component`
+        // steps. The editor offers their ids as choices.
+        this._subscriptions.add(this.formFlowComponentService.supportedComponents$
+            .pipe(take(1))
+            .subscribe(components => this.$componentOptions.set(components.map(component => component.id).sort())));
+        this.loadFormOptions();
+    }
+    ngOnChanges(changes) {
+        if (changes['model']) {
+            this.parseModel();
+            this.buildForm();
+        }
+        if (changes['readOnly'] && !changes['readOnly'].firstChange) {
+            this.applyReadOnly();
+        }
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+        this._formSubscriptions.unsubscribe();
+    }
+    get selectedStepGroup() {
+        const index = this.$selectedIndex();
+        if (this.form === null || index === null)
+            return null;
+        return this.stepsArray.controls[index] ?? null;
+    }
+    isSelectedKeyDuplicate() {
+        const index = this.$selectedIndex();
+        if (index === null)
+            return false;
+        const keys = this.stepsArray.controls.map(stepGroup => stepGroup.get('key')?.value);
+        return keys.filter(key => key === keys[index]).length > 1;
+    }
+    isSelectedStepStart() {
+        return (!!this.selectedStepGroup &&
+            this.selectedStepGroup.get('key')?.value === this.form?.get('startStep')?.value);
+    }
+    onMakeStartStep() {
+        const key = this.selectedStepGroup?.get('key')?.value;
+        if (key) {
+            this.form?.get('startStep')?.setValue(key);
+            this.form?.get('startStep')?.markAsDirty();
+        }
+    }
+    onSelectStep(index) {
+        this.$selectedIndex.set(index);
+    }
+    onAddStep() {
+        if (!this.form || !this.registry)
+            return;
+        const existingKeys = this.stepsArray.controls.map(stepGroup => stepGroup.get('key')?.value);
+        this.stepsArray.push(this.formService.buildNewStepGroup(existingKeys, this.registry));
+        this.stepsArray.markAsDirty();
+        this.$selectedIndex.set(this.stepsArray.length - 1);
+    }
+    onDeleteStep() {
+        const index = this.$selectedIndex();
+        if (index === null || !this.form)
+            return;
+        const deletedKey = this.stepsArray.at(index).get('key')?.value;
+        this.stepsArray.removeAt(index);
+        this.stepsArray.markAsDirty();
+        // Deleting the start step promotes the first remaining step, so the definition stays valid.
+        const startStepControl = this.form.get('startStep');
+        if (startStepControl?.value === deletedKey) {
+            startStepControl.setValue(this.stepsArray.at(0)?.get('key')?.value ?? '');
+        }
+        if (this.stepsArray.length === 0) {
+            this.$selectedIndex.set(null);
+        }
+        else {
+            this.$selectedIndex.set(Math.min(index, this.stepsArray.length - 1));
+        }
+    }
+    get stepsArray() {
+        return this.formService.getStepsArray(this.form);
+    }
+    parseModel() {
+        this._definition = null;
+        this.$parseFailed.set(false);
+        if (!this.model?.value)
+            return;
+        try {
+            this._definition = JSON.parse(this.model.value);
+            this._definitionKey = this._definition.key;
+        }
+        catch {
+            this.$parseFailed.set(true);
+        }
+    }
+    buildForm() {
+        if (!this._definition || !this.registry)
+            return;
+        this._formSubscriptions.unsubscribe();
+        this._formSubscriptions = new Subscription();
+        this.form = this.formService.buildDefinitionForm(this._definition, this.registry);
+        this._previousStepKeys = this.currentStepKeys();
+        this.applyReadOnly();
+        this.selectInitialStep();
+        this.refreshDerivedState();
+        // The initial emission is the container's clean baseline; every change after that re-emits the
+        // serialized definition and its validity, mirroring the JSON editor tab.
+        this.emitState();
+        // Validity only changes together with values (validators run on value changes and the
+        // readOnly enable/disable path suppresses events), so valueChanges alone keeps every derived
+        // signal fresh.
+        this._formSubscriptions.add(this.form.valueChanges.subscribe(() => {
+            this.trackStepKeyRenames();
+            this.refreshDerivedState();
+            this.emitState();
+        }));
+    }
+    selectInitialStep() {
+        const startStep = this._definition?.startStep;
+        const startIndex = (this._definition?.steps ?? []).findIndex(step => step.key === startStep);
+        if ((this._definition?.steps ?? []).length === 0) {
+            this.$selectedIndex.set(null);
+            return;
+        }
+        this.$selectedIndex.set(startIndex >= 0 ? startIndex : 0);
+    }
+    applyReadOnly() {
+        if (!this.form)
+            return;
+        if (this.readOnly) {
+            this.form.disable({ emitEvent: false });
+        }
+        else {
+            this.form.enable({ emitEvent: false });
+        }
+    }
+    // Renaming a step key rewrites the start step and every transition that targeted the old key, so
+    // the definition never breaks while typing a new key.
+    trackStepKeyRenames() {
+        const currentKeys = this.currentStepKeys();
+        if (currentKeys.length === this._previousStepKeys.length) {
+            const changedIndices = currentKeys
+                .map((key, index) => (key !== this._previousStepKeys[index] ? index : -1))
+                .filter(index => index !== -1);
+            if (changedIndices.length === 1) {
+                const index = changedIndices[0];
+                this.formService.renameStepReferences(this.form, this._previousStepKeys[index], currentKeys[index]);
+            }
+        }
+        this._previousStepKeys = currentKeys;
+    }
+    currentStepKeys() {
+        return this.stepsArray.controls.map(stepGroup => stepGroup.get('key')?.value ?? '');
+    }
+    refreshDerivedState() {
+        if (!this.form)
+            return;
+        const startStep = this.form.get('startStep')?.value;
+        const keys = this.currentStepKeys();
+        this.$stepListItems.set(this.stepsArray.controls.map(stepGroup => ({
+            key: stepGroup.get('key')?.value ?? '',
+            title: stepGroup.get('title')?.value ?? '',
+            typeName: stepGroup.get('typeName')?.value ?? '',
+            isStart: stepGroup.get('key')?.value === startStep,
+            invalid: stepGroup.invalid,
+        })));
+        if (!this.arraysEqual(keys, this.$stepKeys())) {
+            this.$stepKeys.set(keys);
+        }
+        this.$definitionErrors.set(this.collectDefinitionErrors());
+    }
+    // Loads the form definitions of the surrounding case definition or building block, so the
+    // `form` step type can offer them as choices instead of a free-text form key.
+    loadFormOptions() {
+        this._subscriptions.add(getContextObservable(this.route)
+            .pipe(take(1), switchMap(context => {
+            if (context === 'buildingBlock') {
+                return getBuildingBlockManagementRouteParams(this.route).pipe(take(1), switchMap(params => this.formManagementService.queryFormDefinitionsBuildingBlock(params?.buildingBlockDefinitionKey ?? '', params?.buildingBlockDefinitionVersionTag ?? '', { size: 1000 })), map(page => page.content));
+            }
+            return getCaseManagementRouteParams(this.route).pipe(take(1), switchMap(params => this.formManagementService.queryFormDefinitionsCase(params?.caseDefinitionKey ?? '', params?.caseDefinitionVersionTag ?? '', { size: 1000 })), map(response => response.content));
+        }), map(formDefinitions => [...new Set(formDefinitions.map(definition => definition.name).filter(Boolean))].sort()), catchError(() => of([])))
+            .subscribe(names => this.$formOptions.set(names)));
+    }
+    arraysEqual(left, right) {
+        return left.length === right.length && left.every((value, index) => value === right[index]);
+    }
+    collectDefinitionErrors() {
+        const errors = [];
+        const formErrors = this.form?.errors ?? {};
+        const stepErrors = this.form?.get('steps')?.errors ?? {};
+        if (stepErrors['duplicateStepKeys']) {
+            errors.push(this.translateService.instant('formFlow.uiEditor.errors.duplicateKeys', {
+                keys: stepErrors['duplicateStepKeys'].keys.join(', '),
+            }));
+        }
+        if (formErrors['startStepMissing']) {
+            errors.push(this.translateService.instant('formFlow.uiEditor.errors.startStepMissing', {
+                startStep: formErrors['startStepMissing'].startStep,
+            }));
+        }
+        if (formErrors['unknownTransitionTargets']) {
+            errors.push(this.translateService.instant('formFlow.uiEditor.errors.unknownTargets', {
+                targets: formErrors['unknownTransitionTargets'].targets.join(', '),
+            }));
+        }
+        // A step can be invalid on its own — a missing type, an unselected form, an empty transition
+        // target or expression — which the definition-level checks above never name. `invalid` (not
+        // `!valid`) skips disabled controls, so a read-only flow is never reported as incomplete; this
+        // mirrors the warning icon shown per step. The notification is only *shown* after a save attempt
+        // (see `revealErrors` in the template), so collecting these stays quiet while modelling.
+        this.form?.get('steps')?.controls.forEach((stepGroup, index) => {
+            if (!stepGroup.invalid)
+                return;
+            const key = (stepGroup.get('key')?.value ?? '').trim();
+            errors.push(this.translateService.instant('formFlow.uiEditor.errors.stepIncomplete', {
+                step: key || `#${index + 1}`,
+            }));
+        });
+        return errors;
+    }
+    emitState() {
+        if (!this.form)
+            return;
+        const definition = this.formService.serialize(this.form, this._definitionKey);
+        this.valueChangeEvent.emit(JSON.stringify(definition));
+        this.validEvent.emit(this.form.valid);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowUiEditorTabComponent, deps: [{ token: FormFlowEditorFormService }, { token: FormFlowService }, { token: FormFlowComponentService }, { token: i4$1.FormManagementService }, { token: i3.ActivatedRoute }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFlowUiEditorTabComponent, isStandalone: true, selector: "valtimo-form-flow-ui-editor-tab", inputs: { model: "model", readOnly: "readOnly", revealErrors: "revealErrors" }, outputs: { validEvent: "validEvent", valueChangeEvent: "valueChangeEvent" }, providers: [FormFlowEditorFormService], usesOnChanges: true, 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@if ($parseFailed()) {\n  <div class=\"ui-editor__notification\">\n    <cds-inline-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'formFlow.uiEditor.parseFailedTitle' | translate,\n        message: 'formFlow.uiEditor.parseFailedMessage' | translate,\n        showClose: false,\n        lowContrast: true,\n      }\"\n    ></cds-inline-notification>\n  </div>\n} @else if (form && registry) {\n  <div [formGroup]=\"form\">\n    <!-- fitPage sizes this container to the viewport; the notification, sidebar and panel all live\n         inside it, so toggling the notification reflows the body instead of shifting the container's\n         top offset (which fitPage only re-measures on a header change or resize). -->\n    <div class=\"ui-editor\" fitPage>\n      @if (revealErrors && $definitionErrors().length) {\n        <div class=\"ui-editor__notification\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'error',\n              title: 'formFlow.uiEditor.errors.title' | translate,\n              message: $definitionErrors().join(' '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </div>\n      }\n\n      <div class=\"ui-editor__body\">\n        <aside class=\"ui-editor__sidebar\">\n          <valtimo-form-flow-step-list\n            [readOnly]=\"readOnly\"\n            [selectedIndex]=\"$selectedIndex()\"\n            [steps]=\"$stepListItems()\"\n            (addEvent)=\"onAddStep()\"\n            (selectEvent)=\"onSelectStep($event)\"\n          ></valtimo-form-flow-step-list>\n        </aside>\n\n        <div class=\"ui-editor__panel\">\n          @if (selectedStepGroup; as stepGroup) {\n            <valtimo-form-flow-step-detail\n              [componentOptions]=\"$componentOptions()\"\n              [duplicateKey]=\"isSelectedKeyDuplicate()\"\n              [formOptions]=\"$formOptions()\"\n              [isStartStep]=\"isSelectedStepStart()\"\n              [readOnly]=\"readOnly\"\n              [registry]=\"registry\"\n              [revealErrors]=\"revealErrors\"\n              [stepGroup]=\"stepGroup\"\n              [stepKeys]=\"$stepKeys()\"\n              (deleteStepEvent)=\"onDeleteStep()\"\n              (makeStartEvent)=\"onMakeStartStep()\"\n            ></valtimo-form-flow-step-detail>\n          } @else {\n            <div class=\"ui-editor__empty\">\n              <h5 class=\"ui-editor__empty-title\">\n                {{ 'formFlow.uiEditor.noStepsTitle' | translate }}\n              </h5>\n\n              <p class=\"ui-editor__empty-message\">\n                {{ 'formFlow.uiEditor.noStepsDescription' | translate }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"ui-editor__loading\">\n    <cds-loading></cds-loading>\n  </div>\n}\n", styles: [".ui-editor{display:flex;flex-direction:column;border:1px solid var(--cds-border-subtle, #e0e0e0);overflow:hidden}.ui-editor__body{display:flex;flex:1 1 auto;min-height:0}.ui-editor__sidebar{background:var(--cds-layer-01, #f4f4f4);border-right:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex:0 0 22rem;flex-direction:column;min-height:0}.ui-editor__panel{flex:1 1 auto;min-width:0;overflow-y:auto;padding:1rem 1.5rem 1.5rem}.ui-editor__notification{flex:0 0 auto}.ui-editor__notification cds-inline-notification{display:block;max-width:none;margin:0}.ui-editor__notification ::ng-deep .cds--inline-notification--low-contrast:before{border-width:0 0 1px 0}.ui-editor__empty{align-items:center;border:1px dashed var(--cds-border-strong, #8d8d8d);display:flex;flex-direction:column;gap:.5rem;margin:2rem auto;max-width:30rem;padding:2rem;text-align:center}.ui-editor__empty-title{margin:0}.ui-editor__empty-message{color:var(--cds-text-secondary, #525252);margin:0 0 .5rem}.ui-editor__loading{display:flex;width:100%;justify-content:center;padding:var(--cds-spacing-07)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow", "bottomMargin"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i2$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2$1.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "component", type: FormFlowStepDetailComponent, selector: "valtimo-form-flow-step-detail", inputs: ["stepGroup", "registry", "stepKeys", "formOptions", "componentOptions", "isStartStep", "readOnly", "duplicateKey", "revealErrors"], outputs: ["deleteStepEvent", "makeStartEvent"] }, { kind: "component", type: FormFlowStepListComponent, selector: "valtimo-form-flow-step-list", inputs: ["steps", "selectedIndex", "readOnly"], outputs: ["selectEvent", "addEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowUiEditorTabComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-form-flow-ui-editor-tab', changeDetection: ChangeDetectionStrategy.OnPush, providers: [FormFlowEditorFormService], imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        FitPageDirective,
+                        LoadingModule,
+                        NotificationModule,
+                        FormFlowStepDetailComponent,
+                        FormFlowStepListComponent,
+                    ], 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@if ($parseFailed()) {\n  <div class=\"ui-editor__notification\">\n    <cds-inline-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'formFlow.uiEditor.parseFailedTitle' | translate,\n        message: 'formFlow.uiEditor.parseFailedMessage' | translate,\n        showClose: false,\n        lowContrast: true,\n      }\"\n    ></cds-inline-notification>\n  </div>\n} @else if (form && registry) {\n  <div [formGroup]=\"form\">\n    <!-- fitPage sizes this container to the viewport; the notification, sidebar and panel all live\n         inside it, so toggling the notification reflows the body instead of shifting the container's\n         top offset (which fitPage only re-measures on a header change or resize). -->\n    <div class=\"ui-editor\" fitPage>\n      @if (revealErrors && $definitionErrors().length) {\n        <div class=\"ui-editor__notification\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'error',\n              title: 'formFlow.uiEditor.errors.title' | translate,\n              message: $definitionErrors().join(' '),\n              showClose: false,\n              lowContrast: true,\n            }\"\n          ></cds-inline-notification>\n        </div>\n      }\n\n      <div class=\"ui-editor__body\">\n        <aside class=\"ui-editor__sidebar\">\n          <valtimo-form-flow-step-list\n            [readOnly]=\"readOnly\"\n            [selectedIndex]=\"$selectedIndex()\"\n            [steps]=\"$stepListItems()\"\n            (addEvent)=\"onAddStep()\"\n            (selectEvent)=\"onSelectStep($event)\"\n          ></valtimo-form-flow-step-list>\n        </aside>\n\n        <div class=\"ui-editor__panel\">\n          @if (selectedStepGroup; as stepGroup) {\n            <valtimo-form-flow-step-detail\n              [componentOptions]=\"$componentOptions()\"\n              [duplicateKey]=\"isSelectedKeyDuplicate()\"\n              [formOptions]=\"$formOptions()\"\n              [isStartStep]=\"isSelectedStepStart()\"\n              [readOnly]=\"readOnly\"\n              [registry]=\"registry\"\n              [revealErrors]=\"revealErrors\"\n              [stepGroup]=\"stepGroup\"\n              [stepKeys]=\"$stepKeys()\"\n              (deleteStepEvent)=\"onDeleteStep()\"\n              (makeStartEvent)=\"onMakeStartStep()\"\n            ></valtimo-form-flow-step-detail>\n          } @else {\n            <div class=\"ui-editor__empty\">\n              <h5 class=\"ui-editor__empty-title\">\n                {{ 'formFlow.uiEditor.noStepsTitle' | translate }}\n              </h5>\n\n              <p class=\"ui-editor__empty-message\">\n                {{ 'formFlow.uiEditor.noStepsDescription' | translate }}\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"ui-editor__loading\">\n    <cds-loading></cds-loading>\n  </div>\n}\n", styles: [".ui-editor{display:flex;flex-direction:column;border:1px solid var(--cds-border-subtle, #e0e0e0);overflow:hidden}.ui-editor__body{display:flex;flex:1 1 auto;min-height:0}.ui-editor__sidebar{background:var(--cds-layer-01, #f4f4f4);border-right:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex:0 0 22rem;flex-direction:column;min-height:0}.ui-editor__panel{flex:1 1 auto;min-width:0;overflow-y:auto;padding:1rem 1.5rem 1.5rem}.ui-editor__notification{flex:0 0 auto}.ui-editor__notification cds-inline-notification{display:block;max-width:none;margin:0}.ui-editor__notification ::ng-deep .cds--inline-notification--low-contrast:before{border-width:0 0 1px 0}.ui-editor__empty{align-items:center;border:1px dashed var(--cds-border-strong, #8d8d8d);display:flex;flex-direction:column;gap:.5rem;margin:2rem auto;max-width:30rem;padding:2rem;text-align:center}.ui-editor__empty-title{margin:0}.ui-editor__empty-message{color:var(--cds-text-secondary, #525252);margin:0 0 .5rem}.ui-editor__loading{display:flex;width:100%;justify-content:center;padding:var(--cds-spacing-07)}\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: FormFlowEditorFormService }, { type: FormFlowService }, { type: FormFlowComponentService }, { type: i4$1.FormManagementService }, { type: i3.ActivatedRoute }, { type: i4.TranslateService }], propDecorators: { model: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], revealErrors: [{
+                type: Input
+            }], validEvent: [{
+                type: Output
+            }], valueChangeEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class FormFlowEditorComponent extends PendingChangesComponent {
+    constructor(breadcrumbService, formFlowDownloadService, formFlowService, iconService, notificationService, pageHeaderService, pageTitleService, route, router, translateService) {
+        super();
+        this.breadcrumbService = breadcrumbService;
+        this.formFlowDownloadService = formFlowDownloadService;
+        this.formFlowService = formFlowService;
+        this.iconService = iconService;
+        this.notificationService = notificationService;
+        this.pageHeaderService = pageHeaderService;
+        this.pageTitleService = pageTitleService;
+        this.route = route;
+        this.router = router;
+        this.translateService = translateService;
+        this.readOnly$ = new BehaviorSubject(false);
+        this.valid$ = new BehaviorSubject(false);
+        this.loading$ = new BehaviorSubject(true);
+        this.showDeleteModal$ = new BehaviorSubject(false);
+        this.$activeTab = signal(FormFlowEditorTab.JSON_EDITOR);
+        // Validate-on-save: while the admin is modelling nothing is flagged. Clicking Save on an invalid
+        // definition flips this instead of calling the backend, which reveals the errors in the active
+        // tab and — from then on — gates the Save button on validity until the definition is fixed.
+        this.$saveAttempted = signal(false);
+        this.FormFlowEditorTab = FormFlowEditorTab;
+        this.testIds = FORM_FLOW_EDITOR_TEST_IDS;
+        this._context$ = getContextObservable(this.route);
+        this._params$ = this._context$.pipe(switchMap(context => {
+            if (context === 'buildingBlock') {
+                return combineLatest([
+                    getBuildingBlockManagementRouteParams(this.route),
+                    this.route.params,
+                ]).pipe(map(([bbParams, params]) => ({
+                    caseDefinitionKey: bbParams?.buildingBlockDefinitionKey ?? '',
+                    caseDefinitionVersionTag: bbParams?.buildingBlockDefinitionVersionTag ?? '',
+                    formFlowDefinitionKey: params.formFlowDefinitionKey,
+                })));
+            }
+            return combineLatest([
+                getCaseManagementRouteParams(this.route),
+                this.route.params,
+            ]).pipe(map(([caseManagementParams, params]) => ({
+                ...(caseManagementParams ?? { caseDefinitionKey: '', caseDefinitionVersionTag: '' }),
+                ...params,
+            })));
+        }));
+        this.formFlowSchemaJson$ = this.formFlowService
+            .getFormFlowDefinitionSchema()
+            .pipe(shareReplay(1));
+        this._formFlowDefinition2$ = combineLatest([this._params$, this._context$]).pipe(tap(() => this.loading$.next(true)), switchMap(([params, context]) => {
+            this.initBreadcrumbs(params, context);
+            if (context === 'buildingBlock') {
+                return this.formFlowService.getBuildingBlockFormFlowDefinitionByKey(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey);
+            }
+            return this.formFlowService.getFormFlowDefinitionByKey(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey);
+        }), tap((formFlowDefinition) => {
+            this.pageTitleService.setCustomPageTitle(formFlowDefinition.key);
+            this.readOnly$.next(formFlowDefinition.readOnly === true);
+            this.loading$.next(false);
+            // A freshly loaded definition is the clean baseline: the next editor emission recaptures it,
+            // saving without edits is possible from either tab, and the unsaved-changes flag is cleared.
+            this._updatedModelValue$.next(this.serializeDefinition(formFlowDefinition));
+            this._pendingBaseline = null;
+            this.pendingChanges = false;
+            this.valid$.next(true);
+            // A reloaded definition starts a fresh modelling session; drop any prior save-attempt state.
+            this.$saveAttempted.set(false);
+        }));
+        this.model$ = this._formFlowDefinition2$.pipe(map((formFlowDefinition) => this.getEditorModel(formFlowDefinition)));
+        this._updatedModelValue$ = new BehaviorSubject('');
+        // The editor's serialized value captured on (re)load. Edits that differ from it mark the editor
+        // dirty so the leave-page guard can warn about unsaved changes.
+        this._pendingBaseline = null;
+        this.compactMode$ = this.pageHeaderService.compactMode$;
+        this.iconService.registerAll([ArrowLeft16]);
+        this.pageTitleService.disableReset();
+        this.restoreActiveTabFromUrl();
+    }
+    ngOnDestroy() {
+        this.pendingChanges = false;
+        this.pageTitleService.enableReset();
+        this.breadcrumbService.clearThirdBreadcrumb();
+        this.breadcrumbService.clearFourthBreadcrumb();
+    }
+    onValid(valid) {
+        this.valid$.next(valid);
+    }
+    onValueChange(value) {
+        // The first emission after a (re)load is the editor's baseline. Comparison is done on the
+        // normalized (whitespace-insensitive) JSON so the JSON editor's format-on-load reflow is not
+        // mistaken for an edit; only a genuine content change marks the editor dirty.
+        const normalized = this.normalizeJson(value);
+        if (this._pendingBaseline === null) {
+            this._pendingBaseline = normalized;
+            this.pendingChanges = false;
+        }
+        else {
+            this.pendingChanges = normalized !== this._pendingBaseline;
+        }
+        this._updatedModelValue$.next(value);
+    }
+    setActiveTab(tab) {
+        if (this.$activeTab() === tab)
+            return;
+        combineLatest([this._params$, this._context$])
+            .pipe(take(1))
+            .subscribe(([params, context]) => {
+            this.router.navigate(this.editorRouteSegments(params, context, tab));
+        });
+    }
+    onCancelRedirect() {
+        this.syncTabHeaders();
+    }
+    updateFormFlowDefinition() {
+        // Validate on the click: while modelling nothing is flagged, so clicking Save on an invalid
+        // definition reveals its errors (via $saveAttempted → the tabs' revealErrors) instead of
+        // sending it to the backend. From here on the Save button gates on validity until it is fixed.
+        if (!this.valid$.value) {
+            this.$saveAttempted.set(true);
+            return;
+        }
+        this.loading$.next(true);
+        combineLatest([this._params$, this._updatedModelValue$, this._context$])
+            .pipe(take(1), switchMap(([params, updatedModelValue, context]) => {
+            const updatedDefinition = {
+                ...JSON.parse(updatedModelValue),
+                key: params.formFlowDefinitionKey,
+            };
+            if (context === 'buildingBlock') {
+                return this.formFlowService.updateBuildingBlockFormFlowDefinition(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey, updatedDefinition);
+            }
+            return this.formFlowService.updateFormFlowDefinition(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey, updatedDefinition);
+        }), finalize(() => this.loading$.next(false)))
+            .subscribe(result => {
+            // The saved value is the new clean baseline for the leave-page guard.
+            this._pendingBaseline = this.normalizeJson(this._updatedModelValue$.getValue());
+            this.pendingChanges = false;
+            this.$saveAttempted.set(false);
+            this.showSuccessMessage(result.key);
+        });
+    }
+    onDelete() {
+        this.loading$.next(true);
+        this.pendingChanges = false;
+        combineLatest([this._params$, this._context$])
+            .pipe(take(1), switchMap(([params, context]) => {
+            if (context === 'buildingBlock') {
+                return this.formFlowService
+                    .deleteBuildingBlockFormFlowDefinition(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey)
+                    .pipe(map(() => ({ params, context })));
+            }
+            return this.formFlowService
+                .deleteFormFlowDefinition(params.caseDefinitionKey, params.caseDefinitionVersionTag, params.formFlowDefinitionKey)
+                .pipe(map(() => ({ params, context })));
+        }))
+            .subscribe(({ params, context }) => {
+            this.router.navigate(this.overviewRouteSegments(params, context));
+        });
+    }
+    showDeleteModal() {
+        this.showDeleteModal$.next(true);
+    }
+    downloadFormFlowDefinition(model) {
+        this._params$
+            .pipe(take(1))
+            .subscribe((params) => this.formFlowDownloadService.downloadJson(JSON.parse(model.value), params));
+    }
+    navigateBack() {
+        combineLatest([this._params$, this._context$])
+            .pipe(take(1))
+            .subscribe(([params, context]) => {
+            this.router.navigate(this.overviewRouteSegments(params, context));
+        });
+    }
+    restoreActiveTabFromUrl() {
+        const url = this.route.snapshot.url;
+        const lastSegment = url[url.length - 1]?.path;
+        if (lastSegment === 'editor') {
+            this.$activeTab.set(FormFlowEditorTab.EDITOR);
+        }
+    }
+    // The Carbon tab header highlights the clicked tab immediately; if the leave-page prompt is
+    // cancelled, restore the highlight to the tab that is actually still active.
+    syncTabHeaders() {
+        const order = [FormFlowEditorTab.JSON_EDITOR, FormFlowEditorTab.EDITOR];
+        this._tabs?.forEach((tab, index) => {
+            tab.active = order[index] === this.$activeTab();
+        });
+    }
+    editorRouteSegments(params, context, tab) {
+        const segments = [...this.overviewRouteSegments(params, context), params.formFlowDefinitionKey];
+        return tab === FormFlowEditorTab.EDITOR ? [...segments, 'editor'] : segments;
+    }
+    overviewRouteSegments(params, context) {
+        if (context === 'buildingBlock') {
+            return [
+                '/building-block-management',
+                'building-block',
+                params.caseDefinitionKey,
+                'version',
+                params.caseDefinitionVersionTag,
+                'form-flows',
+            ];
+        }
+        return [
+            '/case-management',
+            'case',
+            params.caseDefinitionKey,
+            'version',
+            params.caseDefinitionVersionTag,
+            'form-flows',
+        ];
+    }
+    serializeDefinition(formFlowDefinition) {
+        const clone = { ...formFlowDefinition };
+        delete clone.readOnly;
+        return JSON.stringify(clone);
+    }
+    getEditorModel(formFlowDefinition) {
+        return {
+            value: this.serializeDefinition(formFlowDefinition),
+            language: 'json',
+            uri: `inmemory://form-flow/${formFlowDefinition.key}.formflow.json`,
+        };
+    }
+    // Canonicalizes a JSON string by dropping insignificant whitespace, so reformatting (such as the
+    // JSON editor's format-on-load) does not register as a change. Invalid JSON is compared as-is.
+    normalizeJson(value) {
+        try {
+            return JSON.stringify(JSON.parse(value));
+        }
+        catch {
+            return value;
+        }
+    }
+    showSuccessMessage(formFlowDefinitionKey) {
+        this.notificationService.showToast({
+            caption: this.translateService.instant('formFlow.savedSuccessTitleMessage', {
+                key: formFlowDefinitionKey,
+            }),
+            type: 'success',
+            title: this.translateService.instant('formFlow.savedSuccessTitle'),
+        });
+    }
+    initBreadcrumbs(params, context) {
+        if (context === 'buildingBlock') {
+            const route = `/building-block-management/building-block/${params.caseDefinitionKey}/version/${params.caseDefinitionVersionTag}`;
+            const generalRoute = `${route}/general`;
+            this.breadcrumbService.setThirdBreadcrumb({
+                route: [generalRoute],
+                content: `${params.caseDefinitionKey} (${params.caseDefinitionVersionTag})`,
+                href: generalRoute,
+            });
+            const routeWithFormFlows = `${route}/form-flows`;
+            // The breadcrumb service translates this key on render (and re-translates on load / language
+            // switch), so a direct page load shows the label, not the raw key.
+            this.breadcrumbService.setFourthBreadcrumb({
+                route: [routeWithFormFlows],
+                content: 'buildingBlockManagement.tabs.formFlows',
+                href: routeWithFormFlows,
+            });
+        }
+        else {
+            const route = `/case-management/case/${params.caseDefinitionKey}/version/${params.caseDefinitionVersionTag}`;
+            this.breadcrumbService.setThirdBreadcrumb({
+                route: [route],
+                content: `${params.caseDefinitionKey} (${params.caseDefinitionVersionTag})`,
+                href: route,
+            });
+            const routeWithFormFlows = `${route}/form-flows`;
+            this.breadcrumbService.setFourthBreadcrumb({
+                route: [routeWithFormFlows],
+                content: 'caseManagement.tabs.formFlows',
+                href: routeWithFormFlows,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowEditorComponent, deps: [{ token: i1$2.BreadcrumbService }, { token: FormFlowDownloadService }, { token: FormFlowService }, { token: i2$1.IconService }, { token: i2.GlobalNotificationService }, { token: i1$2.PageHeaderService }, { token: i1$2.PageTitleService }, { token: i3.ActivatedRoute }, { token: i3.Router }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFlowEditorComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "_tabs", predicate: Tab, descendants: true }], usesInheritance: 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 *ngIf=\"model$ | async as model; else loading\">\n  <!-- The headers only switch the active tab; the tab content is rendered below (gated by the\n       active-tab signal) instead of inside the Carbon tab panes. Carbon removes a pane's content\n       as soon as another header is clicked, which would destroy the editor's unsaved form before\n       the leave-page confirmation is resolved. -->\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [active]=\"$activeTab() === FormFlowEditorTab.JSON_EDITOR\"\n      [heading]=\"'formFlow.tabs.jsonEditor' | translate\"\n      (selected)=\"setActiveTab(FormFlowEditorTab.JSON_EDITOR)\"\n    ></cds-tab>\n\n    <cds-tab\n      [active]=\"$activeTab() === FormFlowEditorTab.EDITOR\"\n      [heading]=\"'formFlow.tabs.editor' | translate\"\n      (selected)=\"setActiveTab(FormFlowEditorTab.EDITOR)\"\n    ></cds-tab>\n  </cds-tabs>\n\n  <!-- White surface for the tab content. The Carbon tab pane used to provide this; since the\n       content is rendered outside the panes, the wrapper supplies the layer background. -->\n  <div class=\"form-flow-editor__content\">\n    @if ($activeTab() === FormFlowEditorTab.EDITOR) {\n      <valtimo-form-flow-ui-editor-tab\n        [model]=\"model\"\n        [readOnly]=\"readOnly$ | async\"\n        [revealErrors]=\"$saveAttempted()\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-form-flow-ui-editor-tab>\n    }\n\n    @if ($activeTab() === FormFlowEditorTab.JSON_EDITOR) {\n      <valtimo-form-flow-json-editor-tab\n        [disabled]=\"(loading$ | async) === false && (readOnly$ | async)\"\n        [model]=\"model\"\n        [schema]=\"formFlowSchemaJson$ | async\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-form-flow-json-editor-tab>\n    }\n  </div>\n</ng-container>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <div\n      *ngIf=\"{\n        compactMode: compactMode$ | async,\n        valid: valid$ | async,\n        readOnly: readOnly$ | async,\n        model: model$ | async,\n      } as obs\"\n      class=\"buttons-container\"\n    >\n      <v-overflow-menu placement=\"bottom-end\">\n        <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n        <v-overflow-menu-option\n          [disabled]=\"!obs.valid && !obs.readOnly\"\n          (selected)=\"downloadFormFlowDefinition(obs.model)\"\n          >{{ 'interface.export' | translate }}\n        </v-overflow-menu-option>\n\n        <v-overflow-menu-option\n          [disabled]=\"obs.readOnly\"\n          type=\"danger\"\n          (selected)=\"showDeleteModal()\"\n          >{{ 'interface.delete' | translate }}\n        </v-overflow-menu-option>\n      </v-overflow-menu>\n\n      <button\n        cdsButton=\"secondary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        [attr.data-test-id]=\"testIds.backButton\"\n        (click)=\"navigateBack()\"\n      >\n        {{ 'interface.back' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"arrow--left\" size=\"16\"></svg>\n      </button>\n\n      <button\n        [disabled]=\"obs.readOnly || ($saveAttempted() && !obs.valid)\"\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        [attr.data-test-id]=\"testIds.saveButton\"\n        (click)=\"updateFormFlowDefinition()\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </div>\n  </ng-template>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"formFlow.deleteModalContent\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: ["cds-loading{display:flex;justify-content:center}.loading-container{display:flex;width:100%;justify-content:center}.buttons-container{display:flex;align-items:center;justify-self:flex-end;gap:16px}.buttons-container button{height:min-content}:host ::ng-deep .cds--tab-content{background-color:var(--cds-layer);outline:none!important;padding:0}.form-flow-editor__content{background-color:var(--cds-layer)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i1$2.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "directive", type: i1$2.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i2$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i1$2.OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: i1$2.OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: i1$2.OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }, { kind: "component", type: i2$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: FormFlowJsonEditorTabComponent, selector: "valtimo-form-flow-json-editor-tab", inputs: ["disabled", "model", "schema"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "component", type: FormFlowUiEditorTabComponent, selector: "valtimo-form-flow-ui-editor-tab", inputs: ["model", "readOnly", "revealErrors"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"model$ | async as model; else loading\">\n  <!-- The headers only switch the active tab; the tab content is rendered below (gated by the\n       active-tab signal) instead of inside the Carbon tab panes. Carbon removes a pane's content\n       as soon as another header is clicked, which would destroy the editor's unsaved form before\n       the leave-page confirmation is resolved. -->\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [active]=\"$activeTab() === FormFlowEditorTab.JSON_EDITOR\"\n      [heading]=\"'formFlow.tabs.jsonEditor' | translate\"\n      (selected)=\"setActiveTab(FormFlowEditorTab.JSON_EDITOR)\"\n    ></cds-tab>\n\n    <cds-tab\n      [active]=\"$activeTab() === FormFlowEditorTab.EDITOR\"\n      [heading]=\"'formFlow.tabs.editor' | translate\"\n      (selected)=\"setActiveTab(FormFlowEditorTab.EDITOR)\"\n    ></cds-tab>\n  </cds-tabs>\n\n  <!-- White surface for the tab content. The Carbon tab pane used to provide this; since the\n       content is rendered outside the panes, the wrapper supplies the layer background. -->\n  <div class=\"form-flow-editor__content\">\n    @if ($activeTab() === FormFlowEditorTab.EDITOR) {\n      <valtimo-form-flow-ui-editor-tab\n        [model]=\"model\"\n        [readOnly]=\"readOnly$ | async\"\n        [revealErrors]=\"$saveAttempted()\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-form-flow-ui-editor-tab>\n    }\n\n    @if ($activeTab() === FormFlowEditorTab.JSON_EDITOR) {\n      <valtimo-form-flow-json-editor-tab\n        [disabled]=\"(loading$ | async) === false && (readOnly$ | async)\"\n        [model]=\"model\"\n        [schema]=\"formFlowSchemaJson$ | async\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-form-flow-json-editor-tab>\n    }\n  </div>\n</ng-container>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <div\n      *ngIf=\"{\n        compactMode: compactMode$ | async,\n        valid: valid$ | async,\n        readOnly: readOnly$ | async,\n        model: model$ | async,\n      } as obs\"\n      class=\"buttons-container\"\n    >\n      <v-overflow-menu placement=\"bottom-end\">\n        <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n        <v-overflow-menu-option\n          [disabled]=\"!obs.valid && !obs.readOnly\"\n          (selected)=\"downloadFormFlowDefinition(obs.model)\"\n          >{{ 'interface.export' | translate }}\n        </v-overflow-menu-option>\n\n        <v-overflow-menu-option\n          [disabled]=\"obs.readOnly\"\n          type=\"danger\"\n          (selected)=\"showDeleteModal()\"\n          >{{ 'interface.delete' | translate }}\n        </v-overflow-menu-option>\n      </v-overflow-menu>\n\n      <button\n        cdsButton=\"secondary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        [attr.data-test-id]=\"testIds.backButton\"\n        (click)=\"navigateBack()\"\n      >\n        {{ 'interface.back' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"arrow--left\" size=\"16\"></svg>\n      </button>\n\n      <button\n        [disabled]=\"obs.readOnly || ($saveAttempted() && !obs.valid)\"\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        [attr.data-test-id]=\"testIds.saveButton\"\n        (click)=\"updateFormFlowDefinition()\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </div>\n  </ng-template>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"formFlow.deleteModalContent\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: ["cds-loading{display:flex;justify-content:center}.loading-container{display:flex;width:100%;justify-content:center}.buttons-container{display:flex;align-items:center;justify-self:flex-end;gap:16px}.buttons-container button{height:min-content}:host ::ng-deep .cds--tab-content{background-color:var(--cds-layer);outline:none!important;padding:0}.form-flow-editor__content{background-color:var(--cds-layer)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.BreadcrumbService }, { type: FormFlowDownloadService }, { type: FormFlowService }, { type: i2$1.IconService }, { type: i2.GlobalNotificationService }, { type: i1$2.PageHeaderService }, { type: i1$2.PageTitleService }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i4.TranslateService }], propDecorators: { _tabs: [{
+                type: ViewChildren,
+                args: [Tab]
+            }] } });
+
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DeleteFormFlowModalComponent {
+    constructor() {
+        this.deleteEvent = new EventEmitter();
     }
     onDelete(formFlowDefinitionKey) {
         this.deleteEvent.emit(formFlowDefinitionKey);
@@ -571,9 +1941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  */
 class FormFlowManagementModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: FormFlowManagementModule, declarations: [FormFlowOverviewComponent,
-            FormFlowEditorComponent,
-            DeleteFormFlowModalComponent], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: FormFlowManagementModule, declarations: [FormFlowOverviewComponent, FormFlowEditorComponent, DeleteFormFlowModalComponent], imports: [CommonModule,
             ButtonModule,
             FormsModule,
             ModalModule,
@@ -593,7 +1961,10 @@ class FormFlowManagementModule {
             CarbonListModule,
             DropdownModule,
             ConfirmationModalModule,
-            NewFormFlowModalComponent] }); }
+            NewFormFlowModalComponent,
+            TabsModule,
+            FormFlowJsonEditorTabComponent,
+            FormFlowUiEditorTabComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowManagementModule, imports: [CommonModule,
             ButtonModule,
             FormsModule,
@@ -613,16 +1984,15 @@ class FormFlowManagementModule {
             CarbonListModule,
             DropdownModule,
             ConfirmationModalModule,
-            NewFormFlowModalComponent] }); }
+            NewFormFlowModalComponent,
+            TabsModule,
+            FormFlowJsonEditorTabComponent,
+            FormFlowUiEditorTabComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFlowManagementModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        FormFlowOverviewComponent,
-                        FormFlowEditorComponent,
-                        DeleteFormFlowModalComponent,
-                    ],
+                    declarations: [FormFlowOverviewComponent, FormFlowEditorComponent, DeleteFormFlowModalComponent],
                     imports: [
                         CommonModule,
                         ButtonModule,
@@ -645,6 +2015,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         DropdownModule,
                         ConfirmationModalModule,
                         NewFormFlowModalComponent,
+                        TabsModule,
+                        FormFlowJsonEditorTabComponent,
+                        FormFlowUiEditorTabComponent,
                     ],
                 }]
         }] });
@@ -672,5 +2045,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FormFlowEditorComponent, FormFlowManagementModule, FormFlowOverviewComponent, FormFlowService, NewFormFlowModalComponent };
+export { FORM_FLOW_COMPONENT_TOKEN, FORM_FLOW_EDITOR_TEST_IDS, FormFlowComponentService, FormFlowEditorComponent, FormFlowEditorTab, FormFlowManagementModule, FormFlowOverviewComponent, FormFlowService, NewFormFlowModalComponent };
 //# sourceMappingURL=valtimo-form-flow-management.mjs.map