@scion/workbench 20.0.0-beta.6 → 20.0.0-beta.8

package/fesm2022/scion-workbench.mjs

@@ -3,10 +3,10 @@ import { effect, untracked, Injectable, inject, Injector, signal, booleanAttribu
 import { Router, ChildrenOutletContexts, NavigationStart, ActivationStart, ActivationEnd, PRIMARY_OUTLET, UrlSegment, RouterOutlet, RouterEvent, NavigationEnd, NavigationCancel, NavigationError, ActivatedRoute } from '@angular/router';
 import { Arrays, Objects as Objects$1, Dictionaries, Defined, Observables, Maps } from '@scion/toolkit/util';
 import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { skipUntil, mergeMap, filter, observeOn, catchError, startWith, take, map, switchMap as switchMap$1, skip, subscribeOn, finalize, distinctUntilChanged, tap, takeUntil, first, combineLatestWith } from 'rxjs/operators';
+import { skipUntil, mergeMap, filter, observeOn, catchError, startWith, take, map, switchMap as switchMap$1, skip, subscribeOn, finalize, distinctUntilChanged, takeUntil, first, combineLatestWith } from 'rxjs/operators';
 import { coerceElement } from '@angular/cdk/coercion';
 import { UUID } from '@scion/toolkit/uuid';
-import { Observable, Subject, asapScheduler, AsyncSubject, lastValueFrom, iif, switchMap, race, pairwise, EMPTY, of, firstValueFrom, from, animationFrameScheduler, merge, fromEvent, BehaviorSubject, delay, identity, audit, share, noop, map as map$1, concatWith, withLatestFrom, mergeMap as mergeMap$1, mergeWith, combineLatest, asyncScheduler, timer } from 'rxjs';
+import { Observable, Subject, asapScheduler, AsyncSubject, lastValueFrom, iif, switchMap, race, pairwise, EMPTY, of, firstValueFrom, from, animationFrameScheduler, merge, fromEvent, BehaviorSubject, delay, identity, noop, map as map$1, concatWith, withLatestFrom, mergeMap as mergeMap$1, mergeWith, NEVER, share, timer, ReplaySubject, combineLatest, asyncScheduler } from 'rxjs';
 import { fromMutation$, fromResize$ } from '@scion/toolkit/observable';
 import { subscribeIn, observeIn, filterArray, tapFirst } from '@scion/toolkit/operators';
 import { SciViewportComponent } from '@scion/components/viewport';
@@ -19,7 +19,7 @@ import * as i1 from '@angular/forms';
 import { NonNullableFormBuilder, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FocusMonitor, CdkTrapFocus } from '@angular/cdk/a11y';
 import { trigger, transition, style, animate } from '@angular/animations';
-import { ManifestService, MicrofrontendPlatform, PlatformState, MessageHeaders, MessageClient, ResponseStatusCodes, OutletRouter, MicrofrontendPlatformConfig, APP_IDENTITY, mapToBody, HostManifestInterceptor, ObservableDecorator, IntentInterceptor, CapabilityInterceptor, MicrofrontendPlatformHost, IntentClient, PlatformPropertyService } from '@scion/microfrontend-platform';
+import { ManifestService, MicrofrontendPlatform, PlatformState, MessageHeaders, MessageClient, ResponseStatusCodes, mapToBody, OutletRouter, MicrofrontendPlatformConfig, APP_IDENTITY, HostManifestInterceptor, ObservableDecorator, IntentInterceptor, CapabilityInterceptor, MicrofrontendPlatformHost, IntentClient, PlatformPropertyService } from '@scion/microfrontend-platform';
 import { Beans } from '@scion/toolkit/bean-manager';
 import { ɵMicrofrontendRouteParams as _MicrofrontendRouteParams, WorkbenchCapabilities, WorkbenchTextService, WorkbenchMessageBox, eMESSAGE_BOX_MESSAGE_PARAM, ɵTHEME_CONTEXT_KEY as _THEME_CONTEXT_KEY, ɵWorkbenchCommands as _WorkbenchCommands, ɵPOPUP_CONTEXT as _POPUP_CONTEXT, ɵWorkbenchPopupMessageHeaders as _WorkbenchPopupMessageHeaders, WorkbenchPopup, ɵMESSAGE_BOX_CONTEXT as _MESSAGE_BOX_CONTEXT, ɵDIALOG_CONTEXT as _DIALOG_CONTEXT, ɵWorkbenchDialogMessageHeaders as _WorkbenchDialogMessageHeaders, WorkbenchDialog as WorkbenchDialog$1, WorkbenchRouter as WorkbenchRouter$1, WorkbenchPopupService, WorkbenchMessageBoxService as WorkbenchMessageBoxService$1, ɵWorkbenchMessageBoxService as _WorkbenchMessageBoxService, WorkbenchDialogService as WorkbenchDialogService$1, ɵWorkbenchDialogService as _WorkbenchDialogService, WorkbenchNotificationService, ɵWorkbenchTextService as _WorkbenchTextService, ɵVIEW_ID_CONTEXT_KEY as _VIEW_ID_CONTEXT_KEY, WorkbenchClient } from '@scion/workbench-client';
 import { SciThrobberComponent } from '@scion/components/throbber';
@@ -5570,22 +5570,22 @@ function parseMatrixParams(matrixParams) {
         return {};
     }
     const params = {};
-    for (const match of escapeSemicolon(matrixParams).matchAll(/(?<paramName>[^=;]+)=(?<paramValue>[^;]*)/g)) {
+    for (const match of encodeEscapedSemicolons(matrixParams).matchAll(/(?<paramName>[^=;]+)=(?<paramValue>[^;]*)/g)) {
         const { paramName, paramValue } = match.groups;
-        params[unescapeSemicolon(paramName)] = unescapeSemicolon(paramValue);
+        params[paramName] = decodeSemicolons(paramValue);
     }
     return params;
     /**
-     * Replaces escaped semicolons (`\;`) with the placeholder (`ɵ`) to prevent interpretation as key-value separators.
+     * Encodes escaped semicolons (`\\;`) as `&#x3b` (Unicode) to prevent interpretation as interpolation parameter separators.
      */
-    function escapeSemicolon(value) {
-        return value.replaceAll('\\;', 'ɵ');
+    function encodeEscapedSemicolons(value) {
+        return value.replaceAll('\\;', '&#x3b');
     }
     /**
-     * Restores escaped semicolons by replacing the placeholder (`ɵ`) back to semicolons (`;`).
+     * Decodes encoded semicolons (`&#x3b`) back to semicolons (`;`).
      */
-    function unescapeSemicolon(value) {
-        return value.replaceAll('ɵ', ';');
+    function decodeSemicolons(value) {
+        return value.replaceAll('&#x3b', ';');
     }
 }
 
@@ -6399,7 +6399,7 @@ class ViewDropZoneDirective {
     _zone = inject(NgZone);
     _id = UUID.randomUUID();
     _boundingClientRect = boundingClientRect(inject(ElementRef));
-    _dropRegion$ = createDropRegionObservable();
+    _dropRegion$ = new BehaviorSubject(null);
     _dropRegionSize = computed(() => ({
         maxHeight: coercePixelValue(this.dropRegionSize(), { containerSize: this._boundingClientRect().height }),
         maxWidth: coercePixelValue(this.dropRegionSize(), { containerSize: this._boundingClientRect().width }),
@@ -6484,7 +6484,9 @@ class ViewDropZoneDirective {
         });
         // Enable drop zone based on dragging over an allowed drop region.
         // If enabled, drag events are not received by nested drop zones.
-        const dropZoneActivator = this._dropRegion$.subscribe(dropRegion => {
+        const dropZoneActivator = this._dropRegion$
+            .pipe(distinctUntilChanged())
+            .subscribe(dropRegion => {
             setStyle(dropZoneElement, { 'pointer-events': dropRegion ? null : 'none' });
             setAttribute(dropZoneElement, { 'data-region': dropRegion });
         });
@@ -6509,7 +6511,7 @@ class ViewDropZoneDirective {
         // order rather than in the order of tracked signal changes.
         const dragging = this._viewDragService.dragging;
         this._dropRegion$
-            .pipe(
+            .pipe(distinctUntilChanged(), 
         // When leaving the drop zone (no drop region) but continue dragging, remove the drop zone asynchronously
         // to animate transition of the placeholder to another drop zone. If ended dragging, remove the placeholder
         // immediately.
@@ -6613,28 +6615,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 function coercePixelValue(pixelOrRatio, options) {
     return (pixelOrRatio <= 1) ? options.containerSize * pixelOrRatio : pixelOrRatio;
 }
-/**
- * Creates a subject-like observable to observe and set the drop region,
- * multicasting the drop zone to many observers while throttling emission
- * to the latest drop region per animation frame.
- */
-function createDropRegionObservable() {
-    const zone = inject(NgZone);
-    const region$ = new BehaviorSubject(null);
-    const observe$ = region$
-        .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)), 
-    // Ensure not to be in Angular.
-    tap(() => NgZone.assertNotInAngularZone()), 
-    // Throttle emission to a single event per animation frame.
-    audit(() => nextAnimationFrame$()), share());
-    // Add notifier function.
-    observe$.next = (region) => {
-        if (region$.value !== region) {
-            zone.runOutsideAngular(() => region$.next(region));
-        }
-    };
-    return observe$;
-}
 
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
@@ -14359,86 +14339,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 /**
  * Registers a text provider for the SCION Workbench to get texts from micro apps.
  *
- * If the key matches the format of a remote key, text is requested via intent from the respective 'text-provider' capability.
- * If not, the key is ignored and `undefined` is returned.
- *
- * Remote key format: "workbench.external.~<APP_SYMBOLIC_NAME>~.<TEXT_KEY>".
+ * This text provider provides texts for keys matching the format: "workbench.external.scion-workbench-client.<APP_SYMBOLIC_NAME>.<TRANSLATABLE>".
  *
  * @see createRemoteTranslatable
  */
 function provideRemoteTextProvider() {
-    const REMOTE_KEY = /^workbench\.external\.~(?<provider>[^\\~]+)~\.(?<key>.+)$/;
+    const REMOTE_TRANSLATION_KEY = /^workbench\.external\.scion-workbench-client\.(?<provider>[^\\.]+)\.%(?<key>.+)$/;
+    const REMOTE_TEXT = /^workbench\.external\.scion-workbench-client\.(?<provider>[^\\.]+)\.(?<text>[^%].+)$/;
+    const cache = new Map();
     return makeEnvironmentProviders([
         {
             provide: WORKBENCH_TEXT_PROVIDER,
-            useValue: remoteTextProvider,
+            useValue: provideRemoteText,
+            multi: true,
+        },
+        {
+            provide: WORKBENCH_TEXT_PROVIDER,
+            useValue: interpolateRemoteText,
             multi: true,
         },
     ]);
-    function remoteTextProvider(remoteKey, params) {
-        // Test if the key matches a remote key.
-        const match = REMOTE_KEY.exec(remoteKey);
+    /**
+     * Provides text from a remote app.
+     */
+    function provideRemoteText(translationKey, params) {
+        // Test if the key matches a remote translation key.
+        const match = REMOTE_TRANSLATION_KEY.exec(translationKey);
         if (!match) {
-            return undefined; // ignore key
+            return undefined;
         }
-        // Parse key and provider from the remote key.
+        // Parse key and provider from the remote translation key.
         const { key, provider } = match.groups;
+        // Return cached text if cached.
+        const cacheKey = createCacheKey(translationKey, params, provider);
+        if (cache.has(cacheKey)) {
+            return toSignal(cache.get(cacheKey), { initialValue: '' });
+        }
         // Request the text by intent. Parameters starting with the topic protocol 'topic://' are resolved via messaging.
-        const text$ = observeParams$(params)
-            .pipe(map$1(params => params.reduce((translatable, [name, value]) => `${translatable};${name}=${value}`, `%${key}`)), switchMap(translatable => Beans.get(WorkbenchTextService).text$(translatable, { provider: provider })), map$1(text => text ?? key));
+        const text$ = observeParams$(params, { provider })
+            .pipe(
+        // Ensure the observable to never complete independent of text provider request completion, simplifying cache cleanup as
+        // finalize is only called when the last subscriber unsubscribes, after the specified TTL.
+        concatWith(NEVER), map$1(params => params.reduce((translatable, [param, value]) => `${translatable};${param}=${encodeSemicolons$1(value)}`, `%${key}`)), switchMap(translatable => Beans.get(WorkbenchTextService).text$(translatable, { provider })), map$1(text => text ?? `%${key}`), 
+        // Remove cached text when an error occurs, or when the subscriber count drops to zero, after the specified TTL.
+        finalize(() => cache.delete(cacheKey)), share({
+            connector: () => new ReplaySubject(1),
+            resetOnRefCountZero: () => timer(0, animationFrameScheduler), // reset asynchronously to prevent flickering of translated texts on re-layout
+        }));
+        cache.set(cacheKey, text$);
+        return toSignal(text$, { initialValue: '' });
+    }
+    /**
+     * Substitutes named parameters in a remote text.
+     */
+    function interpolateRemoteText(translationKey, params) {
+        // Test if the key matches a remote text.
+        const match = REMOTE_TEXT.exec(translationKey);
+        if (!match) {
+            return undefined;
+        }
+        // Parse text and provider from the remote text.
+        const { text, provider } = match.groups;
+        // Return cached text if cached.
+        const cacheKey = createCacheKey(translationKey, params, provider);
+        if (cache.has(cacheKey)) {
+            return toSignal(cache.get(cacheKey), { initialValue: '' });
+        }
+        // Substitute params. Parameters starting with the topic protocol 'topic://' are resolved via messaging.
+        const text$ = observeParams$(params, { provider })
+            .pipe(
+        // Never complete the observable, simplifying cache cleanup as `finalize` is only called when the last subscriber unsubscribes, after the specified TTL.
+        concatWith(NEVER), map$1(params => params.reduce((text, [param, value]) => text.replaceAll(`:${param}`, value), decodeSemicolons(text))), 
+        // Remove cached text when an error occurs, or when the subscriber count drops to zero, after the specified TTL.
+        finalize(() => cache.delete(cacheKey)), share({
+            connector: () => new ReplaySubject(1),
+            resetOnRefCountZero: () => timer(0, animationFrameScheduler), // reset asynchronously to prevent flickering of translated texts on re-layout
+        }));
+        cache.set(cacheKey, text$);
         return toSignal(text$, { initialValue: '' });
     }
     /**
-     * Creates an Observable that emits tuples of name/value pairs from the passed parameters.
+     * Creates an Observable that emits tuples of name-value pairs from the passed parameters.
      *
      * Parameters starting with the topic protocol 'topic://' are resolved via topic-based messaging.
      */
-    function observeParams$(params) {
-        const observableParams = Object.entries(params).map(([name, value]) => {
+    function observeParams$(params, options) {
+        const observableParams = Object.entries(params).map(([param, value]) => {
             if (!value.startsWith(TOPIC_PROTOCOL)) {
-                return of([name, value]);
+                return of([param, value]);
             }
             const topic = value.substring(TOPIC_PROTOCOL.length);
-            return Beans.get(MessageClient).request$(topic, undefined, { retain: true }).pipe(map$1(({ body: resolved }) => ([name, resolved ?? ''])));
+            return Beans.get(MessageClient).request$(topic, undefined, { retain: true })
+                .pipe(mapToBody(), 
+            // Resolve text if the resolver returns a translatable.
+            switchMap(resolved => resolved?.startsWith('%') ? Beans.get(WorkbenchTextService).text$(resolved, options) : of(resolved)), map$1(resolved => [param, resolved ?? '']));
         });
         return observableParams.length ? combineLatest(observableParams) : of([]);
     }
+    /**
+     * Creates the cache key for specified translatable.
+     */
+    function createCacheKey(key, params, provider) {
+        const translatable = Object.entries(params).reduce((translatable, [param, value]) => `${translatable};${param}=${value}`, `%${key}`);
+        return `${translatable}@${provider}`;
+    }
 }
 /**
  * Creates a translatable for the SCION Workbench to request the text from a micro app.
  *
- * Passed parameters are used to substitute named interpolation parameters. A named interpolation parameter starts with a colon (`:`) followed by a name.
+ * Passed parameters are used to substitute named parameters in the text or interpolation parameters of the translation key.
  *
- * Example: %translationKey;param1=value1;param2=:value2 // :value2 is a named interpolation parameter
+ * A named parameter starts with a colon (`:`) followed by the parameter name and can be substituted by an explicit value (passed as value param) or topic (passed as topic param).
+ * Topic params define a topic with the actual value requested when resolving the translatable. A topic can also reference value params as named params in topic segments.
  *
- * Named interpolation parameters can be substituted by explicit values (passed as value params) or topics (passed as topic params).
- * Unlike value params, topic params define a topic and the actual value will be requested when resolving the translatable.
- * Like the translatable's interpolation params, a topic can reference value params as named parameters in topic segments.
+ * @example - Translation Key
+ * `%translationKey;param1=:namedParam1;param2=:namedParam2`
+ *
+ * @example - Text
+ * `Text with :namedParam1 and :namedParam2`
  *
  * @param translatable - Specifies the translatable.
- * @param config - Specifies the text provider and values for substituting named interpolation parameters.
+ * @param config - Specifies the text provider and values for substituting named parameters.
  * @return Translatable that can be passed to the workbench's {@link text()} function for translation.
  *
  * @see provideRemoteTextProvider
  */
 function createRemoteTranslatable(translatable, config) {
-    if (!translatable?.startsWith('%')) {
+    if (!translatable) {
+        return translatable;
+    }
+    // Create Map of value params.
+    const valueParams = new Map(Object.entries(Dictionaries.coerce(config.valueParams)).map(([param, value]) => [param, encodeSemicolons$1(value)]));
+    // Create Map of topic params, substituting referenced value params.
+    const topicParams = new Map(Object.entries(Dictionaries.coerce(config.topicParams)).map(([param, topic]) => [param, toTopicParam(topic)]));
+    // Return text as-is if not a translation key nor referencing parameters.
+    if (!translatable.startsWith('%') && !containsParam(translatable, valueParams) && !containsParam(translatable, topicParams)) {
         return translatable;
     }
-    const remoteTranslatable = `%workbench.external.~${config.appSymbolicName}~.${translatable.substring(1)}`;
-    const valueParams = Dictionaries.coerce(config.valueParams);
-    const topicParams = Object.fromEntries(Object.entries(Dictionaries.coerce(config.topicParams))
-        // Replace named params in topic segments.
-        .map(([name, topic]) => [name, topic.replace(/(?<=\/|^):(?<namedParam>[^/]+)/g, (match, namedParam) => `${valueParams[namedParam] ?? match}`)])
-        // Add topic protocol to indicate resolution via topic-based messaging.
-        .map(([paramName, topic]) => [paramName, `${TOPIC_PROTOCOL}${topic}`]));
-    // Replace named params in matrix param values.
-    return remoteTranslatable.replace(/(?<==):(?<namedParam>[^;]+)/g, (match, namedParam) => `${valueParams[namedParam] ?? topicParams[namedParam] ?? match}`);
+    const remoteTranslatablePrefix = `%workbench.external.scion-workbench-client.${config.appSymbolicName}`;
+    if (translatable.startsWith('%')) {
+        // Substitute named parameters in interpolation params.
+        return `${remoteTranslatablePrefix}.${translatable}`.replace(/(?<==):(?<namedParam>[^;]+)/g, (match, param) => valueParams.get(param) ?? topicParams.get(param) ?? match);
+    }
+    else {
+        // Append referenced parameters in matrix notation.
+        return [...valueParams, ...topicParams]
+            .filter(([param]) => translatable.includes(`:${param}`))
+            .reduce((translatable, [param, value]) => `${translatable};${param}=${value}`, `${remoteTranslatablePrefix}.${encodeSemicolons$1(translatable)}`);
+    }
+    /**
+     * Adds the topic protocol to indicate resolution via topic-based messaging and substitutes named topic segments.
+     */
+    function toTopicParam(topic) {
+        return `${TOPIC_PROTOCOL}${topic.replace(/(?<=\/|^):(?<namedParam>[^/]+)/g, (match, namedParam) => {
+            return valueParams.get(namedParam) ?? match;
+        })}`;
+    }
+    /**
+     * Tests whether the passed text references any of the passed params.
+     */
+    function containsParam(text, params) {
+        return Array.from(params.keys()).some(param => text.includes(`:${param}`));
+    }
 }
 /**
  * Prefix of topic params.
  */
 const TOPIC_PROTOCOL = 'topic://';
+/**
+ * Encodes semicolons (`;`) as `&#x3b` (Unicode) to prevent interpretation as interpolation parameter separators.
+ */
+function encodeSemicolons$1(value) {
+    return `${value}`.replaceAll(';', '&#x3b');
+}
+/**
+ * Decodes encoded semicolons (`&#x3b`) back to semicolons (`;`).
+ */
+function decodeSemicolons(value) {
+    return value.replaceAll('&#x3b', ';');
+}
 
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
@@ -16625,7 +16704,10 @@ class MicrofrontendViewComponent {
     }
     installNavigator() {
         this._route.params
-            .pipe(switchMap(params => this.fetchCapability$(params[_MicrofrontendRouteParams.ɵVIEW_CAPABILITY_ID]).pipe(map(capability => ({ capability, params })))), executeOnCapabilityChange(context => this.onCapabilityChange(context)), filterNullCapability(), delayIfLazy(), serializeExecution(context => this.onNavigate(context)), subscribeOn(asyncScheduler), // subscribe asynchronously to prevent manual change detection in `onCapabilityChange` during component construction.
+            .pipe(switchMap(params => this.fetchCapability$(params[_MicrofrontendRouteParams.ɵVIEW_CAPABILITY_ID]).pipe(map(capability => ({ capability, params })))), executeOn({
+            onEach: context => this.setViewTitleAndHeading(context),
+            onCapabilityChange: context => this.onCapabilityChange(context),
+        }), filterNullCapability(), delayIfLazy(), serializeExecution(context => this.onNavigate(context)), subscribeOn(asyncScheduler), // subscribe asynchronously to prevent manual change detection in `onCapabilityChange` during component construction.
         takeUntilDestroyed())
             .subscribe();
     }
@@ -16736,13 +16818,23 @@ class MicrofrontendViewComponent {
                 .catch((error) => this._messageClient.publish(replyTo, stringifyError(error), { headers: new Map().set(MessageHeaders.Status, ResponseStatusCodes.ERROR) }));
         });
     }
+    /**
+     * Sets view title and heading as defined on the capability.
+     */
+    setViewTitleAndHeading(context) {
+        const { capability, params } = context;
+        if (capability?.properties.title) {
+            this.view.title = createRemoteTranslatable(capability.properties.title, { appSymbolicName: capability.metadata.appSymbolicName, valueParams: params, topicParams: capability.properties.resolve });
+        }
+        if (capability?.properties.heading) {
+            this.view.heading = createRemoteTranslatable(capability.properties.heading, { appSymbolicName: capability.metadata.appSymbolicName, valueParams: params, topicParams: capability.properties.resolve });
+        }
+    }
     /**
      * Updates the properties of this view, such as the view title, as defined by the capability.
      */
     setViewProperties(context) {
-        const { capability, params } = context;
-        this.view.title = (capability && createRemoteTranslatable(capability.properties.title, { appSymbolicName: capability.metadata.appSymbolicName, valueParams: params, topicParams: capability.properties.resolve })) ?? null;
-        this.view.heading = (capability && createRemoteTranslatable(capability.properties.heading, { appSymbolicName: capability.metadata.appSymbolicName, valueParams: params, topicParams: capability.properties.resolve })) ?? null;
+        const { capability } = context;
         this.view.classList.application = capability?.properties.cssClass;
         this.view.closable = capability?.properties.closable ?? true;
         this.view.dirty = false;
@@ -16876,14 +16968,17 @@ function configureMicrofrontendGlassPane() {
     ];
 }
 /**
- * Executes passed function each time when the source emits a different capability.
+ * Executes passed functions based on the current state.
  */
-function executeOnCapabilityChange(onCapabilityChange) {
+function executeOn(executeOn) {
+    const { onEach, onCapabilityChange } = executeOn;
     let prevCapability = null;
     return map(({ capability, params }) => {
         const context = { capability, prevCapability, params };
+        onEach?.(context);
+        // Test if the capability has changed.
         if (prevCapability?.metadata.id !== capability?.metadata.id) {
-            onCapabilityChange(context);
+            onCapabilityChange?.(context);
             prevCapability = capability;
         }
         return context;
@@ -17055,7 +17150,7 @@ function provideHostTextProvider() {
         provideMicrofrontendPlatformInitializer(() => {
             const injector = inject(Injector);
             WorkbenchClient.registerTextProvider((key, params) => {
-                const translatable = Object.entries(params).reduce((translatable, [name, value]) => `${translatable};${name}=${value}`, `%${key}`);
+                const translatable = Object.entries(params).reduce((translatable, [name, value]) => `${translatable};${name}=${encodeSemicolons(value)}`, `%${key}`);
                 const environmentInjector = createEnvironmentInjector([], injector.get(EnvironmentInjector));
                 return toObservable(text(translatable, { injector: environmentInjector }), { injector: environmentInjector })
                     .pipe(map$1(text => text !== '' && text !== key ? text : undefined), // emit `undefined` if not found the text
@@ -17064,6 +17159,14 @@ function provideHostTextProvider() {
         }),
     ]);
 }
+/**
+ * Encodes semicolons (`;`) as `\\;` to prevent interpretation as interpolation parameter separators.
+ *
+ * @see Translatable
+ */
+function encodeSemicolons(value) {
+    return value.replaceAll(';', '\\;');
+}
 
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways