@valtimo/process-link 13.41.0 → 13.42.0

package/fesm2022/valtimo-process-link.mjs

@@ -4330,9 +4330,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  */
 class FormFlowComponent {
     set formFlowInstanceId(value) {
+        if (this.formFlowInstanceId$.getValue() === value)
+            return;
         this.formFlowInstanceId$.next(value);
-        if (value)
-            this.getBreadcrumbs();
+        // Hide the step of the previous instance until the new one has been loaded.
+        this.formFlowStepType$.next(null);
+        if (!value)
+            return;
+        this.getBreadcrumbs();
+        this.getFormFlowStep();
     }
     constructor(formFlowService, modalService, translateService, configService) {
         this.formFlowService = formFlowService;
@@ -4353,9 +4359,6 @@ class FormFlowComponent {
         this.formioOptions = new FormioOptionsImpl();
         this.formioOptions.disableAlerts = true;
     }
-    ngOnInit() {
-        this.getFormFlowStep();
-    }
     ngOnDestroy() {
         this._breadcrumbsSubscription?.unsubscribe();
     }
@@ -4430,14 +4433,18 @@ class FormFlowComponent {
             .subscribe(breadcrumbs => {
             const classElement = document.getElementsByClassName('cds--progress-step--current');
             this.currentStepIndex$.next(breadcrumbs.currentStepIndex);
-            this.breadcrumbs$.next(breadcrumbs.breadcrumbs.map(breadcrumb => ({
-                label: breadcrumb.title ??
-                    this.translateService.instant(`formFlow.step.${breadcrumb.key}.title`) ??
-                    breadcrumb.key,
-                disabled: breadcrumb.stepInstanceId === null,
-                complete: breadcrumb.completed,
-                stepInstanceId: breadcrumb.stepInstanceId,
-            })));
+            this.breadcrumbs$.next(breadcrumbs.breadcrumbs.map(breadcrumb => {
+                const translationKey = `formFlow.step.${breadcrumb.key}.title`;
+                // instant() returns the key itself when no translation exists
+                const translatedTitle = this.translateService.instant(translationKey);
+                return {
+                    label: breadcrumb.title ??
+                        (translatedTitle !== translationKey ? translatedTitle : breadcrumb.key),
+                    disabled: breadcrumb.stepInstanceId === null,
+                    complete: breadcrumb.completed,
+                    stepInstanceId: breadcrumb.stepInstanceId,
+                };
+            }));
             if (classElement.length > 0) {
                 classElement[0].scrollIntoView({ behavior: 'smooth', inline: 'center' });
             }