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

package/fesm2022/scion-workbench.mjs

@@ -6,7 +6,7 @@ import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-i
 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 { 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, timer, combineLatest } from 'rxjs';
+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 { fromMutation$, fromResize$ } from '@scion/toolkit/observable';
 import { subscribeIn, observeIn, filterArray, tapFirst } from '@scion/toolkit/operators';
 import { SciViewportComponent } from '@scion/components/viewport';
@@ -21,7 +21,7 @@ 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 { Beans } from '@scion/toolkit/bean-manager';
-import { ɵMicrofrontendRouteParams as _MicrofrontendRouteParams, WorkbenchCapabilities, 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, ɵVIEW_ID_CONTEXT_KEY as _VIEW_ID_CONTEXT_KEY } from '@scion/workbench-client';
+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';
 import { Crypto } from '@scion/toolkit/crypto';
 
@@ -77,7 +77,7 @@ function resolveWhen(condition, options) {
                 untracked(() => resolve());
                 effectRef.destroy();
             }
-        }, { injector: options?.injector });
+        }, ...(ngDevMode ? [{ debugName: "effectRef", injector: options?.injector }] : [{ injector: options?.injector }]));
     });
 }
 
@@ -109,10 +109,10 @@ class DefaultWorkbenchStorage {
     store(key, value) {
         localStorage.setItem(key, value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DefaultWorkbenchStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DefaultWorkbenchStorage });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DefaultWorkbenchStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DefaultWorkbenchStorage });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DefaultWorkbenchStorage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DefaultWorkbenchStorage, decorators: [{
             type: Injectable
         }] });
 
@@ -131,7 +131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 function renderingFlag(storageKey, defaultValue, options) {
     const injector = options?.injector ?? inject(Injector);
     const workbenchStorage = injector.get(WorkbenchStorage);
-    const flag = signal(defaultValue);
+    const flag = signal(defaultValue, ...(ngDevMode ? [{ debugName: "flag" }] : []));
     // Read flag from storage.
     const whenReadFromStorage = readFromStorage(storageKey).then(storedValue => {
         if (storedValue === null) {
@@ -371,18 +371,18 @@ function nextAnimationFrame$() {
  * Provides access to the workbench layout.
  */
 class WorkbenchLayoutService {
-    _layout = signal(null);
-    _dragging = signal(false);
-    _moving = signal(false);
-    _resizing = signal(false);
+    _layout = signal(null, ...(ngDevMode ? [{ debugName: "_layout" }] : []));
+    _dragging = signal(false, ...(ngDevMode ? [{ debugName: "_dragging" }] : []));
+    _moving = signal(false, ...(ngDevMode ? [{ debugName: "_moving" }] : []));
+    _resizing = signal(false, ...(ngDevMode ? [{ debugName: "_resizing" }] : []));
     /**
      * Provides the layout of the workbench, throwing an error if the initial layout is not yet available.
      */
-    layout = computed(() => this._layout() ?? throwError('[NullLayoutError] Workbench layout not available yet.'));
+    layout = computed(() => this._layout() ?? throwError('[NullLayoutError] Workbench layout not available yet.'), ...(ngDevMode ? [{ debugName: "layout" }] : []));
     /**
      * Indicates whether the layout is available, i.e., after Angular has performed the initial navigation.
      */
-    hasLayout = computed(() => this._layout() !== null);
+    hasLayout = computed(() => this._layout() !== null, ...(ngDevMode ? [{ debugName: "hasLayout" }] : []));
     /**
      * Resolves when the layout is available, i.e., after Angular has performed the initial navigation.
      */
@@ -390,7 +390,7 @@ class WorkbenchLayoutService {
     /**
      * Indicates if a drag operation is active, such as moving a view or dialog, or resizing a part.
      */
-    dragging = computed(() => this._dragging() || this._moving() || this._resizing());
+    dragging = computed(() => this._dragging() || this._moving() || this._resizing(), ...(ngDevMode ? [{ debugName: "dragging" }] : []));
     /**
      * Controls the alignment of the bottom activity panel.
      *
@@ -427,10 +427,10 @@ class WorkbenchLayoutService {
     setLayout(layout) {
         this._layout.set(layout);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1032,7 +1032,7 @@ const Objects = {
  * Provides a registry for workbench model objects.
  */
 class WorkbenchObjectRegistry {
-    _objects = signal([]);
+    _objects = signal([], ...(ngDevMode ? [{ debugName: "_objects" }] : []));
     _objectsById = new Map();
     _nullObjectErrorFn;
     _onUnregister;
@@ -1528,10 +1528,10 @@ class ɵWorkbenchRouter {
     setCurrentNavigationContext(context) {
         this._currentNavigationContext = context;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchRouter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchRouter, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchRouter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchRouter, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchRouter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchRouter, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1700,10 +1700,10 @@ function computeNavigationCommands(currentOutlets, newOutlets) {
  * A view can inject `ActivatedRoute` to get parameters passed to the navigation and read data associated with the route.
  */
 class WorkbenchRouter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchRouter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchRouter, providedIn: 'root', useExisting: ɵWorkbenchRouter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchRouter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchRouter, providedIn: 'root', useExisting: ɵWorkbenchRouter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchRouter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchRouter, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useExisting: ɵWorkbenchRouter }]
         }] });
@@ -1833,10 +1833,10 @@ class WorkbenchGridMigrationV3 {
     getCurrentUrl() {
         return this._router.getCurrentNavigation()?.initialUrl ?? this._router.parseUrl(this._router.url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV3, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV3, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV3, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV3, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV3, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV3, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1908,10 +1908,10 @@ class WorkbenchGridMigrationV4 {
             return { ...viewV3, uid: undefined }; // `uid` is transient, i.e., set when deserializing the grid.
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV4, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV4, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV4, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV4, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV4, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV4, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1970,10 +1970,10 @@ class WorkbenchGridMigrationV5 {
             return viewV5;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV5, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV5, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV5, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV5, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV5, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV5, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2025,10 +2025,10 @@ class WorkbenchGridMigrationV6 {
             return viewV6;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV6, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV6, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV6, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV6, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV6, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV6, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2174,10 +2174,10 @@ class WorkbenchGridMigrationV7 {
             };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV7, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV7, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV7, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV7, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchGridMigrationV7, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchGridMigrationV7, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2218,10 +2218,10 @@ class WorkbenchLayoutMigrationV2 {
             return [viewId, commandsToSegments(commands)];
         })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV2, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV2, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV2, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV2, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV2, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2265,10 +2265,10 @@ class WorkbenchLayoutMigrationV3 {
         };
         return JSON.stringify(perspectiveLayoutV3);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV3, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV3, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV3, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV3, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV3, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV3, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2306,10 +2306,10 @@ class WorkbenchLayoutMigrationV4 {
         };
         return JSON.stringify(workbenchLayoutV4);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV4, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV4, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV4, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV4, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV4, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV4, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2375,10 +2375,10 @@ class WorkbenchLayoutMigrationV5 {
         };
         return JSON.stringify(workbenchLayoutV5);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV5, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV5, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV5, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV5, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV5, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV5, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2436,10 +2436,10 @@ class WorkbenchLayoutMigrationV6 {
         grid.referencePartId = referencePartId;
         return inject(WorkbenchLayoutSerializer).serializeGrid(grid);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV6, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV6, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV6, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV6, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMigrationV6, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMigrationV6, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2616,10 +2616,10 @@ class WorkbenchLayoutSerializer {
             return [outlet, segments.map(segment => new UrlSegment(segment.path, segment.parameters))];
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutSerializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutSerializer, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutSerializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutSerializer, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutSerializer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutSerializer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2677,10 +2677,10 @@ var LogLevel;
  * Delivers log events to a destination, e.g., writing logs to the console.
  */
 class LogAppender {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LogAppender, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LogAppender });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LogAppender, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LogAppender });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LogAppender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LogAppender, decorators: [{
             type: Injectable
         }] });
 /**
@@ -2731,10 +2731,10 @@ class ConsoleAppender {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ConsoleAppender, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ConsoleAppender });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ConsoleAppender, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ConsoleAppender });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ConsoleAppender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ConsoleAppender, decorators: [{
             type: Injectable
         }] });
 
@@ -2754,7 +2754,7 @@ class ɵLogger {
     constructor() {
         const defaultLogLevel = inject(WorkbenchConfig, { optional: true })?.logging?.logLevel ?? LogLevel.INFO;
         const logLevel = queryParam('loglevel');
-        this._logLevel = computed(() => parseLogLevel(logLevel()) ?? defaultLogLevel);
+        this._logLevel = computed(() => parseLogLevel(logLevel()) ?? defaultLogLevel, ...(ngDevMode ? [{ debugName: "_logLevel" }] : []));
     }
     /** @inheritDoc */
     get logLevel() {
@@ -2785,10 +2785,10 @@ class ɵLogger {
         }
         this._logAppenders.forEach(logAppender => logAppender.onLogMessage(event));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵLogger, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵLogger });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵLogger, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵLogger });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵLogger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵLogger, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 /**
@@ -2842,10 +2842,10 @@ function coerceLogEvent(level, message, args) {
  * @see {@link LogAppender}
  */
 class Logger {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: Logger, providedIn: 'root', useClass: ɵLogger });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Logger, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Logger, providedIn: 'root', useClass: ɵLogger });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: Logger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Logger, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useClass: ɵLogger }]
         }] });
@@ -2962,10 +2962,10 @@ class ActivationInstantProvider {
     next() {
         return ++this._origin;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivationInstantProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivationInstantProvider, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivationInstantProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivationInstantProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivationInstantProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivationInstantProvider, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4341,10 +4341,10 @@ class ɵWorkbenchLayoutFactory {
     create(config) {
         return runInInjectionContext(this._injector, () => new ɵWorkbenchLayout(config));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchLayoutFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchLayoutFactory, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchLayoutFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchLayoutFactory, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchLayoutFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchLayoutFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4373,10 +4373,10 @@ class WorkbenchLayoutMerger {
         }
         return layouts.local;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMerger, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMerger, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMerger, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMerger, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutMerger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutMerger, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4445,10 +4445,10 @@ class WorkbenchLayoutStorageService {
     async storeActivePerspectiveId(perspectiveId) {
         return this._storage.store(storageKeys.activePerspectiveId, perspectiveId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutStorageService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutStorageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutStorageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4659,7 +4659,7 @@ class ɵWorkbenchLauncher {
     _zone;
     _injector;
     _whenStarted = resolveWhen(computed(() => this.state() === LaunchState.Started));
-    state = signal(LaunchState.Stopped);
+    state = signal(LaunchState.Stopped, ...(ngDevMode ? [{ debugName: "state" }] : []));
     constructor() {
         const workbenchConfig = inject(WorkbenchConfig, { optional: true });
         if (!workbenchConfig) {
@@ -4695,10 +4695,10 @@ class ɵWorkbenchLauncher {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchLauncher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchLauncher, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchLauncher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchLauncher, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchLauncher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchLauncher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -4722,17 +4722,17 @@ class ɵWorkbenchStartup {
     _launcher = inject(ɵWorkbenchLauncher);
     _workbenchLayoutService = inject(WorkbenchLayoutService);
     /** @inheritDoc */
-    done = computed(() => this._launcher.state() === LaunchState.Started && this._workbenchLayoutService.hasLayout());
+    done = computed(() => this._launcher.state() === LaunchState.Started && this._workbenchLayoutService.hasLayout(), ...(ngDevMode ? [{ debugName: "done" }] : []));
     /** @inheritDoc */
     whenDone = resolveWhen(this.done);
     /** @inheritDoc */
     isStarted = this.done;
     /** @inheritDoc */
     whenStarted = this.whenDone.then(() => true);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchStartup, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchStartup });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchStartup, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchStartup });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchStartup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchStartup, decorators: [{
             type: Injectable
         }] });
 
@@ -4749,10 +4749,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * Provides the status of the SCION Workbench startup.
  */
 class WorkbenchStartup {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchStartup, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchStartup, providedIn: 'root', useClass: ɵWorkbenchStartup });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchStartup, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchStartup, providedIn: 'root', useClass: ɵWorkbenchStartup });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchStartup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchStartup, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useClass: ɵWorkbenchStartup }]
         }] });
@@ -4789,7 +4789,7 @@ class ɵWorkbenchPerspective {
         this.transient = definition.transient ?? false;
         this.data = definition.data ?? {};
         const activePerspective = inject(ACTIVE_PERSPECTIVE);
-        this.active = computed(() => activePerspective()?.id === this.id);
+        this.active = computed(() => activePerspective()?.id === this.id, ...(ngDevMode ? [{ debugName: "active" }] : []));
         this._initialLayoutFn = definition.layout;
         this.installLayoutPersister();
     }
@@ -4992,8 +4992,8 @@ class WorkbenchPerspectiveService {
     _environmentInjector = inject(EnvironmentInjector);
     _applicationInitStatus = inject(ApplicationInitStatus);
     _layoutStorageService = inject(WorkbenchLayoutStorageService);
-    _switchingPerspective = signal(false);
-    _resettingPerspective = signal(false);
+    _switchingPerspective = signal(false, ...(ngDevMode ? [{ debugName: "_switchingPerspective" }] : []));
+    _resettingPerspective = signal(false, ...(ngDevMode ? [{ debugName: "_resettingPerspective" }] : []));
     activePerspective = inject(ACTIVE_PERSPECTIVE);
     async init() {
         await this.registerPerspectivesFromConfig();
@@ -5146,10 +5146,10 @@ class WorkbenchPerspectiveService {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchPerspectiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchPerspectiveService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchPerspectiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchPerspectiveService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchPerspectiveService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchPerspectiveService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5263,10 +5263,10 @@ class WorkbenchThemeSwitcher {
             this.theme.set(theme);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchThemeSwitcher, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchThemeSwitcher, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchThemeSwitcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchThemeSwitcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5301,10 +5301,10 @@ const WORKBENCH_VIEW_MENU_ITEM_REGISTRY = new InjectionToken('WORKBENCH_VIEW_MEN
  * Provides the workbench element that contains the focused DOM element, which is currently receiving keyboard events.
  */
 class WorkbenchFocusMonitor {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchFocusMonitor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchFocusMonitor, providedIn: 'root', useExisting: i0.forwardRef(() => ɵWorkbenchFocusMonitor) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchFocusMonitor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchFocusMonitor, providedIn: 'root', useExisting: i0.forwardRef(() => ɵWorkbenchFocusMonitor) });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchFocusMonitor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchFocusMonitor, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useExisting: forwardRef(() => ɵWorkbenchFocusMonitor) }]
         }] });
@@ -5330,7 +5330,7 @@ function trackFocus(target, workbenchElement) {
     };
 }
 class ɵWorkbenchFocusMonitor {
-    activeElement = signal(null);
+    activeElement = signal(null, ...(ngDevMode ? [{ debugName: "activeElement" }] : []));
     setActiveElement(element) {
         this.activeElement.set(element);
     }
@@ -5339,10 +5339,10 @@ class ɵWorkbenchFocusMonitor {
             this.activeElement.set(null);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchFocusMonitor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchFocusMonitor, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchFocusMonitor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchFocusMonitor, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchFocusMonitor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchFocusMonitor, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5444,10 +5444,10 @@ class ɵWorkbenchService {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5474,10 +5474,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * multiple perspectives is optional.
  */
 class WorkbenchService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchService, providedIn: 'root', useExisting: ɵWorkbenchService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchService, providedIn: 'root', useExisting: ɵWorkbenchService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useExisting: ɵWorkbenchService }]
         }] });
@@ -5525,7 +5525,7 @@ function text(translatable, options) {
             // Call text provider.
             return runInInjectionContext(provideTextInjector, () => provideText(keyOrText));
         });
-    });
+    }, ...(ngDevMode ? [{ debugName: "translation" }] : []));
     // Track translation in separate reactive context to not call the text provider function on translation change.
     return computed(() => translation()());
 }
@@ -5552,9 +5552,9 @@ function provideText(translatable) {
  * Parses a translation key into its key and parameters, if any.
  *
  * Examples:
- * - %key // translation key
- * - %key;param=value // translation key with a single param
- * - %key;param1=value1;param2=value2 // translation key with multiple parameters
+ * - `%key`: translation key
+ * - `%key;param=value`: translation key with a single interpolation parameter
+ * - `%key;param1=value1;param2=value2`: translation key with multiple interpolation parameters
  */
 function parseTranslatable(translationKey) {
     const { key, params } = /^%(?<key>[^;]+)(;(?<params>.*))?$/.exec(translationKey).groups;
@@ -5602,18 +5602,18 @@ function parseMatrixParams(matrixParams) {
  * Enables the translation of a given {@link Translatable}.
  *
  * A {@link Translatable} is a string that, if starting with the percent symbol (`%`), is passed to the text provider for translation, with the percent symbol omitted.
- * Otherwise, the text is returned as is. A translation key can include parameters in matrix notation.
+ * Otherwise, the text is returned as is. A translation key may include parameters in matrix notation for text interpolation.
  *
  * Examples:
- * - `text`: no translatable text
  * - `%key`: translation key
- * - `%key;param=value`: translation key with a single param
- * - `%key;param1=value1;param2=value2`: translation key with multiple parameters
+ * - `%key;param=value`: translation key with a single interpolation parameter
+ * - `%key;param1=value1;param2=value2`: translation key with multiple interpolation parameters
+ * - `text`: no translation key, text is returned as is
  *
  * @experimental since 20.0.0-beta.3; API and behavior may change in any version without notice.
  */
 class TextPipe {
-    _translatable = signal(undefined);
+    _translatable = signal(undefined, ...(ngDevMode ? [{ debugName: "_translatable" }] : []));
     _text = text(this._translatable);
     transform(translatable) {
         // DO NOT call text() on key change to avoid stale RxJS subscriptions of previous texts,
@@ -5621,10 +5621,10 @@ class TextPipe {
         untracked(() => this._translatable.set(translatable));
         return this._text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: TextPipe, isStandalone: true, name: "wbText" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: TextPipe, isStandalone: true, name: "wbText" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbText' }]
         }] });
@@ -5690,12 +5690,12 @@ class WorkbenchDialog {
 }
 /** @inheritDoc */
 class ɵWorkbenchDialogSize {
-    _minHeight = signal(undefined);
-    _height = signal(undefined);
-    _maxHeight = signal(undefined);
-    _minWidth = signal(undefined);
-    _width = signal(undefined);
-    _maxWidth = signal(undefined);
+    _minHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_minHeight" }] : []));
+    _height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _maxHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
+    _minWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_minWidth" }] : []));
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _maxWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxWidth" }] : []));
     /** @inheritDoc */
     get minHeight() {
         return this._minHeight;
@@ -5805,10 +5805,10 @@ class WorkbenchDialogRegistry {
         this._dialogs$.value.forEach(dialog => dialog.destroy());
         this._dialogs$.next([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogRegistry, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogRegistry, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5870,10 +5870,10 @@ class WorkbenchBroadcastChannel {
  * Container for managing CSS classes set in different scopes.
  */
 class ClassList {
-    _layout = signal([], { equal: isEqualArray });
-    _navigation = signal([], { equal: isEqualArray });
-    _route = signal([], { equal: isEqualArray });
-    _application = signal([], { equal: isEqualArray });
+    _layout = signal([], ...(ngDevMode ? [{ debugName: "_layout", equal: isEqualArray }] : [{ equal: isEqualArray }]));
+    _navigation = signal([], ...(ngDevMode ? [{ debugName: "_navigation", equal: isEqualArray }] : [{ equal: isEqualArray }]));
+    _route = signal([], ...(ngDevMode ? [{ debugName: "_route", equal: isEqualArray }] : [{ equal: isEqualArray }]));
+    _application = signal([], ...(ngDevMode ? [{ debugName: "_application", equal: isEqualArray }] : [{ equal: isEqualArray }]));
     /**
      * CSS classes as list.
      */
@@ -5887,12 +5887,12 @@ class ClassList {
             .concat(this._layout())
             .concat(this._navigation())
             .concat(this._route())
-            .concat(this._application())));
+            .concat(this._application())), ...(ngDevMode ? [{ debugName: "asList" }] : []));
         this.asMap = computed(() => removeEmptyEntries(new Map()
             .set('layout', this._layout())
             .set('navigation', this._navigation())
             .set('route', this._route())
-            .set('application', this._application())));
+            .set('application', this._application())), ...(ngDevMode ? [{ debugName: "asMap" }] : []));
     }
     /**
      * Specifies CSS classes defined by the layout.
@@ -6024,9 +6024,9 @@ const WorkbenchRouteData = {
 class WbComponentPortal {
     _componentType;
     _options;
-    _viewContainerRef = signal(null);
-    _componentRef = signal(undefined);
-    _attached = signal(false);
+    _viewContainerRef = signal(null, ...(ngDevMode ? [{ debugName: "_viewContainerRef" }] : []));
+    _componentRef = signal(undefined, ...(ngDevMode ? [{ debugName: "_componentRef" }] : []));
+    _attached = signal(false, ...(ngDevMode ? [{ debugName: "_attached" }] : []));
     _logger = inject(Logger);
     /**
      * Gets the {@link ComponentRef} of the portal, or `undefined` if not constructed.
@@ -6035,11 +6035,11 @@ class WbComponentPortal {
     /**
      * Gets the {@link HTMLElement} of the portal, or `undefined` if not constructed.
      */
-    element = computed(() => this.componentRef()?.location.nativeElement);
+    element = computed(() => this.componentRef()?.location.nativeElement, ...(ngDevMode ? [{ debugName: "element" }] : []));
     /**
      * Indicates if the portal has been constructed.
      */
-    constructed = computed(() => !!this._componentRef());
+    constructed = computed(() => !!this._componentRef(), ...(ngDevMode ? [{ debugName: "constructed" }] : []));
     /**
      * Indicates if the portal is attached to the DOM.
      */
@@ -6047,7 +6047,7 @@ class WbComponentPortal {
     /**
      * Indicates if the portal has been destroyed.
      */
-    destroyed = computed(() => this._componentRef() === null);
+    destroyed = computed(() => this._componentRef() === null, ...(ngDevMode ? [{ debugName: "destroyed" }] : []));
     constructor(_componentType, _options) {
         // IMPORTANT: In order for the component to have the "correct" injection context, construct it the time attaching it to the Angular component tree,
         // or by calling {@link construct}. The "correct" injection context is crucial, for example, if the portal is displayed in a router outlet, so that
@@ -6156,12 +6156,12 @@ function createPortalComponent(componentType, options) {
  * Use this directive on nested router outlets to be the target of top-level routes, i.e., routes registered by the workbench for each part and view.
  */
 class RouterOutletRootContextDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RouterOutletRootContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: RouterOutletRootContextDirective, isStandalone: true, selector: "router-outlet[wbRouterOutletRootContext]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RouterOutletRootContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: RouterOutletRootContextDirective, isStandalone: true, selector: "router-outlet[wbRouterOutletRootContext]", providers: [
             { provide: ChildrenOutletContexts, useFactory: () => inject(ApplicationRef).injector.get(ChildrenOutletContexts) },
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RouterOutletRootContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RouterOutletRootContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'router-outlet[wbRouterOutletRootContext]',
@@ -6237,10 +6237,10 @@ class PartSlotComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: PartSlotComponent, isStandalone: true, selector: "wb-part-slot", viewQueries: [{ propertyName: "_viewport", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<sci-viewport>\r\n  <router-outlet [name]=\"part.id\" wbRouterOutletRootContext/>\r\n</sci-viewport>\r\n", styles: [":host{display:flex;flex-direction:column}:host>sci-viewport{flex:1 1 0}:host>sci-viewport>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterOutletRootContextDirective, selector: "router-outlet[wbRouterOutletRootContext]" }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: PartSlotComponent, isStandalone: true, selector: "wb-part-slot", viewQueries: [{ propertyName: "_viewport", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<sci-viewport>\r\n  <router-outlet [name]=\"part.id\" wbRouterOutletRootContext/>\r\n</sci-viewport>\r\n", styles: [":host{display:flex;flex-direction:column}:host>sci-viewport{flex:1 1 0}:host>sci-viewport>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterOutletRootContextDirective, selector: "router-outlet[wbRouterOutletRootContext]" }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartSlotComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-part-slot', imports: [
                         RouterOutlet,
@@ -6346,10 +6346,10 @@ class ViewDropPlaceholderRenderer {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewDropPlaceholderRenderer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewDropPlaceholderRenderer, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewDropPlaceholderRenderer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewDropPlaceholderRenderer, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewDropPlaceholderRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewDropPlaceholderRenderer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -6375,20 +6375,20 @@ class ViewDropZoneDirective {
     /**
      * Specifies the regions where views can be dropped. Defaults to every region.
      */
-    regions = input(undefined, { alias: 'wbViewDropZoneRegions' });
+    regions = input(undefined, ...(ngDevMode ? [{ debugName: "regions", alias: 'wbViewDropZoneRegions' }] : [{ alias: 'wbViewDropZoneRegions' }]));
     /**
      * Specifies attribute(s) to add to the drop zone.
      */
-    attributes = input(undefined, { alias: 'wbViewDropZoneAttributes' });
+    attributes = input(undefined, ...(ngDevMode ? [{ debugName: "attributes", alias: 'wbViewDropZoneAttributes' }] : [{ alias: 'wbViewDropZoneAttributes' }]));
     /**
      * Specifies the size of a drop zone region, either as percentage value [0,1] or absolute pixel value.
      */
-    dropRegionSize = input(.5, { alias: 'wbViewDropZoneRegionSize', transform: (value) => value ?? .5 });
+    dropRegionSize = input(.5, ...(ngDevMode ? [{ debugName: "dropRegionSize", alias: 'wbViewDropZoneRegionSize', transform: (value) => value ?? .5 }] : [{ alias: 'wbViewDropZoneRegionSize', transform: (value) => value ?? .5 }]));
     /**
      * Specifies the size of the visual placeholder when dragging a view over a drop region.
      * Can be a percentage value [0,1] or absolute pixel value. Defaults to {@link dropRegionSize}.
      */
-    dropPlaceholderSize = input(undefined, { alias: 'wbViewDropZonePlaceholderSize' });
+    dropPlaceholderSize = input(undefined, ...(ngDevMode ? [{ debugName: "dropPlaceholderSize", alias: 'wbViewDropZonePlaceholderSize' }] : [{ alias: 'wbViewDropZonePlaceholderSize' }]));
     /**
      * Notifies when dropping a view.
      */
@@ -6403,7 +6403,7 @@ class ViewDropZoneDirective {
     _dropRegionSize = computed(() => ({
         maxHeight: coercePixelValue(this.dropRegionSize(), { containerSize: this._boundingClientRect().height }),
         maxWidth: coercePixelValue(this.dropRegionSize(), { containerSize: this._boundingClientRect().width }),
-    }));
+    }), ...(ngDevMode ? [{ debugName: "_dropRegionSize" }] : []));
     constructor() {
         this.installDropZone();
         this.installDropPlaceholderRenderer();
@@ -6598,10 +6598,10 @@ class ViewDropZoneDirective {
         const { x, y, width, height } = this._boundingClientRect();
         return new DOMRect(x + (region === 'east' ? width - coercePixelValue(size, { containerSize: width }) : 0), y + (region === 'south' ? height - coercePixelValue(size, { containerSize: height }) : 0), region === 'west' || region === 'east' ? coercePixelValue(size, { containerSize: width }) : width, region === 'north' || region === 'south' ? coercePixelValue(size, { containerSize: height }) : height);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: ViewDropZoneDirective, isStandalone: true, selector: "[wbViewDropZone]", inputs: { regions: { classPropertyName: "regions", publicName: "wbViewDropZoneRegions", isSignal: true, isRequired: false, transformFunction: null }, attributes: { classPropertyName: "attributes", publicName: "wbViewDropZoneAttributes", isSignal: true, isRequired: false, transformFunction: null }, dropRegionSize: { classPropertyName: "dropRegionSize", publicName: "wbViewDropZoneRegionSize", isSignal: true, isRequired: false, transformFunction: null }, dropPlaceholderSize: { classPropertyName: "dropPlaceholderSize", publicName: "wbViewDropZonePlaceholderSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewDrop: "wbViewDropZoneDrop" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: ViewDropZoneDirective, isStandalone: true, selector: "[wbViewDropZone]", inputs: { regions: { classPropertyName: "regions", publicName: "wbViewDropZoneRegions", isSignal: true, isRequired: false, transformFunction: null }, attributes: { classPropertyName: "attributes", publicName: "wbViewDropZoneAttributes", isSignal: true, isRequired: false, transformFunction: null }, dropRegionSize: { classPropertyName: "dropRegionSize", publicName: "wbViewDropZoneRegionSize", isSignal: true, isRequired: false, transformFunction: null }, dropPlaceholderSize: { classPropertyName: "dropPlaceholderSize", publicName: "wbViewDropZonePlaceholderSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewDrop: "wbViewDropZoneDrop" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewDropZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewDropZoneDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[wbViewDropZone]' }]
         }], ctorParameters: () => [] });
@@ -6704,11 +6704,11 @@ class WorkbenchPortalOutletDirective {
     /**
      * Specifies the portal.
      */
-    portal = input.required({ alias: 'wbPortalOutlet' });
+    portal = input.required(...(ngDevMode ? [{ debugName: "portal", alias: 'wbPortalOutlet' }] : [{ alias: 'wbPortalOutlet' }]));
     /**
      * Controls if to detach the portal's component instead of destroying it when this directive is destroyed, such as during a page re-layout
      */
-    destroyOnDetach = input.required({ alias: 'wbPortalOutletDestroyOnDetach' });
+    destroyOnDetach = input.required(...(ngDevMode ? [{ debugName: "destroyOnDetach", alias: 'wbPortalOutletDestroyOnDetach' }] : [{ alias: 'wbPortalOutletDestroyOnDetach' }]));
     _viewContainerRef = inject(ViewContainerRef);
     constructor() {
         const nullTemplate = inject(TemplateRef);
@@ -6742,10 +6742,10 @@ class WorkbenchPortalOutletDirective {
             portal.detach();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchPortalOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: WorkbenchPortalOutletDirective, isStandalone: true, selector: "ng-template[wbPortalOutlet]", inputs: { portal: { classPropertyName: "portal", publicName: "wbPortalOutlet", isSignal: true, isRequired: true, transformFunction: null }, destroyOnDetach: { classPropertyName: "destroyOnDetach", publicName: "wbPortalOutletDestroyOnDetach", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchPortalOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: WorkbenchPortalOutletDirective, isStandalone: true, selector: "ng-template[wbPortalOutlet]", inputs: { portal: { classPropertyName: "portal", publicName: "wbPortalOutlet", isSignal: true, isRequired: true, transformFunction: null }, destroyOnDetach: { classPropertyName: "destroyOnDetach", publicName: "wbPortalOutletDestroyOnDetach", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchPortalOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchPortalOutletDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[wbPortalOutlet]' }]
         }], ctorParameters: () => [] });
@@ -6770,10 +6770,10 @@ class PartPortalPipe {
         }
         return this._partRegistry.get(partId).portal;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartPortalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: PartPortalPipe, isStandalone: true, name: "wbPartPortal" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartPortalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: PartPortalPipe, isStandalone: true, name: "wbPartPortal" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartPortalPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartPortalPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbPartPortal' }]
         }] });
@@ -6801,10 +6801,10 @@ class TreeNodeSashSizesPipe {
         }
         return [`${1 / (1 - ratio)}`, `${1 / ratio}`];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TreeNodeSashSizesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: TreeNodeSashSizesPipe, isStandalone: true, name: "wbTreeNodeSashSizes" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TreeNodeSashSizesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: TreeNodeSashSizesPipe, isStandalone: true, name: "wbTreeNodeSashSizes" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TreeNodeSashSizesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TreeNodeSashSizesPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbTreeNodeSashSizes' }]
         }] });
@@ -6828,11 +6828,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * Nodes are rendered as {@link SciSashboxComponent} and parts as {@link PartComponent} or {@link MainAreaPartComponent}.
  */
 class GridElementComponent {
-    element = input.required();
+    element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
     _workbenchRouter = inject(ɵWorkbenchRouter);
     _workbenchLayoutService = inject(WorkbenchLayoutService);
-    nodeId = computed(() => this.element() instanceof MTreeNode ? this.element().id : undefined);
-    partId = computed(() => this.element() instanceof MPart ? this.element().id : undefined);
+    nodeId = computed(() => this.element() instanceof MTreeNode ? this.element().id : undefined, ...(ngDevMode ? [{ debugName: "nodeId" }] : []));
+    partId = computed(() => this.element() instanceof MPart ? this.element().id : undefined, ...(ngDevMode ? [{ debugName: "partId" }] : []));
     onSashStart() {
         this._workbenchLayoutService.signalResizing(true);
     }
@@ -6841,10 +6841,10 @@ class GridElementComponent {
         this._workbenchLayoutService.signalResizing(false);
         void this._workbenchRouter.navigate(layout => layout.setTreeNodeSplitRatio(treeNode.id, ratio));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: GridElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: GridElementComponent, isStandalone: true, selector: "wb-grid-element", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-parentnodeid": "element().parent?.id", "attr.data-nodeid": "nodeId()", "attr.data-partid": "partId()" } }, ngImport: i0, template: "@let element = this.element();\n\n@if (element.type === 'MPart') {\n  <ng-container *wbPortalOutlet=\"element.id | wbPartPortal; destroyOnDetach: true\"/>\n} @else if (element.child1.visible && element.child2.visible) {\n  @let sashSizes = element.ratio | wbTreeNodeSashSizes;\n  <sci-sashbox [direction]=\"element.direction\"\n               [attr.data-nodeid]=\"element.id\"\n               (sashStart)=\"onSashStart()\"\n               (sashEnd)=\"onSashEnd(element, $event)\">\n    <!-- Child 1 -->\n    <ng-template sciSash [size]=\"sashSizes[0]\" key=\"sash1\">\n      <wb-grid-element [element]=\"element.child1\" class=\"sash-1\"/>\n    </ng-template>\n    <!-- Child 2 -->\n    <ng-template sciSash [size]=\"sashSizes[1]\" key=\"sash2\">\n      <wb-grid-element [element]=\"element.child2\" class=\"sash-2\"/>\n    </ng-template>\n  </sci-sashbox>\n} @else if (element.child1.visible) {\n  <wb-grid-element [element]=\"element.child1\"/>\n} @else if (element.child2.visible) {\n  <wb-grid-element [element]=\"element.child2\"/>\n}\n", styles: [":host{display:grid;overflow:hidden}:host>sci-sashbox{z-index:auto}\n"], dependencies: [{ kind: "component", type: GridElementComponent, selector: "wb-grid-element", inputs: ["element"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet", "wbPortalOutletDestroyOnDetach"] }, { kind: "pipe", type: PartPortalPipe, name: "wbPartPortal" }, { kind: "component", type: SciSashboxComponent, selector: "sci-sashbox", inputs: ["direction"], outputs: ["sashStart", "sashEnd"] }, { kind: "directive", type: SciSashDirective, selector: "ng-template[sciSash]", inputs: ["size", "minSize", "key", "animate"], exportAs: ["sciSash"] }, { kind: "pipe", type: TreeNodeSashSizesPipe, name: "wbTreeNodeSashSizes" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GridElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: GridElementComponent, isStandalone: true, selector: "wb-grid-element", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-parentnodeid": "element().parent?.id", "attr.data-nodeid": "nodeId()", "attr.data-partid": "partId()" } }, ngImport: i0, template: "@let element = this.element();\n\n@if (element.type === 'MPart') {\n  <ng-container *wbPortalOutlet=\"element.id | wbPartPortal; destroyOnDetach: true\"/>\n} @else if (element.child1.visible && element.child2.visible) {\n  @let sashSizes = element.ratio | wbTreeNodeSashSizes;\n  <sci-sashbox [direction]=\"element.direction\"\n               [attr.data-nodeid]=\"element.id\"\n               (sashStart)=\"onSashStart()\"\n               (sashEnd)=\"onSashEnd(element, $event)\">\n    <!-- Child 1 -->\n    <ng-template sciSash [size]=\"sashSizes[0]\" key=\"sash1\">\n      <wb-grid-element [element]=\"element.child1\" class=\"sash-1\"/>\n    </ng-template>\n    <!-- Child 2 -->\n    <ng-template sciSash [size]=\"sashSizes[1]\" key=\"sash2\">\n      <wb-grid-element [element]=\"element.child2\" class=\"sash-2\"/>\n    </ng-template>\n  </sci-sashbox>\n} @else if (element.child1.visible) {\n  <wb-grid-element [element]=\"element.child1\"/>\n} @else if (element.child2.visible) {\n  <wb-grid-element [element]=\"element.child2\"/>\n}\n", styles: [":host{display:grid;overflow:hidden}:host>sci-sashbox{z-index:auto}\n"], dependencies: [{ kind: "component", type: GridElementComponent, selector: "wb-grid-element", inputs: ["element"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet", "wbPortalOutletDestroyOnDetach"] }, { kind: "component", type: SciSashboxComponent, selector: "sci-sashbox", inputs: ["direction"], outputs: ["sashStart", "sashEnd"] }, { kind: "directive", type: SciSashDirective, selector: "ng-template[sciSash]", inputs: ["size", "minSize", "key", "animate"], exportAs: ["sciSash"] }, { kind: "pipe", type: PartPortalPipe, name: "wbPartPortal" }, { kind: "pipe", type: TreeNodeSashSizesPipe, name: "wbTreeNodeSashSizes" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: GridElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GridElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-grid-element', imports: [
                         WorkbenchPortalOutletDirective,
@@ -6877,10 +6877,10 @@ class RequiresDropZonePipe {
     transform(element, region) {
         return requiresDropZone(element, region);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RequiresDropZonePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: RequiresDropZonePipe, isStandalone: true, name: "wbRequiresDropZone" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RequiresDropZonePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: RequiresDropZonePipe, isStandalone: true, name: "wbRequiresDropZone" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RequiresDropZonePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RequiresDropZonePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbRequiresDropZone' }]
         }] });
@@ -6946,11 +6946,11 @@ class GridComponent {
     /**
      * Specifies the grid to render.
      */
-    grid = input.required();
+    grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
     /**
      * Controls dropping at the grid boundaries.
      */
-    gridDropZone = input(false);
+    gridDropZone = input(false, ...(ngDevMode ? [{ debugName: "gridDropZone" }] : []));
     _workbenchId = inject(WORKBENCH_ID);
     _viewDragService = inject(ViewDragService);
     canDrop = inject(ViewDragService).canDrop(this.grid);
@@ -6972,10 +6972,10 @@ class GridComponent {
             dragData: event.dragData,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: GridComponent, isStandalone: true, selector: "wb-grid", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, gridDropZone: { classPropertyName: "gridDropZone", publicName: "gridDropZone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let dropZone = gridDropZone();\n@if (dropZone) {\n  <wb-grid-element [element]=\"grid().root\"\n                   wbViewDropZone\n                   [wbViewDropZoneRegionSize]=\"dropZone.dropRegionSize\"\n                   [wbViewDropZonePlaceholderSize]=\"dropZone.dropPlaceholderSize\"\n                   [wbViewDropZoneRegions]=\"canDrop() && {\n                     north: false,\n                     south: grid().root | wbRequiresDropZone:'south',\n                     west: grid().root | wbRequiresDropZone:'west',\n                     east: grid().root | wbRequiresDropZone:'east',\n                     center: false,\n                   }\"\n                   [wbViewDropZoneAttributes]=\"dropZone.dropZoneAttributes\"\n                   (wbViewDropZoneDrop)=\"onViewDrop($event)\"/>\n} @else {\n  <wb-grid-element [element]=\"grid().root\"/>\n}\n", styles: [":host{display:grid}\n"], dependencies: [{ kind: "component", type: GridElementComponent, selector: "wb-grid-element", inputs: ["element"] }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneAttributes", "wbViewDropZoneRegionSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "pipe", type: RequiresDropZonePipe, name: "wbRequiresDropZone" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: GridComponent, isStandalone: true, selector: "wb-grid", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, gridDropZone: { classPropertyName: "gridDropZone", publicName: "gridDropZone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let dropZone = gridDropZone();\n@if (dropZone) {\n  <wb-grid-element [element]=\"grid().root\"\n                   wbViewDropZone\n                   [wbViewDropZoneRegionSize]=\"dropZone.dropRegionSize\"\n                   [wbViewDropZonePlaceholderSize]=\"dropZone.dropPlaceholderSize\"\n                   [wbViewDropZoneRegions]=\"canDrop() && {\n                     north: false,\n                     south: grid().root | wbRequiresDropZone:'south',\n                     west: grid().root | wbRequiresDropZone:'west',\n                     east: grid().root | wbRequiresDropZone:'east',\n                     center: false,\n                   }\"\n                   [wbViewDropZoneAttributes]=\"dropZone.dropZoneAttributes\"\n                   (wbViewDropZoneDrop)=\"onViewDrop($event)\"/>\n} @else {\n  <wb-grid-element [element]=\"grid().root\"/>\n}\n", styles: [":host{display:grid}\n"], dependencies: [{ kind: "component", type: GridElementComponent, selector: "wb-grid-element", inputs: ["element"] }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneAttributes", "wbViewDropZoneRegionSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "pipe", type: RequiresDropZonePipe, name: "wbRequiresDropZone" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: GridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-grid', imports: [
                         GridElementComponent,
@@ -7078,10 +7078,10 @@ class DesktopSlotComponent {
       </wb-workbench>
     `);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DesktopSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: DesktopSlotComponent, isStandalone: true, selector: "wb-desktop-slot", viewQueries: [{ propertyName: "_viewport", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<sci-viewport>\r\n  @let template = desktop.template();\r\n  @if (template) {\r\n    <ng-container *ngTemplateOutlet=\"template\"/>\r\n  } @else {\r\n    <router-outlet (activate)=\"onLegacyDesktopActivate()\"/>\r\n  }\r\n</sci-viewport>\r\n", styles: [":host{display:flex;flex-direction:column}:host>sci-viewport{flex:1 1 0}:host>sci-viewport>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DesktopSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: DesktopSlotComponent, isStandalone: true, selector: "wb-desktop-slot", viewQueries: [{ propertyName: "_viewport", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<sci-viewport>\r\n  @let template = desktop.template();\r\n  @if (template) {\r\n    <ng-container *ngTemplateOutlet=\"template\"/>\r\n  } @else {\r\n    <router-outlet (activate)=\"onLegacyDesktopActivate()\"/>\r\n  }\r\n</sci-viewport>\r\n", styles: [":host{display:flex;flex-direction:column}:host>sci-viewport{flex:1 1 0}:host>sci-viewport>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DesktopSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DesktopSlotComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-desktop-slot', imports: [
                         RouterOutlet,
@@ -7103,7 +7103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * A desktop is a visual workbench element for displaying content when the layout is empty (no view and no navigated part).
  */
 class WorkbenchDesktop {
-    template = signal(undefined);
+    template = signal(undefined, ...(ngDevMode ? [{ debugName: "template" }] : []));
     slot;
     constructor() {
         this.slot = { portal: this.createPortal() };
@@ -7115,10 +7115,10 @@ class WorkbenchDesktop {
             ],
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDesktop, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDesktop, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDesktop, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDesktop, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDesktop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDesktop, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -7158,7 +7158,7 @@ class MainAreaPartComponent {
     _layout = inject(WorkbenchLayoutService).layout;
     _viewDragService = inject(ViewDragService);
     part = inject(ɵWorkbenchPart);
-    mainAreaGrid = computed(() => this._layout().grids.mainArea);
+    mainAreaGrid = computed(() => this._layout().grids.mainArea, ...(ngDevMode ? [{ debugName: "mainAreaGrid" }] : []));
     desktop = inject(WorkbenchDesktop);
     dasherize = dasherize;
     canDrop = inject(ViewDragService).canDrop(computed(() => this._layout().grids.mainArea));
@@ -7180,10 +7180,10 @@ class MainAreaPartComponent {
             dragData: event.dragData,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MainAreaPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: MainAreaPartComponent, isStandalone: true, selector: "wb-part[data-partid=\"part.main-area\"]", host: { properties: { "attr.data-grid": "dasherize(part.gridName())", "attr.data-active": "part.active() ? '' : null" } }, ngImport: i0, template: "@if (mainAreaGrid().root.visible) {\n  <wb-grid [grid]=\"mainAreaGrid()\"\n           [gridDropZone]=\"{\n             dropRegionSize: 100,\n             dropPlaceholderSize: 100,\n             dropZoneAttributes: {\n               'data-grid': 'main-area',\n               'data-partid': part.id,\n             }\n           }\"\n           [attr.data-grid]=\"'main-area'\"\n           class=\"e2e-content\"/>\n} @else {\n  <div wbViewDropZone\n       [wbViewDropZoneRegions]=\"canDrop() && {center: true, north: false, south: false, west: false, east: false}\"\n       [wbViewDropZoneAttributes]=\"{\n         'data-desktop': '',\n         'data-partid': part.id,\n       }\"\n       (wbViewDropZoneDrop)=\"onDesktopViewDrop($event)\"\n       class=\"desktop e2e-part-content e2e-content\">\n    @if (part.navigation()) {\n      <ng-container *wbPortalOutlet=\"part.slot.portal; destroyOnDetach: false\"/>\n    } @else {\n      <ng-container *wbPortalOutlet=\"desktop.slot.portal; destroyOnDetach: false\"/>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>wb-grid{flex:auto}:host>div.desktop{flex:auto;display:grid;position:relative}\n"], dependencies: [{ kind: "component", type: GridComponent, selector: "wb-grid", inputs: ["grid", "gridDropZone"] }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneAttributes", "wbViewDropZoneRegionSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet", "wbPortalOutletDestroyOnDetach"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MainAreaPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MainAreaPartComponent, isStandalone: true, selector: "wb-part[data-partid=\"part.main-area\"]", host: { properties: { "attr.data-grid": "dasherize(part.gridName())", "attr.data-active": "part.active() ? '' : null" } }, ngImport: i0, template: "@if (mainAreaGrid().root.visible) {\n  <wb-grid [grid]=\"mainAreaGrid()\"\n           [gridDropZone]=\"{\n             dropRegionSize: 100,\n             dropPlaceholderSize: 100,\n             dropZoneAttributes: {\n               'data-grid': 'main-area',\n               'data-partid': part.id,\n             }\n           }\"\n           [attr.data-grid]=\"'main-area'\"\n           class=\"e2e-content\"/>\n} @else {\n  <div wbViewDropZone\n       [wbViewDropZoneRegions]=\"canDrop() && {center: true, north: false, south: false, west: false, east: false}\"\n       [wbViewDropZoneAttributes]=\"{\n         'data-desktop': '',\n         'data-partid': part.id,\n       }\"\n       (wbViewDropZoneDrop)=\"onDesktopViewDrop($event)\"\n       class=\"desktop e2e-part-content e2e-content\">\n    @if (part.navigation()) {\n      <ng-container *wbPortalOutlet=\"part.slot.portal; destroyOnDetach: false\"/>\n    } @else {\n      <ng-container *wbPortalOutlet=\"desktop.slot.portal; destroyOnDetach: false\"/>\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>wb-grid{flex:auto}:host>div.desktop{flex:auto;display:grid;position:relative}\n"], dependencies: [{ kind: "component", type: GridComponent, selector: "wb-grid", inputs: ["grid", "gridDropZone"] }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneAttributes", "wbViewDropZoneRegionSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet", "wbPortalOutletDestroyOnDetach"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MainAreaPartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MainAreaPartComponent, decorators: [{
             type: Component,
             args: [{ selector: `wb-part[data-partid="${MAIN_AREA}"]`, imports: [
                         GridComponent,
@@ -7211,10 +7211,10 @@ class InstanceofPipe {
     transform(object, type) {
         return object instanceof type ? object : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: InstanceofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: InstanceofPipe, isStandalone: true, name: "wbInstanceof" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InstanceofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: InstanceofPipe, isStandalone: true, name: "wbInstanceof" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: InstanceofPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InstanceofPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbInstanceof' }]
         }] });
@@ -7229,14 +7229,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * SPDX-License-Identifier: EPL-2.0
  */
 class PartActionComponent {
-    action = input.required({ transform: (action) => runInInjectionContext(this._injector, () => transform$1(action)) });
+    action = input.required(...(ngDevMode ? [{ debugName: "action", transform: (action) => runInInjectionContext(this._injector, () => transform$1(action)) }] : [{ transform: (action) => runInInjectionContext(this._injector, () => transform$1(action)) }]));
     _injector = inject(Injector);
     TemplatePartAction = TemplatePartAction;
     ComponentPartAction = ComponentPartAction;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: PartActionComponent, isStandalone: true, selector: "wb-part-action", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (action() | wbInstanceof:TemplatePartAction; as action) {\r\n  <ng-container *ngTemplateOutlet=\"action.template; context: action.context; injector: action.injector\"/>\r\n}\r\n@if (action() | wbInstanceof:ComponentPartAction; as action) {\r\n  <ng-container *ngComponentOutlet=\"action.component; inputs: action.inputs; injector: action.injector\"/>\r\n}\r\n", styles: [":host{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: InstanceofPipe, name: "wbInstanceof" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: PartActionComponent, isStandalone: true, selector: "wb-part-action", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (action() | wbInstanceof:TemplatePartAction; as action) {\r\n  <ng-container *ngTemplateOutlet=\"action.template; context: action.context; injector: action.injector\"/>\r\n}\r\n@if (action() | wbInstanceof:ComponentPartAction; as action) {\r\n  <ng-container *ngComponentOutlet=\"action.component; inputs: action.inputs; injector: action.injector\"/>\r\n}\r\n", styles: [":host{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: InstanceofPipe, name: "wbInstanceof" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-part-action', imports: [
                         NgTemplateOutlet,
@@ -7330,7 +7330,7 @@ class IconComponent {
      *
      * Refer to the installed icon providers for a list of supported icons.
      */
-    icon = input.required();
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
     _injector = inject(Injector);
     _host = inject(ElementRef).nativeElement;
     _renderer = inject(Renderer2);
@@ -7370,10 +7370,10 @@ class IconComponent {
             });
         }, { injector: this._injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: IconComponent, isStandalone: true, selector: "wb-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-grid;place-content:center;font-size:1em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: IconComponent, isStandalone: true, selector: "wb-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:inline-grid;place-content:center;font-size:1em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-icon', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-grid;place-content:center;font-size:1em}\n"] }]
         }], ctorParameters: () => [] });
@@ -7405,10 +7405,10 @@ function computeIconDescriptor(icon) {
  * Acts as placeholder if no icon could be found.
  */
 class NullIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NullIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: NullIconComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NullIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: NullIconComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NullIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NullIconComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }] });
@@ -7430,12 +7430,12 @@ class FilterFieldComponent {
      * Sets focus order in sequential keyboard navigation.
      * If not specified, the focus order is according to the position in the document (tabindex=0).
      */
-    tabindex = input();
+    tabindex = input(...(ngDevMode ? [undefined, { debugName: "tabindex" }] : []));
     /**
      * Specifies the hint displayed when this field is empty.
      */
-    placeholder = input();
-    disabled = input(false, { transform: booleanAttribute });
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * Emits on filter change.
      */
@@ -7510,12 +7510,12 @@ class FilterFieldComponent {
         this.formControl.setValue(value ?? '', { emitEvent: false });
         this._cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: FilterFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: FilterFieldComponent, isStandalone: true, selector: "wb-filter-field", inputs: { tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filter" }, host: { listeners: { "focus": "focus()" }, properties: { "attr.tabindex": "this.componentTabindex", "class.empty": "this.empty" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: FilterFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: FilterFieldComponent, isStandalone: true, selector: "wb-filter-field", inputs: { tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filter" }, host: { listeners: { "focus": "focus()" }, properties: { "attr.tabindex": "this.componentTabindex", "class.empty": "this.empty" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => FilterFieldComponent) },
-        ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<label [for]=\"id\" class=\"filter-icon\">\n  <wb-icon icon=\"workbench.search\"/>\n</label>\n<input #input\n       [attr.id]=\"id\"\n       autocomplete=\"off\"\n       [formControl]=\"formControl\"\n       [tabindex]=\"tabindex() ?? 0\"\n       [placeholder]=\"placeholder() ?? ''\">\n<button class=\"clear\" tabindex=\"-1\" (click)=\"onClear()\" [title]=\"('%workbench.clear.tooltip' | wbText)()\">\n  <wb-icon icon=\"workbench.clear\"/>\n</button>\n", styles: [":host{display:inline-flex;flex-direction:row;gap:.5em;padding:.25em .5em}:host>label.filter-icon{flex:none;align-self:center;-webkit-user-select:none;user-select:none;font-size:1.25em}:host>input{all:unset;flex:auto;min-width:0}:host>input::placeholder{color:var(--sci-color-gray-400)}:host>button.clear:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);flex:none;align-self:center}:host>button.clear:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.clear:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.clear:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.clear:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.clear:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host:not(:focus-within):not(:hover)>button.clear:is(button,#sci-reset),:host:has(>input:disabled)>button.clear:is(button,#sci-reset),:host.empty>button.clear:is(button,#sci-reset){visibility:hidden}:host:has(>input:disabled)>label.filter-icon{color:var(--sci-color-text-subtlest)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<label [for]=\"id\" class=\"filter-icon\">\n  <wb-icon icon=\"workbench.search\"/>\n</label>\n<input #input\n       [attr.id]=\"id\"\n       autocomplete=\"off\"\n       [formControl]=\"formControl\"\n       [tabindex]=\"tabindex() ?? 0\"\n       [placeholder]=\"placeholder() ?? ''\">\n<button class=\"clear\" tabindex=\"-1\" (click)=\"onClear()\" [title]=\"('%workbench.clear.tooltip' | wbText)()\">\n  <wb-icon icon=\"workbench.clear\"/>\n</button>\n", styles: [":host{display:inline-flex;flex-direction:row;gap:.5em;padding:.25em .5em}:host>label.filter-icon{flex:none;align-self:center;-webkit-user-select:none;user-select:none;font-size:1.25em}:host>input{all:unset;flex:auto;min-width:0}:host>input::placeholder{color:var(--sci-color-gray-400)}:host>button.clear:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);flex:none;align-self:center}:host>button.clear:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.clear:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.clear:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.clear:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.clear:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host:not(:focus-within):not(:hover)>button.clear:is(button,#sci-reset),:host:has(>input:disabled)>button.clear:is(button,#sci-reset),:host.empty>button.clear:is(button,#sci-reset){visibility:hidden}:host:has(>input:disabled)>label.filter-icon{color:var(--sci-color-text-subtlest)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: TextPipe, name: "wbText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: FilterFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: FilterFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-filter-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -7546,10 +7546,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  */
 class ViewTabContentComponent {
     view = inject(WorkbenchView);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ViewTabContentComponent, isStandalone: true, selector: "wb-view-tab-content", ngImport: i0, template: "@if (view.dirty()) {\n  <wb-icon icon=\"workbench.dirty\" class=\"dirty e2e-dirty\"/>\n}\n\n<span class=\"title e2e-title\">\n  {{(view.title() | wbText)()}}\n</span>\n\n@if (view.heading()) {\n  <span class=\"heading e2e-heading\">\n    {{(view.heading() | wbText)()}}\n  </span>\n}\n", styles: [":host{display:inline-grid;grid-template-columns:1fr;grid-template-rows:1em;gap:.25em}:host:has(wb-icon.dirty){grid-template-columns:auto 1fr}:host>wb-icon.dirty{align-self:center;color:var(--sci-workbench-tab-text-color)}:host>span.title{align-self:center;margin-right:var(--sci-workbench-tab-title-offset-right);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>span.heading{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;grid-column:1/-1;font-family:var(--sci-workbench-tab-heading-font-family),sans-serif;font-size:var(--sci-workbench-tab-heading-font-size);font-weight:var(--sci-workbench-tab-heading-font-weight)}@container viewtab (height < 3.5rem){:host>span.heading{display:none}}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ViewTabContentComponent, isStandalone: true, selector: "wb-view-tab-content", ngImport: i0, template: "@if (view.dirty()) {\n  <wb-icon icon=\"workbench.dirty\" class=\"dirty e2e-dirty\"/>\n}\n\n<span class=\"title e2e-title\">\n  {{(view.title() | wbText)()}}\n</span>\n\n@if (view.heading()) {\n  <span class=\"heading e2e-heading\">\n    {{(view.heading() | wbText)()}}\n  </span>\n}\n", styles: [":host{display:inline-grid;grid-template-columns:1fr;grid-template-rows:1em;gap:.25em}:host:has(wb-icon.dirty){grid-template-columns:auto 1fr}:host>wb-icon.dirty{align-self:center;color:var(--sci-workbench-tab-text-color)}:host>span.title{align-self:center;margin-right:var(--sci-workbench-tab-title-offset-right);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>span.heading{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;grid-column:1/-1;font-family:var(--sci-workbench-tab-heading-font-family),sans-serif;font-size:var(--sci-workbench-tab-heading-font-size);font-weight:var(--sci-workbench-tab-heading-font-weight)}@container viewtab (height < 3.5rem){:host>span.heading{display:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-view-tab-content', imports: [
                         TextPipe,
@@ -7567,9 +7567,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * SPDX-License-Identifier: EPL-2.0
  */
 class ViewListItemComponent {
-    viewId = input.required();
+    viewId = input.required(...(ngDevMode ? [{ debugName: "viewId" }] : []));
     _viewRegistry = inject(WORKBENCH_VIEW_REGISTRY);
-    view = computed(() => this._viewRegistry.get(this.viewId()));
+    view = computed(() => this._viewRegistry.get(this.viewId()), ...(ngDevMode ? [{ debugName: "view" }] : []));
     viewTabContentPortal = this.computeViewTabContentPortal();
     onClose() {
         void this.view().close();
@@ -7588,10 +7588,10 @@ class ViewListItemComponent {
             }));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ViewListItemComponent, isStandalone: true, selector: "wb-view-list-item", inputs: { viewId: { classPropertyName: "viewId", publicName: "viewId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.active": "view().active()", "attr.data-viewid": "view().id" } }, ngImport: i0, template: "<div class=\"content\">\n  <ng-container *cdkPortalOutlet=\"viewTabContentPortal()\"/>\n</div>\n\n@if (view().closable()) {\n  <button (click)=\"onClose()\"\n          [title]=\"('%workbench.close.tooltip' | wbText)()\"\n          [disabled]=\"!view().isClosable()\"\n          class=\"close e2e-close\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:flex;align-items:center;padding:.6em 1em;position:relative;-webkit-user-select:none;user-select:none;gap:1em}:host.active{color:var(--sci-color-accent)}:host.active:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--sci-color-accent)}:host>div.content{flex:auto;display:grid;position:relative}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);flex:none;visibility:hidden;padding:.125em;border-radius:var(--sci-corner-small);color:var(--sci-color-text)}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host:hover>button.close:is(button,#sci-reset){visibility:visible}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ViewListItemComponent, isStandalone: true, selector: "wb-view-list-item", inputs: { viewId: { classPropertyName: "viewId", publicName: "viewId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.active": "view().active()", "attr.data-viewid": "view().id" } }, ngImport: i0, template: "<div class=\"content\">\n  <ng-container *cdkPortalOutlet=\"viewTabContentPortal()\"/>\n</div>\n\n@if (view().closable()) {\n  <button (click)=\"onClose()\"\n          [title]=\"('%workbench.close.tooltip' | wbText)()\"\n          [disabled]=\"!view().isClosable()\"\n          class=\"close e2e-close\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:flex;align-items:center;padding:.6em 1em;position:relative;-webkit-user-select:none;user-select:none;gap:1em}:host.active{color:var(--sci-color-accent)}:host.active:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--sci-color-accent)}:host>div.content{flex:auto;display:grid;position:relative}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);flex:none;visibility:hidden;padding:.125em;border-radius:var(--sci-corner-small);color:var(--sci-color-text)}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host:hover>button.close:is(button,#sci-reset){visibility:visible}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: TextPipe, name: "wbText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-view-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CdkPortalOutlet,
@@ -7630,15 +7630,15 @@ class ViewListComponent {
         this.viewsInsideTabbar = computed(() => views
             .filter(({ view }) => view.scrolledIntoView())
             .filter(view => view.matches(filterText()))
-            .map(({ view }) => view));
+            .map(({ view }) => view), ...(ngDevMode ? [{ debugName: "viewsInsideTabbar" }] : []));
         this.viewsOutsideTabbar = computed(() => views
             .filter(({ view }) => !view.scrolledIntoView())
             .filter(view => view.matches(filterText()))
-            .map(({ view }) => view));
+            .map(({ view }) => view), ...(ngDevMode ? [{ debugName: "viewsOutsideTabbar" }] : []));
         const effectRef = effect(() => {
             this._filterFieldComponent().focus();
             effectRef.destroy();
-        });
+        }, ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
     }
     onActivateView(view) {
         void view.activate();
@@ -7653,10 +7653,10 @@ class ViewListComponent {
     onDocumentCloseEvent() {
         this._overlayRef.dispose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ViewListComponent, isStandalone: true, selector: "wb-view-list", host: { listeners: { "document:keydown.escape": "onEscape()", "mousedown": "onHostCloseEvent($event)", "sci-microfrontend-focusin": "onHostCloseEvent($event)", "document:mousedown": "onDocumentCloseEvent()", "document:sci-microfrontend-focusin": "onDocumentCloseEvent()" }, properties: { "attr.data-partid": "this.partId" } }, viewQueries: [{ propertyName: "_filterFieldComponent", first: true, predicate: FilterFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<wb-filter-field [formControl]=\"filterFormControl\" class=\"e2e-view-filter\"/>\n\n@if (viewsOutsideTabbar().length || viewsInsideTabbar().length) {\n  <sci-viewport>\n    @for (view of viewsOutsideTabbar(); track view.id) {\n      <wb-view-list-item [viewId]=\"view.id\" (click)=\"onActivateView(view)\"/>\n    }\n    @if (viewsOutsideTabbar().length && viewsInsideTabbar().length) {\n      <hr>\n    }\n    @for (view of viewsInsideTabbar(); track view.id) {\n      <wb-view-list-item [viewId]=\"view.id\" (click)=\"onActivateView(view)\"/>\n    }\n  </sci-viewport>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.75em;width:var(--sci-workbench-contextmenu-width);border:1px solid var(--sci-color-border);color:var(--sci-color-text);background-color:var(--sci-color-background-elevation);border-radius:var(--sci-corner);overflow:hidden}.cdk-overlay-pane.wb-view-list-menu.wb-south :host{margin-top:1px}.cdk-overlay-pane.wb-view-list-menu.wb-north :host{margin-bottom:1px}:host>wb-filter-field{flex:none;margin:.5em .25em}:host>sci-viewport{flex:auto;max-height:350px}:host>sci-viewport::part(content){display:flex;flex-direction:column;gap:1px;padding-top:1px}:host>sci-viewport>wb-view-list-item{position:relative;cursor:var(--sci-workbench-button-cursor)}:host>sci-viewport>wb-view-list-item:hover{background-color:var(--sci-color-background-elevation-hover);box-shadow:0 0 0 1px var(--sci-color-border)}:host>sci-viewport>wb-view-list-item:has(+hr):after{position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:var(--sci-color-border);content:\"\"}:host>sci-viewport>hr{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FilterFieldComponent, selector: "wb-filter-field", inputs: ["tabindex", "placeholder", "disabled"], outputs: ["filter"] }, { kind: "component", type: ViewListItemComponent, selector: "wb-view-list-item", inputs: ["viewId"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ViewListComponent, isStandalone: true, selector: "wb-view-list", host: { listeners: { "document:keydown.escape": "onEscape()", "mousedown": "onHostCloseEvent($event)", "sci-microfrontend-focusin": "onHostCloseEvent($event)", "document:mousedown": "onDocumentCloseEvent()", "document:sci-microfrontend-focusin": "onDocumentCloseEvent()" }, properties: { "attr.data-partid": "this.partId" } }, viewQueries: [{ propertyName: "_filterFieldComponent", first: true, predicate: FilterFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<wb-filter-field [formControl]=\"filterFormControl\" class=\"e2e-view-filter\"/>\n\n@if (viewsOutsideTabbar().length || viewsInsideTabbar().length) {\n  <sci-viewport>\n    @for (view of viewsOutsideTabbar(); track view.id) {\n      <wb-view-list-item [viewId]=\"view.id\" (click)=\"onActivateView(view)\"/>\n    }\n    @if (viewsOutsideTabbar().length && viewsInsideTabbar().length) {\n      <hr>\n    }\n    @for (view of viewsInsideTabbar(); track view.id) {\n      <wb-view-list-item [viewId]=\"view.id\" (click)=\"onActivateView(view)\"/>\n    }\n  </sci-viewport>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.75em;width:var(--sci-workbench-contextmenu-width);border:1px solid var(--sci-color-border);color:var(--sci-color-text);background-color:var(--sci-color-background-elevation);border-radius:var(--sci-corner);overflow:hidden}.cdk-overlay-pane.wb-view-list-menu.wb-south :host{margin-top:1px}.cdk-overlay-pane.wb-view-list-menu.wb-north :host{margin-bottom:1px}:host>wb-filter-field{flex:none;margin:.5em .25em}:host>sci-viewport{flex:auto;max-height:350px}:host>sci-viewport::part(content){display:flex;flex-direction:column;gap:1px;padding-top:1px}:host>sci-viewport>wb-view-list-item{position:relative;cursor:var(--sci-workbench-button-cursor)}:host>sci-viewport>wb-view-list-item:hover{background-color:var(--sci-color-background-elevation-hover);box-shadow:0 0 0 1px var(--sci-color-border)}:host>sci-viewport>wb-view-list-item:has(+hr):after{position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:var(--sci-color-border);content:\"\"}:host>sci-viewport>hr{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FilterFieldComponent, selector: "wb-filter-field", inputs: ["tabindex", "placeholder", "disabled"], outputs: ["filter"] }, { kind: "component", type: ViewListItemComponent, selector: "wb-view-list-item", inputs: ["viewId"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-view-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ReactiveFormsModule,
@@ -7730,10 +7730,10 @@ class ViewListButtonComponent {
     _destroyRef = inject(DestroyRef);
     /** Number of views that are scrolled out of the tab bar. */
     scrolledOutOfViewTabCount;
-    menuState = signal('closed');
+    menuState = signal('closed', ...(ngDevMode ? [{ debugName: "menuState" }] : []));
     constructor() {
         const part = inject(WorkbenchPart);
-        this.scrolledOutOfViewTabCount = computed(() => part.views().reduce((count, view) => view.scrolledIntoView() ? count : count + 1, 0));
+        this.scrolledOutOfViewTabCount = computed(() => part.views().reduce((count, view) => view.scrolledIntoView() ? count : count + 1, 0), ...(ngDevMode ? [{ debugName: "scrolledOutOfViewTabCount" }] : []));
     }
     onClick() {
         this.menuState.set('open');
@@ -7757,10 +7757,10 @@ class ViewListButtonComponent {
         this._destroyRef.onDestroy(() => overlayRef.dispose());
         return new Promise(resolve => componentRef.onDestroy(resolve));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewListButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ViewListButtonComponent, isStandalone: true, selector: "wb-view-list-button", host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onClick()" }, properties: { "class.menu-open": "menuState() === 'open'", "attr.tabindex": "0" } }, ngImport: i0, template: "<wb-icon icon=\"workbench.menu_down\" class=\"menu-down\"/>\n@if (scrolledOutOfViewTabCount(); as count) {\n  <span class=\"count e2e-hidden-tab-count\">{{count}}</span>\n}\n", styles: [":host{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);display:flex;flex-direction:column}:host:hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host:active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host:focus:not(:focus-visible){outline:none}:host:focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host:disabled{color:var(--sci-color-gray-500)}:host.menu-open{background-color:var(--sci-workbench-button-background-color-hover)}:host>wb-icon.menu-down{flex:none}:host>span.count{flex:none;font-size:var(--sci-workbench-part-hidden-tab-count-size);line-height:.75}@container style(--sci-workbench-part-hidden-tab-count-size: 0){:host>span.count{display:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewListButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ViewListButtonComponent, isStandalone: true, selector: "wb-view-list-button", host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onClick()" }, properties: { "class.menu-open": "menuState() === 'open'", "attr.tabindex": "0" } }, ngImport: i0, template: "<wb-icon icon=\"workbench.menu_down\" class=\"menu-down\"/>\n@if (scrolledOutOfViewTabCount(); as count) {\n  <span class=\"count e2e-hidden-tab-count\">{{count}}</span>\n}\n", styles: [":host{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);display:flex;flex-direction:column}:host:hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host:active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host:focus:not(:focus-visible){outline:none}:host:focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host:disabled{color:var(--sci-color-gray-500)}:host.menu-open{background-color:var(--sci-workbench-button-background-color-hover)}:host>wb-icon.menu-down{flex:none}:host>span.count{flex:none;font-size:var(--sci-workbench-part-hidden-tab-count-size);line-height:.75}@container style(--sci-workbench-part-hidden-tab-count-size: 0){:host>span.count{display:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewListButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewListButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-view-list-button', host: {
                         '[class.menu-open]': `menuState() === 'open'`,
@@ -7800,10 +7800,10 @@ class WbFormatAcceleratorPipe {
             .map(key => key[0].toUpperCase() + key.substring(1).toLowerCase())
             .join('+');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WbFormatAcceleratorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: WbFormatAcceleratorPipe, isStandalone: true, name: "wbFormatAccelerator" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WbFormatAcceleratorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: WbFormatAcceleratorPipe, isStandalone: true, name: "wbFormatAccelerator" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WbFormatAcceleratorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WbFormatAcceleratorPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbFormatAccelerator' }]
         }] });
@@ -7924,7 +7924,7 @@ function fromMoveHandle$(handle) {
  * respective DOM properties.
  */
 class MovableDirective {
-    wbHandleElement = input.required({ alias: 'wbHandle' });
+    wbHandleElement = input.required(...(ngDevMode ? [{ debugName: "wbHandleElement", alias: 'wbHandle' }] : [{ alias: 'wbHandle' }]));
     wbMove = output({ alias: 'wbMovableMove' });
     _workbenchLayoutService = inject(WorkbenchLayoutService);
     _host = inject(ElementRef).nativeElement;
@@ -8006,10 +8006,10 @@ class MovableDirective {
             dispose: () => subscription.unsubscribe(),
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MovableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: MovableDirective, isStandalone: true, selector: "[wbMovable]", inputs: { wbHandleElement: { classPropertyName: "wbHandleElement", publicName: "wbHandle", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { wbMove: "wbMovableMove" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MovableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: MovableDirective, isStandalone: true, selector: "[wbMovable]", inputs: { wbHandleElement: { classPropertyName: "wbHandleElement", publicName: "wbHandle", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { wbMove: "wbMovableMove" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MovableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MovableDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[wbMovable]' }]
         }], ctorParameters: () => [] });
@@ -8046,7 +8046,7 @@ const HANDLE_SIZE = 6;
  * - must be horizontally centered in its layout
  */
 class ResizableDirective {
-    enabled = input(true, { alias: 'wbResizableEnabled' });
+    enabled = input(true, ...(ngDevMode ? [{ debugName: "enabled", alias: 'wbResizableEnabled' }] : [{ alias: 'wbResizableEnabled' }]));
     wbResize = output({ alias: 'wbResizableResize' });
     _workbenchLayoutService = inject(WorkbenchLayoutService);
     _host = inject(ElementRef).nativeElement;
@@ -8305,10 +8305,10 @@ class ResizableDirective {
             translateX: getComputedTranslateX(this._host) + delta / 2, // Move only by half the delta as centered horizontally.
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: ResizableDirective, isStandalone: true, selector: "[wbResizable]", inputs: { enabled: { classPropertyName: "enabled", publicName: "wbResizableEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wbResize: "wbResizableResize" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: ResizableDirective, isStandalone: true, selector: "[wbResizable]", inputs: { enabled: { classPropertyName: "enabled", publicName: "wbResizableEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wbResize: "wbResizableResize" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResizableDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[wbResizable]' }]
         }], ctorParameters: () => [] });
@@ -8419,10 +8419,10 @@ class DialogHeaderComponent {
     onCloseMouseDown(event) {
         event.stopPropagation(); // Prevent dragging the dialog with the close button.
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: DialogHeaderComponent, isStandalone: true, selector: "wb-dialog-header", ngImport: i0, template: "@if (dialog.title(); as title) {\n  <div class=\"title e2e-title\">\n    <span>{{(title | wbText)()}}</span>\n  </div>\n}\n\n@if (dialog.closable()) {\n  <button tabindex=\"-1\" class=\"close e2e-close\"\n          [title]=\"('%workbench.close.tooltip' | wbText)()\"\n          (mousedown)=\"onCloseMouseDown($event)\"\n          (click)=\"onCloseClick()\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:flex;gap:var(--sci-workbench-dialog-padding);place-content:flex-end;padding-inline:var(--sci-workbench-dialog-padding);background-color:var(--sci-workbench-dialog-header-background-color);-webkit-user-select:none;user-select:none;height:var(--sci-workbench-dialog-header-height)}:host>div.title{flex:auto;display:flex;align-items:center;position:relative}:host>div.title>span{position:absolute;left:0;right:0;line-height:1.5;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--sci-workbench-dialog-title-font-family),sans-serif;font-size:var(--sci-workbench-dialog-title-font-size);font-weight:var(--sci-workbench-dialog-title-font-weight);text-align:var(--sci-workbench-dialog-title-align)}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);flex:none;align-self:center;border-radius:var(--sci-corner-small);padding:.125em}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: DialogHeaderComponent, isStandalone: true, selector: "wb-dialog-header", ngImport: i0, template: "@if (dialog.title(); as title) {\n  <div class=\"title e2e-title\">\n    <span>{{(title | wbText)()}}</span>\n  </div>\n}\n\n@if (dialog.closable()) {\n  <button tabindex=\"-1\" class=\"close e2e-close\"\n          [title]=\"('%workbench.close.tooltip' | wbText)()\"\n          (mousedown)=\"onCloseMouseDown($event)\"\n          (click)=\"onCloseClick()\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:flex;gap:var(--sci-workbench-dialog-padding);place-content:flex-end;padding-inline:var(--sci-workbench-dialog-padding);background-color:var(--sci-workbench-dialog-header-background-color);-webkit-user-select:none;user-select:none;height:var(--sci-workbench-dialog-header-height)}:host>div.title{flex:auto;display:flex;align-items:center;position:relative}:host>div.title>span{position:absolute;left:0;right:0;line-height:1.5;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--sci-workbench-dialog-title-font-family),sans-serif;font-size:var(--sci-workbench-dialog-title-font-size);font-weight:var(--sci-workbench-dialog-title-font-weight);text-align:var(--sci-workbench-dialog-title-align)}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);flex:none;align-self:center;border-radius:var(--sci-corner-small);padding:.125em}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DialogHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-dialog-header', imports: [
                         TextPipe,
@@ -8458,10 +8458,10 @@ class NullIfEmptyPipe {
         }
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NullIfEmptyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: NullIfEmptyPipe, isStandalone: true, name: "wbNullIfEmpty" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NullIfEmptyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: NullIfEmptyPipe, isStandalone: true, name: "wbNullIfEmpty" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NullIfEmptyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NullIfEmptyPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbNullIfEmpty' }]
         }] });
@@ -8482,10 +8482,10 @@ class DialogActionFilterPipe {
     transform(actions, align) {
         return actions?.filter(action => action.align() === align) ?? [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DialogActionFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: DialogActionFilterPipe, isStandalone: true, name: "wbDialogActionFilter" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogActionFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: DialogActionFilterPipe, isStandalone: true, name: "wbDialogActionFilter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DialogActionFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogActionFilterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbDialogActionFilter' }]
         }] });
@@ -8504,10 +8504,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  */
 class DialogFooterComponent {
     dialog = inject(ɵWorkbenchDialog);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: DialogFooterComponent, isStandalone: true, selector: "wb-dialog-footer", ngImport: i0, template: "<!-- Start Actions -->\n@if (dialog.actions | wbDialogActionFilter:'start' | wbNullIfEmpty; as actions) {\n  <div class=\"actions start\">\n    @for (action of actions; track action) {\n      <ng-container *ngTemplateOutlet=\"action.template\"/>\n    }\n  </div>\n}\n\n<!-- End Actions -->\n@if (dialog.actions | wbDialogActionFilter:'end' | wbNullIfEmpty; as actions) {\n  <div class=\"actions end\">\n    @for (action of actions; track action) {\n      <ng-container *ngTemplateOutlet=\"action.template\"/>\n    }\n  </div>\n}\n", styles: [":host{display:flex;padding:calc(.75 * var(--sci-workbench-dialog-padding)) var(--sci-workbench-dialog-padding);gap:calc(2 * var(--sci-workbench-dialog-padding))}:host>div.actions{flex:auto;display:flex;align-items:center;gap:calc(.5 * var(--sci-workbench-dialog-padding))}:host>div.actions.start{place-content:flex-start}:host>div.actions.end{place-content:flex-end}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NullIfEmptyPipe, name: "wbNullIfEmpty" }, { kind: "pipe", type: DialogActionFilterPipe, name: "wbDialogActionFilter" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: DialogFooterComponent, isStandalone: true, selector: "wb-dialog-footer", ngImport: i0, template: "<!-- Start Actions -->\n@if (dialog.actions | wbDialogActionFilter:'start' | wbNullIfEmpty; as actions) {\n  <div class=\"actions start\">\n    @for (action of actions; track action) {\n      <ng-container *ngTemplateOutlet=\"action.template\"/>\n    }\n  </div>\n}\n\n<!-- End Actions -->\n@if (dialog.actions | wbDialogActionFilter:'end' | wbNullIfEmpty; as actions) {\n  <div class=\"actions end\">\n    @for (action of actions; track action) {\n      <ng-container *ngTemplateOutlet=\"action.template\"/>\n    }\n  </div>\n}\n", styles: [":host{display:flex;padding:calc(.75 * var(--sci-workbench-dialog-padding)) var(--sci-workbench-dialog-padding);gap:calc(2 * var(--sci-workbench-dialog-padding))}:host>div.actions{flex:auto;display:flex;align-items:center;gap:calc(.5 * var(--sci-workbench-dialog-padding))}:host>div.actions.start{place-content:flex-start}:host>div.actions.end{place-content:flex-end}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NullIfEmptyPipe, name: "wbNullIfEmpty" }, { kind: "pipe", type: DialogActionFilterPipe, name: "wbDialogActionFilter" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DialogFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DialogFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-dialog-footer', imports: [
                         NgTemplateOutlet,
@@ -8558,10 +8558,10 @@ class GlassPaneDirective {
     ngOnDestroy() {
         this._glassPane?.dispose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: GlassPaneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: GlassPaneDirective, isStandalone: true, selector: "[wbGlassPane]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GlassPaneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: GlassPaneDirective, isStandalone: true, selector: "[wbGlassPane]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: GlassPaneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: GlassPaneDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[wbGlassPane]' }]
         }], ctorParameters: () => [] });
@@ -8670,9 +8670,9 @@ class WorkbenchDialogComponent {
     /** Element of the dialog that has or last had focus */
     _activeElement$ = new BehaviorSubject(undefined);
     dialog = inject(ɵWorkbenchDialog);
-    headerHeight = signal(undefined);
-    transformTranslateX = signal(0);
-    transformTranslateY = signal(0);
+    headerHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "headerHeight" }] : []));
+    transformTranslateX = signal(0, ...(ngDevMode ? [{ debugName: "transformTranslateX" }] : []));
+    transformTranslateY = signal(0, ...(ngDevMode ? [{ debugName: "transformTranslateY" }] : []));
     constructor() {
         this.setDialogOffset();
         this.addHostCssClasses();
@@ -8769,14 +8769,14 @@ class WorkbenchDialogComponent {
     onHeaderDimensionChange(dimension) {
         this.headerHeight.set(`${dimension.offsetHeight}px`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: WorkbenchDialogComponent, isStandalone: true, selector: "wb-dialog", host: { listeners: { "keydown.escape": "onEscape($event)" }, properties: { "attr.data-dialogid": "dialog.id", "class.justified": "!dialog.padding()", "style.--\u0275dialog-transform-translate-x": "transformTranslateX()", "style.--\u0275dialog-transform-translate-y": "transformTranslateY()", "style.--\u0275dialog-min-height": "dialog.size.minHeight() ?? headerHeight()", "style.--\u0275dialog-height": "dialog.size.height()", "style.--\u0275dialog-max-height": "dialog.size.maxHeight()", "style.--\u0275dialog-min-width": "dialog.size.minWidth() ?? '100px'", "style.--\u0275dialog-width": "dialog.size.width()", "style.--\u0275dialog-max-width": "dialog.size.maxWidth()" } }, viewQueries: [{ propertyName: "_cdkTrapFocus", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }, { propertyName: "_dialogElement", first: true, predicate: ["dialog_element"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dialog e2e-dialog\"\n     [class.blinking]=\"dialog.blinking$ | async\"\n     [tabindex]=\"-1\"\n     wbMovable [wbHandle]=\"header\" (wbMovableMove)=\"onMove($event)\"\n     wbResizable [wbResizableEnabled]=\"dialog.resizable()\" (wbResizableResize)=\"onResize($event)\"\n     @enter\n     [@.disabled]=\"!dialog.animate\"\n     wbGlassPane\n     #dialog_element>\n  <div class=\"dialog-box e2e-dialog-box\" cdkTrapFocus>\n    <header #header\n            class=\"e2e-dialog-header\"\n            [class.divider]=\"dialog.header?.divider() ?? true\"\n            sciDimension (sciDimensionChange)=\"onHeaderDimensionChange($event)\">\n      <ng-container *ngTemplateOutlet=\"dialog.header?.template ?? default_dialog_header\"/>\n    </header>\n\n    <sci-viewport class=\"content e2e-dialog-content\">\n      <ng-container *ngComponentOutlet=\"dialog.component; inputs: dialog.inputs\"/>\n    </sci-viewport>\n\n    @if (dialog.footer || dialog.actions.length) {\n      <footer class=\"e2e-dialog-footer\" [class.divider]=\"dialog.footer?.divider() ?? true\">\n        <ng-container *ngTemplateOutlet=\"dialog.footer?.template ?? default_dialog_footer\"/>\n      </footer>\n    }\n  </div>\n</div>\n\n<ng-template #default_dialog_header>\n  <wb-dialog-header/>\n</ng-template>\n\n<ng-template #default_dialog_footer>\n  <wb-dialog-footer/>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--\\275 dialog-transform-translate-x: 0;--\\275 dialog-transform-translate-y: 0;--\\275 dialog-min-height: initial;--\\275 dialog-height: initial;--\\275 dialog-max-height: initial;--\\275 dialog-min-width: initial;--\\275 dialog-width: initial;--\\275 dialog-max-width: initial;--\\275 dialog-padding: var(--sci-workbench-dialog-padding);display:flex;flex-direction:column;align-items:center;position:relative}:host.justified{--\\275 dialog-padding: 0}:host>div.dialog{display:flex;flex-direction:column;position:absolute;top:3%;color:var(--sci-color-text);transform:translate(calc(1px * var(--\\275 dialog-transform-translate-x))) translateY(calc(1px * var(--\\275 dialog-transform-translate-y)));min-height:var(--\\275 dialog-min-height);height:var(--\\275 dialog-height);max-height:var(--\\275 dialog-max-height);min-width:var(--\\275 dialog-min-width);width:var(--\\275 dialog-width);max-width:var(--\\275 dialog-max-width);outline:none;pointer-events:auto}:host>div.dialog>div.dialog-box{flex:auto;display:flex;flex-direction:column;gap:calc(1.25 * var(--\\275 dialog-padding));border:1px solid var(--sci-color-border);border-radius:var(--sci-corner);background-color:var(--sci-color-background-elevation);box-shadow:var(--sci-elevation) var(--sci-static-color-black);overflow:hidden}:host>div.dialog>div.dialog-box>header{flex:none}:host>div.dialog>div.dialog-box>header.divider{border-bottom:1px solid var(--sci-color-border)}:host>div.dialog>div.dialog-box>sci-viewport{flex:auto}:host>div.dialog>div.dialog-box>sci-viewport::part(content){padding-inline:var(--\\275 dialog-padding)}:host>div.dialog>div.dialog-box>footer{flex:none}:host>div.dialog>div.dialog-box>footer.divider{border-top:1px solid var(--sci-color-border)}:host>div.dialog.blinking{animation-duration:50ms;animation-iteration-count:infinite;animation-name:blink-animation}@keyframes blink-animation{0%{transform:translate(calc(1px * var(--\\275 dialog-transform-translate-x) - 2px)) translateY(calc(1px * var(--\\275 dialog-transform-translate-y) - 1px))}to{transform:translate(calc(1px * var(--\\275 dialog-transform-translate-x) + 2px)) translateY(calc(1px * var(--\\275 dialog-transform-translate-y) + 1px))}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: MovableDirective, selector: "[wbMovable]", inputs: ["wbHandle"], outputs: ["wbMovableMove"] }, { kind: "directive", type: ResizableDirective, selector: "[wbResizable]", inputs: ["wbResizableEnabled"], outputs: ["wbResizableResize"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: SciDimensionDirective, selector: "[sciDimension]", inputs: ["emitOutsideAngular"], outputs: ["sciDimensionChange"] }, { kind: "component", type: DialogHeaderComponent, selector: "wb-dialog-header" }, { kind: "component", type: DialogFooterComponent, selector: "wb-dialog-footer" }, { kind: "directive", type: GlassPaneDirective, selector: "[wbGlassPane]" }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: WorkbenchDialogComponent, isStandalone: true, selector: "wb-dialog", host: { listeners: { "keydown.escape": "onEscape($event)" }, properties: { "attr.data-dialogid": "dialog.id", "class.justified": "!dialog.padding()", "style.--\u0275dialog-transform-translate-x": "transformTranslateX()", "style.--\u0275dialog-transform-translate-y": "transformTranslateY()", "style.--\u0275dialog-min-height": "dialog.size.minHeight() ?? headerHeight()", "style.--\u0275dialog-height": "dialog.size.height()", "style.--\u0275dialog-max-height": "dialog.size.maxHeight()", "style.--\u0275dialog-min-width": "dialog.size.minWidth() ?? '100px'", "style.--\u0275dialog-width": "dialog.size.width()", "style.--\u0275dialog-max-width": "dialog.size.maxWidth()" } }, viewQueries: [{ propertyName: "_cdkTrapFocus", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }, { propertyName: "_dialogElement", first: true, predicate: ["dialog_element"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dialog e2e-dialog\"\n     [class.blinking]=\"dialog.blinking$ | async\"\n     [tabindex]=\"-1\"\n     wbMovable [wbHandle]=\"header\" (wbMovableMove)=\"onMove($event)\"\n     wbResizable [wbResizableEnabled]=\"dialog.resizable()\" (wbResizableResize)=\"onResize($event)\"\n     @enter\n     [@.disabled]=\"!dialog.animate\"\n     wbGlassPane\n     #dialog_element>\n  <div class=\"dialog-box e2e-dialog-box\" cdkTrapFocus>\n    <header #header\n            class=\"e2e-dialog-header\"\n            [class.divider]=\"dialog.header?.divider() ?? true\"\n            sciDimension (sciDimensionChange)=\"onHeaderDimensionChange($event)\">\n      <ng-container *ngTemplateOutlet=\"dialog.header?.template ?? default_dialog_header\"/>\n    </header>\n\n    <sci-viewport class=\"content e2e-dialog-content\">\n      <ng-container *ngComponentOutlet=\"dialog.component; inputs: dialog.inputs\"/>\n    </sci-viewport>\n\n    @if (dialog.footer || dialog.actions.length) {\n      <footer class=\"e2e-dialog-footer\" [class.divider]=\"dialog.footer?.divider() ?? true\">\n        <ng-container *ngTemplateOutlet=\"dialog.footer?.template ?? default_dialog_footer\"/>\n      </footer>\n    }\n  </div>\n</div>\n\n<ng-template #default_dialog_header>\n  <wb-dialog-header/>\n</ng-template>\n\n<ng-template #default_dialog_footer>\n  <wb-dialog-footer/>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--\\275 dialog-transform-translate-x: 0;--\\275 dialog-transform-translate-y: 0;--\\275 dialog-min-height: initial;--\\275 dialog-height: initial;--\\275 dialog-max-height: initial;--\\275 dialog-min-width: initial;--\\275 dialog-width: initial;--\\275 dialog-max-width: initial;--\\275 dialog-padding: var(--sci-workbench-dialog-padding);display:flex;flex-direction:column;align-items:center;position:relative}:host.justified{--\\275 dialog-padding: 0}:host>div.dialog{display:flex;flex-direction:column;position:absolute;top:3%;color:var(--sci-color-text);transform:translate(calc(1px * var(--\\275 dialog-transform-translate-x))) translateY(calc(1px * var(--\\275 dialog-transform-translate-y)));min-height:var(--\\275 dialog-min-height);height:var(--\\275 dialog-height);max-height:var(--\\275 dialog-max-height);min-width:var(--\\275 dialog-min-width);width:var(--\\275 dialog-width);max-width:var(--\\275 dialog-max-width);outline:none;pointer-events:auto}:host>div.dialog>div.dialog-box{flex:auto;display:flex;flex-direction:column;gap:calc(1.25 * var(--\\275 dialog-padding));border:1px solid var(--sci-color-border);border-radius:var(--sci-corner);background-color:var(--sci-color-background-elevation);box-shadow:var(--sci-elevation) var(--sci-static-color-black);overflow:hidden}:host>div.dialog>div.dialog-box>header{flex:none}:host>div.dialog>div.dialog-box>header.divider{border-bottom:1px solid var(--sci-color-border)}:host>div.dialog>div.dialog-box>sci-viewport{flex:auto}:host>div.dialog>div.dialog-box>sci-viewport::part(content){padding-inline:var(--\\275 dialog-padding)}:host>div.dialog>div.dialog-box>footer{flex:none}:host>div.dialog>div.dialog-box>footer.divider{border-top:1px solid var(--sci-color-border)}:host>div.dialog.blinking{animation-duration:50ms;animation-iteration-count:infinite;animation-name:blink-animation}@keyframes blink-animation{0%{transform:translate(calc(1px * var(--\\275 dialog-transform-translate-x) - 2px)) translateY(calc(1px * var(--\\275 dialog-transform-translate-y) - 1px))}to{transform:translate(calc(1px * var(--\\275 dialog-transform-translate-x) + 2px)) translateY(calc(1px * var(--\\275 dialog-transform-translate-y) + 1px))}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: MovableDirective, selector: "[wbMovable]", inputs: ["wbHandle"], outputs: ["wbMovableMove"] }, { kind: "directive", type: ResizableDirective, selector: "[wbResizable]", inputs: ["wbResizableEnabled"], outputs: ["wbResizableResize"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: SciDimensionDirective, selector: "[sciDimension]", inputs: ["emitOutsideAngular"], outputs: ["sciDimensionChange"] }, { kind: "component", type: DialogHeaderComponent, selector: "wb-dialog-header" }, { kind: "component", type: DialogFooterComponent, selector: "wb-dialog-footer" }, { kind: "directive", type: GlassPaneDirective, selector: "[wbGlassPane]" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [
             configureDialogGlassPane(),
         ], animations: [
             trigger('enter', provideEnterAnimation()),
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-dialog', imports: [
                         NgComponentOutlet,
@@ -8860,11 +8860,11 @@ class ɵWorkbenchDialog {
     _blink$ = new Subject();
     _focusMonitor = inject(WorkbenchFocusMonitor);
     _attached;
-    _title = signal(undefined);
-    _closable = signal(true);
-    _resizable = signal(true);
-    _padding = signal(true);
-    _cssClass = signal([]);
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _closable = signal(true, ...(ngDevMode ? [{ debugName: "_closable" }] : []));
+    _resizable = signal(true, ...(ngDevMode ? [{ debugName: "_resizable" }] : []));
+    _padding = signal(true, ...(ngDevMode ? [{ debugName: "_padding" }] : []));
+    _cssClass = signal([], ...(ngDevMode ? [{ debugName: "_cssClass" }] : []));
     /**
      * Result (or error) to be passed to the dialog opener.
      */
@@ -8875,7 +8875,7 @@ class ɵWorkbenchDialog {
      */
     blockedBy$ = new BehaviorSubject(null);
     size = new ɵWorkbenchDialogSize();
-    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id);
+    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id, ...(ngDevMode ? [{ debugName: "focused" }] : []));
     blinking$ = new BehaviorSubject(false);
     context = {
         view: inject(ɵWorkbenchView, { optional: true }),
@@ -9096,7 +9096,7 @@ class ɵWorkbenchDialog {
         }
         else {
             const workbenchElementRef = inject(WORKBENCH_ELEMENT_REF);
-            const hostElement = computed(() => (this.context.view ? this.context.view.slot.portal.element() : workbenchElementRef()?.element.nativeElement));
+            const hostElement = computed(() => (this.context.view ? this.context.view.slot.portal.element() : workbenchElementRef()?.element.nativeElement), ...(ngDevMode ? [{ debugName: "hostElement" }] : []));
             const hostBounds = boundingClientRect(hostElement);
             const viewDragService = inject(ViewDragService);
             effect(() => {
@@ -9220,10 +9220,10 @@ class ɵWorkbenchDialogService {
     async waitUntilApplicationModalDialogsClosed() {
         await firstValueFrom(this._dialogRegistry.top$().pipe(filter(top => !top)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -9313,10 +9313,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * - `--sci-workbench-dialog-title-align`
  */
 class WorkbenchDialogService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogService, providedIn: 'root', useExisting: ɵWorkbenchDialogService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogService, providedIn: 'root', useExisting: ɵWorkbenchDialogService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useExisting: ɵWorkbenchDialogService }]
         }] });
@@ -9331,11 +9331,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * SPDX-License-Identifier: EPL-2.0
  */
 class MessageBoxFooterComponent {
-    actions = input.required();
-    severity = input.required();
+    actions = input.required(...(ngDevMode ? [{ debugName: "actions" }] : []));
+    severity = input.required(...(ngDevMode ? [{ debugName: "severity" }] : []));
     action = output();
     preferredSizeChange = output();
-    _actionButtons = viewChildren('action_button');
+    _actionButtons = viewChildren('action_button', ...(ngDevMode ? [{ debugName: "_actionButtons" }] : []));
     constructor() {
         void this.emitPreferredSize();
     }
@@ -9360,10 +9360,10 @@ class MessageBoxFooterComponent {
             host.classList.remove('calculating-min-width');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MessageBoxFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: MessageBoxFooterComponent, isStandalone: true, selector: "wb-message-box-footer", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action", preferredSizeChange: "preferredSizeChange" }, host: { properties: { "attr.data-severity": "severity()" } }, viewQueries: [{ propertyName: "_actionButtons", predicate: ["action_button"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (action of actions() | keyvalue:insertionSortOrderFn; track action.key) {\n  <button #action_button\n          (click)=\"onAction(action.key)\"\n          (keydown.arrowLeft)=\"onArrowKey($index, 'left')\"\n          (keydown.arrowRight)=\"onArrowKey($index, 'right')\"\n          [attr.data-action]=\"action.key\"\n          class=\"action e2e-action\">\n    {{(action.value | wbText)()}}\n  </button>\n\n  @if (!$last) {\n    <span class=\"divider\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:flex;height:3em;background-color:var(--sci-color-background-secondary);color:var(--sci-color-text)}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host.calculating-min-width{position:absolute}:host>button.action:is(button,#sci-reset){all:unset;flex:1;margin:2px;border:1px solid transparent;border-radius:var(--sci-corner-small);transition:border-color ease-in-out .15s;cursor:var(--sci-workbench-messagebox-action-cursor);-webkit-user-select:none;user-select:none;text-align:center;min-width:7.5em;padding-inline:.5em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button.action:is(button,#sci-reset):focus,:host>button.action:is(button,#sci-reset):active{outline:none;color:var(--\\275message-box-severity-color);border-color:var(--\\275message-box-severity-color)}:host>button.action:is(button,#sci-reset):hover{background-color:var(--sci-workbench-messagebox-action-background-color-hover)}:host>span.divider{width:1px;background-color:var(--sci-color-border)}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MessageBoxFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MessageBoxFooterComponent, isStandalone: true, selector: "wb-message-box-footer", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action", preferredSizeChange: "preferredSizeChange" }, host: { properties: { "attr.data-severity": "severity()" } }, viewQueries: [{ propertyName: "_actionButtons", predicate: ["action_button"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (action of actions() | keyvalue:insertionSortOrderFn; track action.key) {\n  <button #action_button\n          (click)=\"onAction(action.key)\"\n          (keydown.arrowLeft)=\"onArrowKey($index, 'left')\"\n          (keydown.arrowRight)=\"onArrowKey($index, 'right')\"\n          [attr.data-action]=\"action.key\"\n          class=\"action e2e-action\">\n    {{(action.value | wbText)()}}\n  </button>\n\n  @if (!$last) {\n    <span class=\"divider\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:flex;height:3em;background-color:var(--sci-color-background-secondary);color:var(--sci-color-text)}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host.calculating-min-width{position:absolute}:host>button.action:is(button,#sci-reset){all:unset;flex:1;margin:2px;border:1px solid transparent;border-radius:var(--sci-corner-small);transition:border-color ease-in-out .15s;cursor:var(--sci-workbench-messagebox-action-cursor);-webkit-user-select:none;user-select:none;text-align:center;min-width:7.5em;padding-inline:.5em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button.action:is(button,#sci-reset):focus,:host>button.action:is(button,#sci-reset):active{outline:none;color:var(--\\275message-box-severity-color);border-color:var(--\\275message-box-severity-color)}:host>button.action:is(button,#sci-reset):hover{background-color:var(--sci-workbench-messagebox-action-background-color-hover)}:host>span.divider{width:1px;background-color:var(--sci-color-border)}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MessageBoxFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MessageBoxFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-message-box-footer', imports: [
                         KeyValuePipe,
@@ -9399,7 +9399,7 @@ class WorkbenchDialogFooterDirective {
      * Specifies if to display a visual separator between the dialog content and this footer.
      * Defaults to `true`.
      */
-    divider = input(undefined, { transform: booleanAttribute });
+    divider = input(undefined, ...(ngDevMode ? [{ debugName: "divider", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     template = inject(TemplateRef);
     _footer;
     constructor() {
@@ -9409,10 +9409,10 @@ class WorkbenchDialogFooterDirective {
         // Defer disposing footer to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
         inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._footer?.dispose()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: WorkbenchDialogFooterDirective, isStandalone: true, selector: "ng-template[wbDialogFooter]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: WorkbenchDialogFooterDirective, isStandalone: true, selector: "ng-template[wbDialogFooter]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogFooterDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[wbDialogFooter]' }]
         }], ctorParameters: () => [] });
@@ -9443,7 +9443,7 @@ class WorkbenchDialogHeaderDirective {
      * Specifies if to display a visual separator between this header and the dialog content.
      * Defaults to `true`.
      */
-    divider = input(undefined, { transform: booleanAttribute });
+    divider = input(undefined, ...(ngDevMode ? [{ debugName: "divider", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     template = inject(TemplateRef);
     _header;
     constructor() {
@@ -9453,10 +9453,10 @@ class WorkbenchDialogHeaderDirective {
         // Defer disposing header to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
         inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._header?.dispose()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: WorkbenchDialogHeaderDirective, isStandalone: true, selector: "ng-template[wbDialogHeader]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: WorkbenchDialogHeaderDirective, isStandalone: true, selector: "ng-template[wbDialogHeader]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogHeaderDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[wbDialogHeader]' }]
         }], ctorParameters: () => [] });
@@ -9471,12 +9471,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * SPDX-License-Identifier: EPL-2.0
  */
 class MessageBoxHeaderComponent {
-    title = input();
-    severity = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MessageBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: MessageBoxHeaderComponent, isStandalone: true, selector: "wb-message-box-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-severity": "severity()" } }, ngImport: i0, template: "@if (title()) {\n  <span class=\"title e2e-title\">{{(title() | wbText)()}}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:grid;border-top:var(--sci-workbench-messagebox-severity-indicator-size) solid var(--\\275message-box-severity-color);padding-inline:var(--sci-workbench-messagebox-padding);padding-top:var(--sci-workbench-messagebox-padding);-webkit-user-select:none;user-select:none}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host>span.title{overflow-wrap:break-word;white-space:pre-line;font-family:var(--sci-workbench-messagebox-title-font-family),sans-serif;font-size:var(--sci-workbench-messagebox-title-font-size);font-weight:var(--sci-workbench-messagebox-title-font-weight);text-align:var(--sci-workbench-messagebox-title-align)}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }] });
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    severity = input.required(...(ngDevMode ? [{ debugName: "severity" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MessageBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MessageBoxHeaderComponent, isStandalone: true, selector: "wb-message-box-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-severity": "severity()" } }, ngImport: i0, template: "@if (title()) {\n  <span class=\"title e2e-title\">{{(title() | wbText)()}}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:grid;border-top:var(--sci-workbench-messagebox-severity-indicator-size) solid var(--\\275message-box-severity-color);padding-inline:var(--sci-workbench-messagebox-padding);padding-top:var(--sci-workbench-messagebox-padding);-webkit-user-select:none;user-select:none}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host>span.title{overflow-wrap:break-word;white-space:pre-line;font-family:var(--sci-workbench-messagebox-title-font-family),sans-serif;font-size:var(--sci-workbench-messagebox-title-font-size);font-weight:var(--sci-workbench-messagebox-title-font-weight);text-align:var(--sci-workbench-messagebox-title-align)}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MessageBoxHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MessageBoxHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-message-box-header', imports: [
                         TextPipe,
@@ -9501,10 +9501,10 @@ class TypeofPipe {
     transform(object, type) {
         return typeof object === type;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: TypeofPipe, isStandalone: true, name: "wbTypeof" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: TypeofPipe, isStandalone: true, name: "wbTypeof" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TypeofPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TypeofPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbTypeof' }]
         }] });
@@ -9524,8 +9524,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * This component is designed to be opened in a workbench dialog.
  */
 class WorkbenchMessageBoxComponent {
-    message = input.required({ transform: nullIfEmptyMessage });
-    options = input();
+    message = input.required(...(ngDevMode ? [{ debugName: "message", transform: nullIfEmptyMessage }] : [{ transform: nullIfEmptyMessage }]));
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
     _dialog = inject(ɵWorkbenchDialog);
     // Ensure host element to be focusable in order to close the message box on Escape keystroke.
     tabindex = -1;
@@ -9556,10 +9556,10 @@ class WorkbenchMessageBoxComponent {
     onContentDimensionChange(dimension) {
         this.empty = !dimension.offsetHeight;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: WorkbenchMessageBoxComponent, isStandalone: true, selector: "wb-message-box", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "attr.tabindex": "this.tabindex", "class.empty": "this.empty", "class.content-selectable": "this.contentSelectable", "class.has-title": "this.hasTitle" } }, ngImport: i0, template: "@let options = this.options() ?? {};\n<ng-template wbDialogHeader [divider]=\"false\">\n  <wb-message-box-header [title]=\"options.title\" [severity]=\"options.severity ?? 'info'\"/>\n</ng-template>\n\n@let message = this.message();\n<div class=\"message e2e-message\" [class.text]=\"message | wbTypeof:'string'\" sciDimension (sciDimensionChange)=\"onContentDimensionChange($event)\">\n  @if (message | wbTypeof:'string') {\n    {{($any(message) | wbText)()}}\n  } @else {\n    <ng-container *ngComponentOutlet=\"message; inputs: options.inputs\"/>\n  }\n</div>\n\n<ng-template wbDialogFooter>\n  <wb-message-box-footer [actions]=\"options.actions ?? {ok: '%workbench.ok.action'}\"\n                         [severity]=\"options.severity ?? 'info'\"\n                         (action)=\"onAction($event)\"\n                         (keydown.escape)=\"onEscape()\"\n                         (preferredSizeChange)=\"onFooterPreferredSizeChange($event)\"/>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden;outline:none;padding-inline:var(--sci-workbench-messagebox-padding);padding-bottom:var(--sci-workbench-messagebox-padding)}:host.has-title:not(.empty){padding-top:var(--sci-workbench-messagebox-padding)}:host:not(.content-selectable){-webkit-user-select:none;user-select:none}:host>div.message.text{overflow-wrap:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: SciDimensionDirective, selector: "[sciDimension]", inputs: ["emitOutsideAngular"], outputs: ["sciDimensionChange"] }, { kind: "directive", type: WorkbenchDialogHeaderDirective, selector: "ng-template[wbDialogHeader]", inputs: ["divider"] }, { kind: "directive", type: WorkbenchDialogFooterDirective, selector: "ng-template[wbDialogFooter]", inputs: ["divider"] }, { kind: "component", type: MessageBoxHeaderComponent, selector: "wb-message-box-header", inputs: ["title", "severity"] }, { kind: "component", type: MessageBoxFooterComponent, selector: "wb-message-box-footer", inputs: ["actions", "severity"], outputs: ["action", "preferredSizeChange"] }, { kind: "pipe", type: TypeofPipe, name: "wbTypeof" }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: WorkbenchMessageBoxComponent, isStandalone: true, selector: "wb-message-box", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "attr.tabindex": "this.tabindex", "class.empty": "this.empty", "class.content-selectable": "this.contentSelectable", "class.has-title": "this.hasTitle" } }, ngImport: i0, template: "@let options = this.options() ?? {};\n<ng-template wbDialogHeader [divider]=\"false\">\n  <wb-message-box-header [title]=\"options.title\" [severity]=\"options.severity ?? 'info'\"/>\n</ng-template>\n\n@let message = this.message();\n<div class=\"message e2e-message\" [class.text]=\"message | wbTypeof:'string'\" sciDimension (sciDimensionChange)=\"onContentDimensionChange($event)\">\n  @if (message | wbTypeof:'string') {\n    {{($any(message) | wbText)()}}\n  } @else {\n    <ng-container *ngComponentOutlet=\"message; inputs: options.inputs\"/>\n  }\n</div>\n\n<ng-template wbDialogFooter>\n  <wb-message-box-footer [actions]=\"options.actions ?? {ok: '%workbench.ok.action'}\"\n                         [severity]=\"options.severity ?? 'info'\"\n                         (action)=\"onAction($event)\"\n                         (keydown.escape)=\"onEscape()\"\n                         (preferredSizeChange)=\"onFooterPreferredSizeChange($event)\"/>\n</ng-template>\n", styles: [":host{display:block;overflow:hidden;outline:none;padding-inline:var(--sci-workbench-messagebox-padding);padding-bottom:var(--sci-workbench-messagebox-padding)}:host.has-title:not(.empty){padding-top:var(--sci-workbench-messagebox-padding)}:host:not(.content-selectable){-webkit-user-select:none;user-select:none}:host>div.message.text{overflow-wrap:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: SciDimensionDirective, selector: "[sciDimension]", inputs: ["emitOutsideAngular"], outputs: ["sciDimensionChange"] }, { kind: "directive", type: WorkbenchDialogHeaderDirective, selector: "ng-template[wbDialogHeader]", inputs: ["divider"] }, { kind: "directive", type: WorkbenchDialogFooterDirective, selector: "ng-template[wbDialogFooter]", inputs: ["divider"] }, { kind: "component", type: MessageBoxHeaderComponent, selector: "wb-message-box-header", inputs: ["title", "severity"] }, { kind: "component", type: MessageBoxFooterComponent, selector: "wb-message-box-footer", inputs: ["actions", "severity"], outputs: ["action", "preferredSizeChange"] }, { kind: "pipe", type: TypeofPipe, name: "wbTypeof" }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchMessageBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchMessageBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-message-box', imports: [
                         NgComponentOutlet,
@@ -9588,7 +9588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                 args: ['keydown.escape']
             }] } });
 function nullIfEmptyMessage(message) {
-    return message || null;
+    return message !== '' ? message : null;
 }
 
 /*
@@ -9622,10 +9622,10 @@ class ɵWorkbenchMessageBoxService {
             animate: true,
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchMessageBoxService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchMessageBoxService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵWorkbenchMessageBoxService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵWorkbenchMessageBoxService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -9663,14 +9663,14 @@ class PopupComponent {
             // the popup loses focus by clicking on an element in a microfrontend.
             void this._cdkTrapFocus().focusTrap.focusInitialElementWhenReady();
             effectRef.destroy();
-        });
+        }, ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: PopupComponent, isStandalone: true, selector: "wb-popup", host: { properties: { "attr.data-popupid": "popup.id", "style.width": "popup.size?.width", "style.min-width": "popup.size?.minWidth", "style.max-width": "popup.size?.maxWidth", "style.height": "popup.size?.height", "style.min-height": "popup.size?.minHeight", "style.max-height": "popup.size?.maxHeight", "attr.class": "popup.cssClasses.join(' ')" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: PopupComponent, isStandalone: true, selector: "wb-popup", host: { properties: { "attr.data-popupid": "popup.id", "style.width": "popup.size?.width", "style.min-width": "popup.size?.minWidth", "style.max-width": "popup.size?.maxWidth", "style.height": "popup.size?.height", "style.min-height": "popup.size?.minHeight", "style.max-height": "popup.size?.maxHeight", "attr.class": "popup.cssClasses.join(' ')" } }, providers: [
             configurePopupGlassPane(),
         ], viewQueries: [{ propertyName: "_cdkTrapFocus", first: true, predicate: ["focus_trap"], descendants: true, read: CdkTrapFocus, isSignal: true }], hostDirectives: [{ directive: GlassPaneDirective }], ngImport: i0, template: "<sci-viewport cdkTrapFocus class=\"e2e-popup-viewport\" #focus_trap>\n  <ng-container *cdkPortalOutlet=\"portal\"/>\n</sci-viewport>\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;outline:none;border-radius:var(--sci-corner);overflow:hidden}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-popup', imports: [
                         CdkTrapFocus,
@@ -9988,10 +9988,10 @@ class PopupService {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PopupService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PopupService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PopupService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -10080,10 +10080,10 @@ function isEqualDomRect(a, b) {
  * - `--sci-workbench-messagebox-title-font-size`
  */
 class WorkbenchMessageBoxService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchMessageBoxService, providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchMessageBoxService, providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchMessageBoxService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchMessageBoxService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService }]
         }] });
@@ -10122,14 +10122,14 @@ function provideViewContext(view) {
  * SPDX-License-Identifier: EPL-2.0
  */
 class MenuItemComponent {
-    menuItem = input.required({ transform: (menuItem) => runInInjectionContext(this._injector, () => transform(menuItem)) });
+    menuItem = input.required(...(ngDevMode ? [{ debugName: "menuItem", transform: (menuItem) => runInInjectionContext(this._injector, () => transform(menuItem)) }] : [{ transform: (menuItem) => runInInjectionContext(this._injector, () => transform(menuItem)) }]));
     _injector = inject(Injector);
     TemplateMenuItem = TemplateMenuItem;
     ComponentMenuItem = ComponentMenuItem;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: MenuItemComponent, isStandalone: true, selector: "wb-menu-item", inputs: { menuItem: { classPropertyName: "menuItem", publicName: "menuItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (menuItem() | wbInstanceof:TemplateMenuItem; as menuItem) {\r\n  <ng-container *ngTemplateOutlet=\"menuItem.template; context: menuItem.context; injector: menuItem.injector\"/>\r\n}\r\n@if (menuItem() | wbInstanceof:ComponentMenuItem; as menuItem) {\r\n  <ng-container *ngComponentOutlet=\"menuItem.component; inputs: menuItem.inputs; injector: menuItem.injector\"/>\r\n}\r\n", styles: [":host{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: InstanceofPipe, name: "wbInstanceof" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MenuItemComponent, isStandalone: true, selector: "wb-menu-item", inputs: { menuItem: { classPropertyName: "menuItem", publicName: "menuItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (menuItem() | wbInstanceof:TemplateMenuItem; as menuItem) {\r\n  <ng-container *ngTemplateOutlet=\"menuItem.template; context: menuItem.context; injector: menuItem.injector\"/>\r\n}\r\n@if (menuItem() | wbInstanceof:ComponentMenuItem; as menuItem) {\r\n  <ng-container *ngComponentOutlet=\"menuItem.component; inputs: menuItem.inputs; injector: menuItem.injector\"/>\r\n}\r\n", styles: [":host{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: InstanceofPipe, name: "wbInstanceof" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-menu-item', imports: [
                         NgTemplateOutlet,
@@ -10228,10 +10228,10 @@ class ViewMenuComponent {
             return Maps.addListValue(groups, menuItem.group ?? 'default', menuItem);
         }, new Map()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ViewMenuComponent, isStandalone: true, selector: "wb-view-menu", host: { listeners: { "document:keydown.escape": "onEscape()", "mousedown": "onHostCloseEvent($event)", "sci-microfrontend-focusin": "onHostCloseEvent($event)", "document:mousedown": "onDocumentCloseEvent()", "document:sci-microfrontend-focusin": "onDocumentCloseEvent()" }, properties: { "attr.data-viewid": "this.viewId" } }, ngImport: i0, template: "@for (menuItemGroup of menuItemGroups() | keyvalue; track menuItemGroup; let isLast = $last) {\n  @for (menuItem of menuItemGroup.value; track menuItem) {\n    <button class=\"menu-item\"\n            [ngClass]=\"menuItem.cssClass\"\n            [disabled]=\"menuItem.disabled\"\n            (click)=\"onMenuItemClick(menuItem)\">\n      <wb-menu-item [menuItem]=\"menuItem\"/>\n      <div class=\"accelerator\">{{menuItem.accelerator | wbFormatAccelerator}}</div>\n    </button>\n  }\n  @if (!isLast) {\n    <hr>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:1px;width:var(--sci-workbench-contextmenu-width);border:1px solid var(--sci-color-border);color:var(--sci-color-text);background-color:var(--sci-color-background-elevation);border-radius:var(--sci-corner);overflow:hidden}:host>button.menu-item:is(button,#sci-reset){all:unset;display:flex;flex-flow:row nowrap;padding:.6em 1.5em;font-size:smaller;position:relative;-webkit-user-select:none;user-select:none;cursor:var(--sci-workbench-button-cursor)}:host>button.menu-item:is(button,#sci-reset)>wb-menu-item{flex:auto}:host>button.menu-item:is(button,#sci-reset)>div.accelerator{flex:none;margin-left:1em}:host>button.menu-item:is(button,#sci-reset):hover{background-color:var(--sci-color-background-elevation-hover);box-shadow:0 0 0 1px var(--sci-color-border)}:host>button.menu-item:is(button,#sci-reset):disabled{opacity:.5;pointer-events:none}:host>button.menu-item:is(button,#sci-reset):has(+hr):after{position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:var(--sci-color-border);content:\"\"}:host>hr{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: WbFormatAcceleratorPipe, name: "wbFormatAccelerator" }, { kind: "component", type: MenuItemComponent, selector: "wb-menu-item", inputs: ["menuItem"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ViewMenuComponent, isStandalone: true, selector: "wb-view-menu", host: { listeners: { "document:keydown.escape": "onEscape()", "mousedown": "onHostCloseEvent($event)", "sci-microfrontend-focusin": "onHostCloseEvent($event)", "document:mousedown": "onDocumentCloseEvent()", "document:sci-microfrontend-focusin": "onDocumentCloseEvent()" }, properties: { "attr.data-viewid": "this.viewId" } }, ngImport: i0, template: "@for (menuItemGroup of menuItemGroups() | keyvalue; track menuItemGroup; let isLast = $last) {\n  @for (menuItem of menuItemGroup.value; track menuItem) {\n    <button class=\"menu-item\"\n            [ngClass]=\"menuItem.cssClass\"\n            [disabled]=\"menuItem.disabled\"\n            (click)=\"onMenuItemClick(menuItem)\">\n      <wb-menu-item [menuItem]=\"menuItem\"/>\n      <div class=\"accelerator\">{{menuItem.accelerator | wbFormatAccelerator}}</div>\n    </button>\n  }\n  @if (!isLast) {\n    <hr>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:1px;width:var(--sci-workbench-contextmenu-width);border:1px solid var(--sci-color-border);color:var(--sci-color-text);background-color:var(--sci-color-background-elevation);border-radius:var(--sci-corner);overflow:hidden}:host>button.menu-item:is(button,#sci-reset){all:unset;display:flex;flex-flow:row nowrap;padding:.6em 1.5em;font-size:smaller;position:relative;-webkit-user-select:none;user-select:none;cursor:var(--sci-workbench-button-cursor)}:host>button.menu-item:is(button,#sci-reset)>wb-menu-item{flex:auto}:host>button.menu-item:is(button,#sci-reset)>div.accelerator{flex:none;margin-left:1em}:host>button.menu-item:is(button,#sci-reset):hover{background-color:var(--sci-color-background-elevation-hover);box-shadow:0 0 0 1px var(--sci-color-border)}:host>button.menu-item:is(button,#sci-reset):disabled{opacity:.5;pointer-events:none}:host>button.menu-item:is(button,#sci-reset):has(+hr):after{position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:var(--sci-color-border);content:\"\"}:host>hr{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MenuItemComponent, selector: "wb-menu-item", inputs: ["menuItem"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: WbFormatAcceleratorPipe, name: "wbFormatAccelerator" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-view-menu', imports: [
                         NgClass,
@@ -10260,11 +10260,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
             }] } });
 
 class TextComponent {
-    text = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: TextComponent, isStandalone: true, selector: "wb-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '{{(text() | wbText)()}}', isInline: true, styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }] });
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: TextComponent, isStandalone: true, selector: "wb-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '{{(text() | wbText)()}}', isInline: true, styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-text', template: '{{(text() | wbText)()}}', imports: [
                         TextPipe,
@@ -10300,17 +10300,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 function rootEffect(effectFn, options) {
     const injector = options?.injector ?? inject(Injector);
     const rootInjector = injector.get(ApplicationRef).injector;
-    const effectRef = effect(effectFn, {
-        ...options,
-        injector: rootInjector,
-        manualCleanup: true,
-    });
+    const effectRef = effect(effectFn, ...(ngDevMode ? [{ debugName: "effectRef", ...options,
+            injector: rootInjector,
+            manualCleanup: true }] : [{
+            ...options,
+            injector: rootInjector,
+            manualCleanup: true,
+        }]));
     const manualCleanup = options?.manualCleanup ?? false;
     if (!manualCleanup) {
         injector.get(DestroyRef).onDestroy(() => effectRef.destroy());
     }
     return effectRef;
 }
+/**
+ * Like {@link toObservable}, but uses a root effect to continue emitting even if the "contextual" component is detached from the change detector tree.
+ *
+ * @see rootEffect
+ */
+function toRootObservable(source, options) {
+    const injector = options?.injector ?? inject(Injector);
+    const rootInjector = injector.get(ApplicationRef).injector;
+    const observableInjector = createEnvironmentInjector([], rootInjector);
+    injector.get(DestroyRef).onDestroy(() => observableInjector.destroy());
+    return toObservable(source, { injector: observableInjector });
+}
 
 /*
  * Copyright (c) 2018-2022 Swiss Federal Railways
@@ -10569,10 +10583,10 @@ class ViewMenuService {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewMenuService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewMenuService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewMenuService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -10624,11 +10638,11 @@ class ViewTabComponent {
     _layout = inject(WorkbenchLayoutService).layout;
     _injector = inject(Injector);
     host = inject(ElementRef).nativeElement;
-    view = input.required({ alias: 'viewId', transform: (viewId) => this._viewRegistry.get(viewId) });
+    view = input.required(...(ngDevMode ? [{ debugName: "view", alias: 'viewId', transform: (viewId) => this._viewRegistry.get(viewId) }] : [{ alias: 'viewId', transform: (viewId) => this._viewRegistry.get(viewId) }]));
     boundingClientRect = boundingClientRect(inject(ElementRef));
     viewTabContentPortal;
     viewDragService = inject(ViewDragService);
-    viewTitleOffsetRight = computed(() => this.view().closable() ? '1.5rem' : undefined); // offset for the title to not overlap the close button
+    viewTitleOffsetRight = computed(() => this.view().closable() ? '1.5rem' : undefined, ...(ngDevMode ? [{ debugName: "viewTitleOffsetRight" }] : [])); // offset for the title to not overlap the close button
     constructor() {
         this.addHostCssClasses();
         this.installMenuAccelerators();
@@ -10714,10 +10728,10 @@ class ViewTabComponent {
             }));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ViewTabComponent, isStandalone: true, selector: "wb-view-tab", inputs: { view: { classPropertyName: "view", publicName: "viewId", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()", "mousedown": "onMousedown($event)", "contextmenu": "onContextmenu($event)", "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" }, properties: { "attr.data-viewid": "view().id", "attr.data-active": "view().active() ? '' : null", "attr.data-dirty": "view().dirty() ? '' : null", "attr.data-focus-within-view": "view().focused() ? '' : null", "attr.draggable": "true", "attr.tabindex": "-1", "class.view-drag": "viewDragService.dragging()", "style.--sci-workbench-tab-title-offset-right": "viewTitleOffsetRight()" } }, ngImport: i0, template: "<!-- IMPORTANT: THIS HTML FILE IS ALSO USED BY `ViewTabDragImageComponent` -->\n\n@if (view().active()) {\n  <div class=\"corner-radius start\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n<div class=\"content\">\n  <ng-container *cdkPortalOutlet=\"viewTabContentPortal()\"/>\n</div>\n\n@if (view().active()) {\n  <div class=\"corner-radius end\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n@if (view().closable()) {\n  <button (click)=\"onClose($event)\"\n          [title]=\"('%workbench.close_tab.tooltip;close_others_modifier=Alt' | wbText)()\"\n          [disabled]=\"!view().isClosable()\"\n          class=\"close e2e-close\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:grid;align-items:center;padding-left:var(--sci-workbench-tab-padding-inline);padding-right:var(--sci-workbench-tab-padding-inline);position:relative;-webkit-user-select:none;user-select:none;cursor:var(--sci-workbench-tab-cursor);box-sizing:border-box;outline:none;border-top:var(--sci-workbench-tab-border-top-width) solid transparent;border-left:var(--sci-workbench-tab-border-width) solid transparent;border-right:var(--sci-workbench-tab-border-width) solid transparent;border-top-left-radius:var(--sci-workbench-tab-border-radius);border-top-right-radius:var(--sci-workbench-tab-border-radius)}:host[data-active]{cursor:default;border-left-color:var(--sci-workbench-tab-border-color);border-right-color:var(--sci-workbench-tab-border-color);border-top-color:var(--sci-workbench-tab-border-color);background-color:var(--sci-workbench-view-background-color)}wb-part[data-peripheral] :host[data-active]{background-color:var(--sci-workbench-view-peripheral-background-color)}:host[data-active]>div.content{color:var(--sci-workbench-tab-text-color-active)}:host[data-active][data-focus-within-view]>div.content{color:var(--sci-workbench-part-active-tab-text-color-active)}:host>div.content{display:inline-grid;font-family:var(--sci-workbench-tab-font-family),sans-serif;font-size:var(--sci-workbench-tab-font-size);font-weight:var(--sci-workbench-tab-font-weight);min-width:var(--sci-workbench-tab-min-width);max-width:var(--sci-workbench-tab-max-width);isolation:isolate;transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);position:absolute;right:calc(var(--sci-workbench-tab-padding-inline) - .125em);visibility:hidden;padding:.125em;border-radius:var(--sci-corner-small);transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host[data-active]>button.close:is(button,#sci-reset),:host:hover:not(.view-drag)>button.close:is(button,#sci-reset){visibility:visible}@container style(--sci-workbench-tab-background-color-hover){:host:hover:not([data-active]):not(.view-drag):before{content:\"\";position:absolute;place-self:start center;box-sizing:border-box;height:calc(100% - var(--sci-workbench-tab-padding-block-hover) - var(--sci-workbench-part-bar-border-bottom-width));width:calc(100% - var(--sci-workbench-tab-padding-inline-hover) + 2 * var(--sci-workbench-tab-border-width));background-color:var(--sci-workbench-tab-background-color-hover);border:var(--sci-workbench-tab-border-width) solid var(--sci-workbench-tab-background-color-hover);border-radius:var(--sci-workbench-tab-border-radius);pointer-events:none}:host:hover:not([data-active]):not(.view-drag)>button.close:is(button,#sci-reset):not(:disabled):hover{background-color:color-mix(in srgb,var(--sci-workbench-tab-background-color-hover) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}}:host>div.corner-radius{height:var(--sci-workbench-tab-border-radius);width:var(--sci-workbench-tab-border-radius);overflow:hidden;position:absolute;bottom:0}:host>div.corner-radius>div.circle{position:absolute;top:calc(-2 * var(--sci-workbench-tab-border-radius));width:calc(2 * var(--sci-workbench-tab-border-radius));height:calc(2 * var(--sci-workbench-tab-border-radius));border:var(--sci-workbench-tab-border-radius) solid var(--sci-workbench-view-background-color);border-radius:50%;box-shadow:inset 0 0 0 var(--sci-workbench-tab-border-width) var(--sci-workbench-tab-border-color);box-sizing:content-box}wb-part[data-peripheral] :host>div.corner-radius>div.circle{border-color:var(--sci-workbench-view-peripheral-background-color)}:host>div.corner-radius.start{left:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.start>div.circle{left:calc(-2 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end{right:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end>div.circle{right:calc(-2 * var(--sci-workbench-tab-border-radius))}@container viewtab (height >= 3.5rem){:host>button.close:is(button,#sci-reset){top:5px;right:5px}}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ViewTabComponent, isStandalone: true, selector: "wb-view-tab", inputs: { view: { classPropertyName: "view", publicName: "viewId", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()", "mousedown": "onMousedown($event)", "contextmenu": "onContextmenu($event)", "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" }, properties: { "attr.data-viewid": "view().id", "attr.data-active": "view().active() ? '' : null", "attr.data-dirty": "view().dirty() ? '' : null", "attr.data-focus-within-view": "view().focused() ? '' : null", "attr.draggable": "true", "attr.tabindex": "-1", "class.view-drag": "viewDragService.dragging()", "style.--sci-workbench-tab-title-offset-right": "viewTitleOffsetRight()" } }, ngImport: i0, template: "<!-- IMPORTANT: THIS HTML FILE IS ALSO USED BY `ViewTabDragImageComponent` -->\n\n@if (view().active()) {\n  <div class=\"corner-radius start\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n<div class=\"content\">\n  <ng-container *cdkPortalOutlet=\"viewTabContentPortal()\"/>\n</div>\n\n@if (view().active()) {\n  <div class=\"corner-radius end\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n@if (view().closable()) {\n  <button (click)=\"onClose($event)\"\n          [title]=\"('%workbench.close_tab.tooltip;close_others_modifier=Alt' | wbText)()\"\n          [disabled]=\"!view().isClosable()\"\n          class=\"close e2e-close\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:grid;align-items:center;padding-left:var(--sci-workbench-tab-padding-inline);padding-right:var(--sci-workbench-tab-padding-inline);position:relative;-webkit-user-select:none;user-select:none;cursor:var(--sci-workbench-tab-cursor);box-sizing:border-box;outline:none;border-top:var(--sci-workbench-tab-border-top-width) solid transparent;border-left:var(--sci-workbench-tab-border-width) solid transparent;border-right:var(--sci-workbench-tab-border-width) solid transparent;border-top-left-radius:var(--sci-workbench-tab-border-radius);border-top-right-radius:var(--sci-workbench-tab-border-radius)}:host[data-active]{cursor:default;border-left-color:var(--sci-workbench-tab-border-color);border-right-color:var(--sci-workbench-tab-border-color);border-top-color:var(--sci-workbench-tab-border-color);background-color:var(--sci-workbench-view-background-color)}wb-part[data-peripheral] :host[data-active]{background-color:var(--sci-workbench-view-peripheral-background-color)}:host[data-active]>div.content{color:var(--sci-workbench-tab-text-color-active)}:host[data-active][data-focus-within-view]>div.content{color:var(--sci-workbench-part-active-tab-text-color-active)}:host>div.content{display:inline-grid;font-family:var(--sci-workbench-tab-font-family),sans-serif;font-size:var(--sci-workbench-tab-font-size);font-weight:var(--sci-workbench-tab-font-weight);min-width:var(--sci-workbench-tab-min-width);max-width:var(--sci-workbench-tab-max-width);isolation:isolate;transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);position:absolute;right:calc(var(--sci-workbench-tab-padding-inline) - .125em);visibility:hidden;padding:.125em;border-radius:var(--sci-corner-small);transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host[data-active]>button.close:is(button,#sci-reset),:host:hover:not(.view-drag)>button.close:is(button,#sci-reset){visibility:visible}@container style(--sci-workbench-tab-background-color-hover){:host:hover:not([data-active]):not(.view-drag):before{content:\"\";position:absolute;place-self:start center;box-sizing:border-box;height:calc(100% - var(--sci-workbench-tab-padding-block-hover) - var(--sci-workbench-part-bar-border-bottom-width));width:calc(100% - var(--sci-workbench-tab-padding-inline-hover) + 2 * var(--sci-workbench-tab-border-width));background-color:var(--sci-workbench-tab-background-color-hover);border:var(--sci-workbench-tab-border-width) solid var(--sci-workbench-tab-background-color-hover);border-radius:var(--sci-workbench-tab-border-radius);pointer-events:none}:host:hover:not([data-active]):not(.view-drag)>button.close:is(button,#sci-reset):not(:disabled):hover{background-color:color-mix(in srgb,var(--sci-workbench-tab-background-color-hover) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}}:host>div.corner-radius{height:var(--sci-workbench-tab-border-radius);width:var(--sci-workbench-tab-border-radius);overflow:hidden;position:absolute;bottom:0}:host>div.corner-radius>div.circle{position:absolute;top:calc(-2 * var(--sci-workbench-tab-border-radius));width:calc(2 * var(--sci-workbench-tab-border-radius));height:calc(2 * var(--sci-workbench-tab-border-radius));border:var(--sci-workbench-tab-border-radius) solid var(--sci-workbench-view-background-color);border-radius:50%;box-shadow:inset 0 0 0 var(--sci-workbench-tab-border-width) var(--sci-workbench-tab-border-color);box-sizing:content-box}wb-part[data-peripheral] :host>div.corner-radius>div.circle{border-color:var(--sci-workbench-view-peripheral-background-color)}:host>div.corner-radius.start{left:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.start>div.circle{left:calc(-2 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end{right:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end>div.circle{right:calc(-2 * var(--sci-workbench-tab-border-radius))}@container viewtab (height >= 3.5rem){:host>button.close:is(button,#sci-reset){top:5px;right:5px}}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-view-tab', imports: [
                         CdkPortalOutlet,
@@ -10810,10 +10824,10 @@ class ViewTabDragImageComponent {
             .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)), map(event => event.defaultPrevented), distinctUntilChanged());
         return toSignal(canDrop$, { initialValue: false });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabDragImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ViewTabDragImageComponent, isStandalone: true, selector: "wb-view-tab-drag-image", host: { properties: { "attr.data-viewid": "view().id", "attr.data-active": "view().active() ? '' : null", "class.view-drag": "true", "class.can-drop": "canDrop()", "class.drag-over-tabbar": "isDragOverTabbar()", "class.drag-over-peripheral-tabbar": "isDragOverPeripheralTabbar()" } }, ngImport: i0, template: "<!-- IMPORTANT: THIS HTML FILE IS ALSO USED BY `ViewTabDragImageComponent` -->\n\n@if (view().active()) {\n  <div class=\"corner-radius start\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n<div class=\"content\">\n  <ng-container *cdkPortalOutlet=\"viewTabContentPortal()\"/>\n</div>\n\n@if (view().active()) {\n  <div class=\"corner-radius end\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n@if (view().closable()) {\n  <button (click)=\"onClose($event)\"\n          [title]=\"('%workbench.close_tab.tooltip;close_others_modifier=Alt' | wbText)()\"\n          [disabled]=\"!view().isClosable()\"\n          class=\"close e2e-close\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:grid;align-items:center;padding-left:var(--sci-workbench-tab-padding-inline);padding-right:var(--sci-workbench-tab-padding-inline);position:relative;-webkit-user-select:none;user-select:none;cursor:var(--sci-workbench-tab-cursor);box-sizing:border-box;outline:none;border-top:var(--sci-workbench-tab-border-top-width) solid transparent;border-left:var(--sci-workbench-tab-border-width) solid transparent;border-right:var(--sci-workbench-tab-border-width) solid transparent;border-top-left-radius:var(--sci-workbench-tab-border-radius);border-top-right-radius:var(--sci-workbench-tab-border-radius)}:host[data-active]{cursor:default;border-left-color:var(--sci-workbench-tab-border-color);border-right-color:var(--sci-workbench-tab-border-color);border-top-color:var(--sci-workbench-tab-border-color);background-color:var(--sci-workbench-view-background-color)}wb-part[data-peripheral] :host[data-active]{background-color:var(--sci-workbench-view-peripheral-background-color)}:host[data-active]>div.content{color:var(--sci-workbench-tab-text-color-active)}:host[data-active][data-focus-within-view]>div.content{color:var(--sci-workbench-part-active-tab-text-color-active)}:host>div.content{display:inline-grid;font-family:var(--sci-workbench-tab-font-family),sans-serif;font-size:var(--sci-workbench-tab-font-size);font-weight:var(--sci-workbench-tab-font-weight);min-width:var(--sci-workbench-tab-min-width);max-width:var(--sci-workbench-tab-max-width);isolation:isolate;transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);position:absolute;right:calc(var(--sci-workbench-tab-padding-inline) - .125em);visibility:hidden;padding:.125em;border-radius:var(--sci-corner-small);transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host[data-active]>button.close:is(button,#sci-reset),:host:hover:not(.view-drag)>button.close:is(button,#sci-reset){visibility:visible}@container style(--sci-workbench-tab-background-color-hover){:host:hover:not([data-active]):not(.view-drag):before{content:\"\";position:absolute;place-self:start center;box-sizing:border-box;height:calc(100% - var(--sci-workbench-tab-padding-block-hover) - var(--sci-workbench-part-bar-border-bottom-width));width:calc(100% - var(--sci-workbench-tab-padding-inline-hover) + 2 * var(--sci-workbench-tab-border-width));background-color:var(--sci-workbench-tab-background-color-hover);border:var(--sci-workbench-tab-border-width) solid var(--sci-workbench-tab-background-color-hover);border-radius:var(--sci-workbench-tab-border-radius);pointer-events:none}:host:hover:not([data-active]):not(.view-drag)>button.close:is(button,#sci-reset):not(:disabled):hover{background-color:color-mix(in srgb,var(--sci-workbench-tab-background-color-hover) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}}:host>div.corner-radius{height:var(--sci-workbench-tab-border-radius);width:var(--sci-workbench-tab-border-radius);overflow:hidden;position:absolute;bottom:0}:host>div.corner-radius>div.circle{position:absolute;top:calc(-2 * var(--sci-workbench-tab-border-radius));width:calc(2 * var(--sci-workbench-tab-border-radius));height:calc(2 * var(--sci-workbench-tab-border-radius));border:var(--sci-workbench-tab-border-radius) solid var(--sci-workbench-view-background-color);border-radius:50%;box-shadow:inset 0 0 0 var(--sci-workbench-tab-border-width) var(--sci-workbench-tab-border-color);box-sizing:content-box}wb-part[data-peripheral] :host>div.corner-radius>div.circle{border-color:var(--sci-workbench-view-peripheral-background-color)}:host>div.corner-radius.start{left:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.start>div.circle{left:calc(-2 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end{right:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end>div.circle{right:calc(-2 * var(--sci-workbench-tab-border-radius))}@container viewtab (height >= 3.5rem){:host>button.close:is(button,#sci-reset){top:5px;right:5px}}\n", ":host{--sci-workbench-tab-text-color-active: var(--sci-workbench-tab-drag-text-color)}:host.drag-over-peripheral-tabbar{--sci-workbench-view-background-color: var(--sci-workbench-view-peripheral-background-color)}:host:not(.drag-over-tabbar){border-radius:var(--sci-workbench-tab-border-radius);border:1px solid var(--sci-workbench-tab-drag-border-color)}:host:not(.drag-over-tabbar)>div.corner-radius{display:none}:host:not(.drag-over-tabbar)>div.content{transform:unset}:host:not(.drag-over-tabbar)>button.close:is(button,#sci-reset){transform:unset}:host:not(.can-drop){--sci-workbench-tab-text-color-active: var(--sci-workbench-tab-drag-text-color-disabled);--sci-workbench-tab-drag-border-color: var(--sci-workbench-tab-drag-border-color-disabled)}:host:not(.can-drop) button.close:is(button,#sci-reset){color:var(--sci-workbench-tab-drag-text-color-disabled)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabDragImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ViewTabDragImageComponent, isStandalone: true, selector: "wb-view-tab-drag-image", host: { properties: { "attr.data-viewid": "view().id", "attr.data-active": "view().active() ? '' : null", "class.view-drag": "true", "class.can-drop": "canDrop()", "class.drag-over-tabbar": "isDragOverTabbar()", "class.drag-over-peripheral-tabbar": "isDragOverPeripheralTabbar()" } }, ngImport: i0, template: "<!-- IMPORTANT: THIS HTML FILE IS ALSO USED BY `ViewTabDragImageComponent` -->\n\n@if (view().active()) {\n  <div class=\"corner-radius start\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n<div class=\"content\">\n  <ng-container *cdkPortalOutlet=\"viewTabContentPortal()\"/>\n</div>\n\n@if (view().active()) {\n  <div class=\"corner-radius end\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n@if (view().closable()) {\n  <button (click)=\"onClose($event)\"\n          [title]=\"('%workbench.close_tab.tooltip;close_others_modifier=Alt' | wbText)()\"\n          [disabled]=\"!view().isClosable()\"\n          class=\"close e2e-close\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:grid;align-items:center;padding-left:var(--sci-workbench-tab-padding-inline);padding-right:var(--sci-workbench-tab-padding-inline);position:relative;-webkit-user-select:none;user-select:none;cursor:var(--sci-workbench-tab-cursor);box-sizing:border-box;outline:none;border-top:var(--sci-workbench-tab-border-top-width) solid transparent;border-left:var(--sci-workbench-tab-border-width) solid transparent;border-right:var(--sci-workbench-tab-border-width) solid transparent;border-top-left-radius:var(--sci-workbench-tab-border-radius);border-top-right-radius:var(--sci-workbench-tab-border-radius)}:host[data-active]{cursor:default;border-left-color:var(--sci-workbench-tab-border-color);border-right-color:var(--sci-workbench-tab-border-color);border-top-color:var(--sci-workbench-tab-border-color);background-color:var(--sci-workbench-view-background-color)}wb-part[data-peripheral] :host[data-active]{background-color:var(--sci-workbench-view-peripheral-background-color)}:host[data-active]>div.content{color:var(--sci-workbench-tab-text-color-active)}:host[data-active][data-focus-within-view]>div.content{color:var(--sci-workbench-part-active-tab-text-color-active)}:host>div.content{display:inline-grid;font-family:var(--sci-workbench-tab-font-family),sans-serif;font-size:var(--sci-workbench-tab-font-size);font-weight:var(--sci-workbench-tab-font-weight);min-width:var(--sci-workbench-tab-min-width);max-width:var(--sci-workbench-tab-max-width);isolation:isolate;transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);position:absolute;right:calc(var(--sci-workbench-tab-padding-inline) - .125em);visibility:hidden;padding:.125em;border-radius:var(--sci-corner-small);transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host[data-active]>button.close:is(button,#sci-reset),:host:hover:not(.view-drag)>button.close:is(button,#sci-reset){visibility:visible}@container style(--sci-workbench-tab-background-color-hover){:host:hover:not([data-active]):not(.view-drag):before{content:\"\";position:absolute;place-self:start center;box-sizing:border-box;height:calc(100% - var(--sci-workbench-tab-padding-block-hover) - var(--sci-workbench-part-bar-border-bottom-width));width:calc(100% - var(--sci-workbench-tab-padding-inline-hover) + 2 * var(--sci-workbench-tab-border-width));background-color:var(--sci-workbench-tab-background-color-hover);border:var(--sci-workbench-tab-border-width) solid var(--sci-workbench-tab-background-color-hover);border-radius:var(--sci-workbench-tab-border-radius);pointer-events:none}:host:hover:not([data-active]):not(.view-drag)>button.close:is(button,#sci-reset):not(:disabled):hover{background-color:color-mix(in srgb,var(--sci-workbench-tab-background-color-hover) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}}:host>div.corner-radius{height:var(--sci-workbench-tab-border-radius);width:var(--sci-workbench-tab-border-radius);overflow:hidden;position:absolute;bottom:0}:host>div.corner-radius>div.circle{position:absolute;top:calc(-2 * var(--sci-workbench-tab-border-radius));width:calc(2 * var(--sci-workbench-tab-border-radius));height:calc(2 * var(--sci-workbench-tab-border-radius));border:var(--sci-workbench-tab-border-radius) solid var(--sci-workbench-view-background-color);border-radius:50%;box-shadow:inset 0 0 0 var(--sci-workbench-tab-border-width) var(--sci-workbench-tab-border-color);box-sizing:content-box}wb-part[data-peripheral] :host>div.corner-radius>div.circle{border-color:var(--sci-workbench-view-peripheral-background-color)}:host>div.corner-radius.start{left:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.start>div.circle{left:calc(-2 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end{right:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end>div.circle{right:calc(-2 * var(--sci-workbench-tab-border-radius))}@container viewtab (height >= 3.5rem){:host>button.close:is(button,#sci-reset){top:5px;right:5px}}\n", ":host{--sci-workbench-tab-text-color-active: var(--sci-workbench-tab-drag-text-color)}:host.drag-over-peripheral-tabbar{--sci-workbench-view-background-color: var(--sci-workbench-view-peripheral-background-color)}:host:not(.drag-over-tabbar){border-radius:var(--sci-workbench-tab-border-radius);border:1px solid var(--sci-workbench-tab-drag-border-color)}:host:not(.drag-over-tabbar)>div.corner-radius{display:none}:host:not(.drag-over-tabbar)>div.content{transform:unset}:host:not(.drag-over-tabbar)>button.close:is(button,#sci-reset){transform:unset}:host:not(.can-drop){--sci-workbench-tab-text-color-active: var(--sci-workbench-tab-drag-text-color-disabled);--sci-workbench-tab-drag-border-color: var(--sci-workbench-tab-drag-border-color-disabled)}:host:not(.can-drop) button.close:is(button,#sci-reset){color:var(--sci-workbench-tab-drag-text-color-disabled)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabDragImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabDragImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-view-tab-drag-image', imports: [
                         CdkPortalOutlet,
@@ -10984,10 +10998,10 @@ class ViewTabDragImageRenderer {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabDragImageRenderer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabDragImageRenderer, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabDragImageRenderer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabDragImageRenderer, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabDragImageRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabDragImageRenderer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -11013,18 +11027,18 @@ class DragImageWorkbenchView {
     last = signal(true).asReadonly();
     position = signal(0).asReadonly();
     scrolledIntoView = signal(true).asReadonly();
-    menuItems = signal([]);
+    menuItems = signal([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
     isClosable;
-    activationInstant = signal(0);
+    activationInstant = signal(0, ...(ngDevMode ? [{ debugName: "activationInstant" }] : []));
     constructor(dragData) {
         this.id = dragData.viewId;
         this.alternativeId = dragData.alternativeViewId;
-        this.part = computed(() => throwError('UnsupportedOperationError'));
-        this.navigation = signal(dragData.navigation && { ...dragData.navigation, id: UUID.randomUUID() });
-        this.navigationHint = computed(() => this.navigation()?.hint);
-        this.navigationData = computed(() => this.navigation()?.data ?? {});
-        this.navigationState = computed(() => this.navigation()?.state ?? {});
-        this.urlSegments = computed(() => this.navigation()?.path ?? []);
+        this.part = computed(() => throwError('UnsupportedOperationError'), ...(ngDevMode ? [{ debugName: "part" }] : []));
+        this.navigation = signal(dragData.navigation && { ...dragData.navigation, id: UUID.randomUUID() }, ...(ngDevMode ? [{ debugName: "navigation" }] : []));
+        this.navigationHint = computed(() => this.navigation()?.hint, ...(ngDevMode ? [{ debugName: "navigationHint" }] : []));
+        this.navigationData = computed(() => this.navigation()?.data ?? {}, ...(ngDevMode ? [{ debugName: "navigationData" }] : []));
+        this.navigationState = computed(() => this.navigation()?.state ?? {}, ...(ngDevMode ? [{ debugName: "navigationState" }] : []));
+        this.urlSegments = computed(() => this.navigation()?.path ?? [], ...(ngDevMode ? [{ debugName: "urlSegments" }] : []));
         this.title = signal(dragData.viewTitle).asReadonly();
         this.heading = signal(dragData.viewHeading).asReadonly();
         this.dirty = signal(dragData.viewDirty).asReadonly();
@@ -11088,7 +11102,7 @@ class ViewTabBarComponent {
     /**
      * Defines the maximum available width for the tab bar, used to constrain the drag image to the tab bar bounds.
      */
-    maxWidth = input.required();
+    maxWidth = input.required(...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
     _host = inject(ElementRef).nativeElement;
     _partBarElement = inject(PART_BAR_ELEMENT);
     _viewportChange$ = new Subject();
@@ -11097,7 +11111,7 @@ class ViewTabBarComponent {
     _viewTabDragImageRenderer = inject(ViewTabDragImageRenderer);
     _viewDragService = inject(ViewDragService);
     _zone = inject(NgZone);
-    _viewTabs = viewChildren(ViewTabComponent);
+    _viewTabs = viewChildren(ViewTabComponent, ...(ngDevMode ? [{ debugName: "_viewTabs" }] : []));
     _hostBoundingClientRect = boundingClientRect(inject(ElementRef));
     _viewportComponent = viewChild.required(SciViewportComponent);
     _viewportComponentElement = viewChild.required(SciViewportComponent, { read: (ElementRef) });
@@ -11111,12 +11125,12 @@ class ViewTabBarComponent {
     /**
      * Reference to the tab before which to insert the drag source on drop, or `end` if dropping it after the last tab.
      */
-    dropTargetViewTab = signal(null);
+    dropTargetViewTab = signal(null, ...(ngDevMode ? [{ debugName: "dropTargetViewTab" }] : []));
     /**
      * Reference to the tab where the drag operation was started.
      * This reference is only set if the drag operation started on a tab of this tabbar.
      */
-    dragSourceViewTab = signal(null);
+    dragSourceViewTab = signal(null, ...(ngDevMode ? [{ debugName: "dragSourceViewTab" }] : []));
     /**
      * Transfer data of the tab being dragged over this tabbar.
      */
@@ -11128,7 +11142,7 @@ class ViewTabBarComponent {
     /**
      * Signals when unsetting drag state.
      */
-    _onUnsetDragState = signal(undefined, { equal: () => false });
+    _onUnsetDragState = signal(undefined, ...(ngDevMode ? [{ debugName: "_onUnsetDragState", equal: () => false }] : [{ equal: () => false }]));
     /**
      * Tabbar indents where to display the rounded bottom corners of the first and last view tab.
      */
@@ -11530,10 +11544,10 @@ class ViewTabBarComponent {
     ngOnDestroy() {
         this.unsetDragState();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ViewTabBarComponent, isStandalone: true, selector: "wb-view-tab-bar", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "_viewTabs", predicate: ViewTabComponent, descendants: true, isSignal: true }, { propertyName: "_viewportComponent", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }, { propertyName: "_viewportComponentElement", first: true, predicate: SciViewportComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_tabCornerRadiusElement", first: true, predicate: ["tab_corner_radius"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<sci-viewport class=\"e2e-tab-viewport\" scrollbarStyle=\"hidden\">\n  @for (view of part.views(); track view.id) {\n    @if (viewtab === dropTargetViewTab()) {\n      <div class=\"divider\"></div>\n    }\n    <wb-view-tab #viewtab\n                 [viewId]=\"view.id\"\n                 [class.drag-source]=\"viewtab === dragSourceViewTab()\"\n                 [class.drop-target]=\"viewtab === dropTargetViewTab()\"/>\n    <div class=\"divider\"></div>\n  }\n\n  <!-- Placeholder for expanding the viewport when dragging a tab to the right, moving part actions along with the dragover event. -->\n  <div class=\"drag-placeholder\"></div>\n</sci-viewport>\n\n<!-- Element for injecting the corner radius into the component. -->\n<div class=\"tab-corner-radius\" #tab_corner_radius></div>\n", styles: ["@charset \"UTF-8\";:host{--\\275part-bar-indent-left: 0;--\\275part-bar-indent-right: 0;--\\275part-bar-drag-source-width: 0;--\\275part-bar-drag-placeholder-width: 0;display:grid}:host>sci-viewport::part(content){display:flex;padding-left:var(--\\275part-bar-indent-left)}:host>sci-viewport::part(content):after{flex:none;width:var(--\\275part-bar-indent-right);content:\"\"}:host>sci-viewport>wb-view-tab{flex:none}:host>sci-viewport>wb-view-tab.drag-source{display:none}:host>sci-viewport>div.divider{flex:none;display:flex;position:relative;width:0}:host>sci-viewport>div.divider:after{flex:none;align-self:center;content:\"\";position:absolute;width:1px;left:-1px;height:65%;background-color:var(--sci-workbench-part-bar-divider-color)}@container style(--sci-workbench-tab-background-color-hover){:host>sci-viewport>div.divider{transition:opacity .2s ease-out}:host>sci-viewport>wb-view-tab:hover+div.divider{opacity:0}:host>sci-viewport>div.divider:has(+wb-view-tab:hover){opacity:0}}:host>sci-viewport>div.drag-placeholder{flex:none;width:var(--\\275part-bar-drag-placeholder-width)}:host>sci-viewport>wb-view-tab.drop-target,:host>sci-viewport wb-view-tab.drop-target~:is(wb-view-tab,div.divider),:host>sci-viewport>div.divider:has(+wb-view-tab.drop-target){transform:translate(var(--\\275part-bar-drag-source-width))}:host>sci-viewport>wb-view-tab:is([data-active],.drag-source)+div.divider{display:none}:host>sci-viewport>div.divider:has(+wb-view-tab[data-active]:not(.drag-source)){display:none}:host>sci-viewport>div.divider:has(+wb-view-tab.drag-source:not([data-active])){display:none}:host:not(.drag-over)>sci-viewport:not(:has(wb-view-tab:not(.drag-source)))::part(content):after{display:none}:host.on-drag-enter:not(.on-drag-start) wb-view-tab,:host.on-drag-enter:not(.on-drag-start) div.divider,:host.drag-over wb-view-tab,:host.drag-over div.divider,:host.on-drag-leave wb-view-tab,:host.on-drag-leave div.divider{transition:transform 175ms cubic-bezier(0,0,.2,1)}:host.on-drag-enter:not(.on-drag-start) div.drag-placeholder,:host.on-drag-leave div.drag-placeholder{transition:width 175ms cubic-bezier(0,0,.2,1)}:host:not(:has(wb-view-tab.drag-source)):not(:has(wb-view-tab.drop-target)):not(.drag-over) div.drag-placeholder{display:none}:host.pointer-events-disabled>sci-viewport::part(content){pointer-events:none}:host>div.tab-corner-radius{position:absolute;visibility:hidden;width:var(--sci-workbench-tab-border-radius)}\n"], dependencies: [{ kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "component", type: ViewTabComponent, selector: "wb-view-tab", inputs: ["viewId"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ViewTabBarComponent, isStandalone: true, selector: "wb-view-tab-bar", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "_viewTabs", predicate: ViewTabComponent, descendants: true, isSignal: true }, { propertyName: "_viewportComponent", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }, { propertyName: "_viewportComponentElement", first: true, predicate: SciViewportComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_tabCornerRadiusElement", first: true, predicate: ["tab_corner_radius"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<sci-viewport class=\"e2e-tab-viewport\" scrollbarStyle=\"hidden\">\n  @for (view of part.views(); track view.id) {\n    @if (viewtab === dropTargetViewTab()) {\n      <div class=\"divider\"></div>\n    }\n    <wb-view-tab #viewtab\n                 [viewId]=\"view.id\"\n                 [class.drag-source]=\"viewtab === dragSourceViewTab()\"\n                 [class.drop-target]=\"viewtab === dropTargetViewTab()\"/>\n    <div class=\"divider\"></div>\n  }\n\n  <!-- Placeholder for expanding the viewport when dragging a tab to the right, moving part actions along with the dragover event. -->\n  <div class=\"drag-placeholder\"></div>\n</sci-viewport>\n\n<!-- Element for injecting the corner radius into the component. -->\n<div class=\"tab-corner-radius\" #tab_corner_radius></div>\n", styles: ["@charset \"UTF-8\";:host{--\\275part-bar-indent-left: 0;--\\275part-bar-indent-right: 0;--\\275part-bar-drag-source-width: 0;--\\275part-bar-drag-placeholder-width: 0;display:grid}:host>sci-viewport::part(content){display:flex;padding-left:var(--\\275part-bar-indent-left)}:host>sci-viewport::part(content):after{flex:none;width:var(--\\275part-bar-indent-right);content:\"\"}:host>sci-viewport>wb-view-tab{flex:none}:host>sci-viewport>wb-view-tab.drag-source{display:none}:host>sci-viewport>div.divider{flex:none;display:flex;position:relative;width:0}:host>sci-viewport>div.divider:after{flex:none;align-self:center;content:\"\";position:absolute;width:1px;left:-1px;height:65%;background-color:var(--sci-workbench-part-bar-divider-color)}@container style(--sci-workbench-tab-background-color-hover){:host>sci-viewport>div.divider{transition:opacity .2s ease-out}:host>sci-viewport>wb-view-tab:hover+div.divider{opacity:0}:host>sci-viewport>div.divider:has(+wb-view-tab:hover){opacity:0}}:host>sci-viewport>div.drag-placeholder{flex:none;width:var(--\\275part-bar-drag-placeholder-width)}:host>sci-viewport>wb-view-tab.drop-target,:host>sci-viewport wb-view-tab.drop-target~:is(wb-view-tab,div.divider),:host>sci-viewport>div.divider:has(+wb-view-tab.drop-target){transform:translate(var(--\\275part-bar-drag-source-width))}:host>sci-viewport>wb-view-tab:is([data-active],.drag-source)+div.divider{display:none}:host>sci-viewport>div.divider:has(+wb-view-tab[data-active]:not(.drag-source)){display:none}:host>sci-viewport>div.divider:has(+wb-view-tab.drag-source:not([data-active])){display:none}:host:not(.drag-over)>sci-viewport:not(:has(wb-view-tab:not(.drag-source)))::part(content):after{display:none}:host.on-drag-enter:not(.on-drag-start) wb-view-tab,:host.on-drag-enter:not(.on-drag-start) div.divider,:host.drag-over wb-view-tab,:host.drag-over div.divider,:host.on-drag-leave wb-view-tab,:host.on-drag-leave div.divider{transition:transform 175ms cubic-bezier(0,0,.2,1)}:host.on-drag-enter:not(.on-drag-start) div.drag-placeholder,:host.on-drag-leave div.drag-placeholder{transition:width 175ms cubic-bezier(0,0,.2,1)}:host:not(:has(wb-view-tab.drag-source)):not(:has(wb-view-tab.drop-target)):not(.drag-over) div.drag-placeholder{display:none}:host.pointer-events-disabled>sci-viewport::part(content){pointer-events:none}:host>div.tab-corner-radius{position:absolute;visibility:hidden;width:var(--sci-workbench-tab-border-radius)}\n"], dependencies: [{ kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "component", type: ViewTabComponent, selector: "wb-view-tab", inputs: ["viewId"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewTabBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewTabBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-view-tab-bar', imports: [
                         SciViewportComponent,
@@ -11556,11 +11570,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 const PART_BAR_ELEMENT = new InjectionToken('PART_BAR_ELEMENT');
 class PartBarComponent {
     _router = inject(ɵWorkbenchRouter);
-    _viewTabBar = viewChild(ViewTabBarComponent, { read: (ElementRef) });
+    _viewTabBar = viewChild(ViewTabBarComponent, ...(ngDevMode ? [{ debugName: "_viewTabBar", read: (ElementRef) }] : [{ read: (ElementRef) }]));
     _fillerElement = viewChild.required('filler');
     part = inject(ɵWorkbenchPart);
-    startActions = computed(() => this.part.actions().filter(action => action.align === 'start'));
-    endActions = computed(() => this.part.actions().filter(action => action.align !== 'start'));
+    startActions = computed(() => this.part.actions().filter(action => action.align === 'start'), ...(ngDevMode ? [{ debugName: "startActions" }] : []));
+    endActions = computed(() => this.part.actions().filter(action => action.align !== 'start'), ...(ngDevMode ? [{ debugName: "endActions" }] : []));
     maxViewTabBarWidth;
     constructor() {
         this.maxViewTabBarWidth = this.calculateMaxViewTabBarWidth();
@@ -11613,12 +11627,12 @@ class PartBarComponent {
         const viewTabBarDimension = dimension(this._viewTabBar);
         return computed(() => (viewTabBarDimension()?.offsetWidth ?? 0) + fillerDimension().offsetWidth);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: PartBarComponent, isStandalone: true, selector: "wb-part-bar", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: PartBarComponent, isStandalone: true, selector: "wb-part-bar", providers: [
             { provide: PART_BAR_ELEMENT, useFactory: () => inject(ElementRef).nativeElement },
-        ], viewQueries: [{ propertyName: "_viewTabBar", first: true, predicate: ViewTabBarComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_fillerElement", first: true, predicate: ["filler"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Title -->\n@if (part.title()) {\n  <span class=\"title e2e-title\" (mousedown)=\"onPartBarMouseDown($event)\">{{(part.title() | wbText)()}}</span>\n}\n\n<!-- View Tabs -->\n@if (part.views().length) {\n  <wb-view-tab-bar [maxWidth]=\"maxViewTabBarWidth()\"/>\n}\n\n<!-- Start Actions -->\n@if (startActions().length) {\n  <div class=\"actions\">\n    @for (action of startActions(); track action) {\n      <wb-part-action [action]=\"action\" [ngClass]=\"action.cssClass\" data-align=\"start\"/>\n    }\n  </div>\n}\n\n<!-- Filler -->\n<div class=\"filler e2e-filler\" #filler (mousedown)=\"onPartBarMouseDown($event)\"></div>\n\n<!-- End Actions -->\n@if (endActions().length) {\n  <div class=\"actions\">\n    @for (action of endActions(); track action) {\n      <wb-part-action [action]=\"action\" [ngClass]=\"action.cssClass\" data-align=\"end\"/>\n    }\n  </div>\n}\n\n<!-- View List Dropdown -->\n@if (part.views().length) {\n  <wb-view-list-button [title]=\"('%workbench.show_open_tabs.tooltip' | wbText)()\"/>\n}\n\n<!-- Minimize Button -->\n@if (part.canMinimize()) {\n  <button (click)=\"onMinimize()\" [title]=\"('%workbench.minimize.tooltip' | wbText)()\" class=\"minimize e2e-minimize\">\n    <wb-icon icon=\"workbench.minimize\"/>\n  </button>\n}\n", styles: [":host{display:flex;color:var(--sci-workbench-tab-text-color);background-color:var(--sci-workbench-part-bar-background-color);border-top:var(--sci-workbench-part-bar-padding-top) solid transparent;background-clip:border-box;height:var(--sci-workbench-tab-height);box-sizing:content-box;container-name:viewtab;container-type:size;position:relative;padding-inline:var(--sci-workbench-part-bar-padding-inline)}:host:has(wb-view-tab-bar:first-child){padding-left:calc(var(--sci-workbench-part-bar-padding-inline) - var(--sci-workbench-tab-border-radius))}wb-part[data-peripheral] :host{background-color:var(--sci-workbench-part-peripheral-bar-background-color)}:host>span.title{flex:none;align-self:center;-webkit-user-select:none;user-select:none;margin-right:.5em;font-family:var(--sci-workbench-part-title-font-family),sans-serif;font-size:var(--sci-workbench-part-title-font-size);font-weight:var(--sci-workbench-part-title-font-weight);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>wb-view-tab-bar{flex:initial}:host>div.actions{flex:initial;display:flex;align-items:center;gap:var(--sci-workbench-part-bar-actions-gap);padding-inline:var(--sci-workbench-part-bar-actions-padding-inline)}:host>div.actions>wb-part-action{flex:initial}:host>div.filler{flex:auto}:host>wb-view-list-button{flex:none;align-self:center}:host>button.minimize:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);flex:none;align-self:center}:host>button.minimize:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.minimize:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.minimize:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.minimize:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.minimize:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host:before{content:\"\";position:absolute;bottom:0;left:0;right:0;height:var(--sci-workbench-part-bar-border-bottom-width);background-color:var(--sci-workbench-tab-border-color)}\n"], dependencies: [{ kind: "component", type: ViewTabBarComponent, selector: "wb-view-tab-bar", inputs: ["maxWidth"] }, { kind: "component", type: PartActionComponent, selector: "wb-part-action", inputs: ["action"] }, { kind: "component", type: ViewListButtonComponent, selector: "wb-view-list-button" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }] });
+        ], viewQueries: [{ propertyName: "_viewTabBar", first: true, predicate: ViewTabBarComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_fillerElement", first: true, predicate: ["filler"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Title -->\n@if (part.title()) {\n  <span class=\"title e2e-title\" (mousedown)=\"onPartBarMouseDown($event)\">{{(part.title() | wbText)()}}</span>\n}\n\n<!-- View Tabs -->\n@if (part.views().length) {\n  <wb-view-tab-bar [maxWidth]=\"maxViewTabBarWidth()\"/>\n}\n\n<!-- Start Actions -->\n@if (startActions().length) {\n  <div class=\"actions\">\n    @for (action of startActions(); track action) {\n      <wb-part-action [action]=\"action\" [ngClass]=\"action.cssClass\" data-align=\"start\"/>\n    }\n  </div>\n}\n\n<!-- Filler -->\n<div class=\"filler e2e-filler\" #filler (mousedown)=\"onPartBarMouseDown($event)\"></div>\n\n<!-- End Actions -->\n@if (endActions().length) {\n  <div class=\"actions\">\n    @for (action of endActions(); track action) {\n      <wb-part-action [action]=\"action\" [ngClass]=\"action.cssClass\" data-align=\"end\"/>\n    }\n  </div>\n}\n\n<!-- View List Dropdown -->\n@if (part.views().length) {\n  <wb-view-list-button [title]=\"('%workbench.show_open_tabs.tooltip' | wbText)()\"/>\n}\n\n<!-- Minimize Button -->\n@if (part.canMinimize()) {\n  <button (click)=\"onMinimize()\" [title]=\"('%workbench.minimize.tooltip' | wbText)()\" class=\"minimize e2e-minimize\">\n    <wb-icon icon=\"workbench.minimize\"/>\n  </button>\n}\n", styles: [":host{display:flex;color:var(--sci-workbench-tab-text-color);background-color:var(--sci-workbench-part-bar-background-color);border-top:var(--sci-workbench-part-bar-padding-top) solid transparent;background-clip:border-box;height:var(--sci-workbench-tab-height);box-sizing:content-box;container-name:viewtab;container-type:size;position:relative;padding-inline:var(--sci-workbench-part-bar-padding-inline)}:host:has(wb-view-tab-bar:first-child){padding-left:calc(var(--sci-workbench-part-bar-padding-inline) - var(--sci-workbench-tab-border-radius))}wb-part[data-peripheral] :host{background-color:var(--sci-workbench-part-peripheral-bar-background-color)}:host>span.title{flex:none;align-self:center;-webkit-user-select:none;user-select:none;margin-right:.5em;font-family:var(--sci-workbench-part-title-font-family),sans-serif;font-size:var(--sci-workbench-part-title-font-size);font-weight:var(--sci-workbench-part-title-font-weight);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>wb-view-tab-bar{flex:initial}:host>div.actions{flex:initial;display:flex;align-items:center;gap:var(--sci-workbench-part-bar-actions-gap);padding-inline:var(--sci-workbench-part-bar-actions-padding-inline)}:host>div.actions>wb-part-action{flex:initial}:host>div.filler{flex:auto}:host>wb-view-list-button{flex:none;align-self:center}:host>button.minimize:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);flex:none;align-self:center}:host>button.minimize:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.minimize:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.minimize:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.minimize:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.minimize:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host:before{content:\"\";position:absolute;bottom:0;left:0;right:0;height:var(--sci-workbench-part-bar-border-bottom-width);background-color:var(--sci-workbench-tab-border-color)}\n"], dependencies: [{ kind: "component", type: ViewTabBarComponent, selector: "wb-view-tab-bar", inputs: ["maxWidth"] }, { kind: "component", type: PartActionComponent, selector: "wb-part-action", inputs: ["action"] }, { kind: "component", type: ViewListButtonComponent, selector: "wb-view-list-button" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-part-bar', imports: [
                         ViewTabBarComponent,
@@ -11704,10 +11718,10 @@ class PartComponent {
         logger.debug(() => `Constructing PartComponent [partId=${this.part.id}]`, LoggerNames.LIFECYCLE);
         inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying PartComponent [partId=${this.part.id}]'`, LoggerNames.LIFECYCLE));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: PartComponent, isStandalone: true, selector: "wb-part", host: { properties: { "attr.data-partid": "part.id", "attr.data-peripheral": "part.peripheral() ? '' : null", "attr.data-grid": "dasherize(part.gridName())", "attr.data-active": "part.active() ? '' : null", "attr.data-referencepart": "part.referencePart() ? '' : null", "attr.tabindex": "-1" } }, ngImport: i0, template: "@if (part.title() || part.views().length || part.actions().length || part.canMinimize()) {\n  <wb-part-bar/>\n}\n\n@if (part.views().length) {\n  <!-- Prevent splitting if there is no active view, i.e, when dragging the last view out of the tabbar. -->\n  @let canSplit = !!part.activeView();\n  <div wbViewDropZone\n       [wbViewDropZoneRegionSize]=\".25\"\n       [wbViewDropZonePlaceholderSize]=\".5\"\n       [wbViewDropZoneAttributes]=\"{'data-partid': part.id}\"\n       [wbViewDropZoneRegions]=\"canDrop() && {center: true, north: canSplit, south: canSplit, west: canSplit, east: canSplit}\"\n       (wbViewDropZoneDrop)=\"onViewDrop($event)\"\n       class=\"content e2e-content e2e-view-content\">\n    <ng-container *wbPortalOutlet=\"part.activeView()?.slot!.portal; destroyOnDetach: false\"/>\n  </div>\n} @else {\n  <div wbViewDropZone\n       [wbViewDropZoneRegions]=\"canDrop() && {center: false, north: true, south: true, west: true, east: true}\"\n       [wbViewDropZoneAttributes]=\"{'data-partid': part.id}\"\n       (wbViewDropZoneDrop)=\"onViewDrop($event)\"\n       class=\"content e2e-content e2e-part-content\">\n    <ng-container *wbPortalOutlet=\"part.slot.portal; destroyOnDetach: false\"/>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;outline:none;background-color:var(--sci-workbench-part-background-color);overflow:hidden}:host[data-peripheral]{background-color:var(--sci-workbench-part-peripheral-background-color)}:host>wb-part-bar{flex:none}:host>div.content{flex:auto;display:grid;position:relative}\n"], dependencies: [{ kind: "component", type: PartBarComponent, selector: "wb-part-bar" }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneAttributes", "wbViewDropZoneRegionSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet", "wbPortalOutletDestroyOnDetach"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: PartComponent, isStandalone: true, selector: "wb-part", host: { properties: { "attr.data-partid": "part.id", "attr.data-peripheral": "part.peripheral() ? '' : null", "attr.data-grid": "dasherize(part.gridName())", "attr.data-active": "part.active() ? '' : null", "attr.data-referencepart": "part.referencePart() ? '' : null", "attr.tabindex": "-1" } }, ngImport: i0, template: "@if (part.title() || part.views().length || part.actions().length || part.canMinimize()) {\n  <wb-part-bar/>\n}\n\n@if (part.views().length) {\n  <!-- Prevent splitting if there is no active view, i.e, when dragging the last view out of the tabbar. -->\n  @let canSplit = !!part.activeView();\n  <div wbViewDropZone\n       [wbViewDropZoneRegionSize]=\".25\"\n       [wbViewDropZonePlaceholderSize]=\".5\"\n       [wbViewDropZoneAttributes]=\"{'data-partid': part.id}\"\n       [wbViewDropZoneRegions]=\"canDrop() && {center: true, north: canSplit, south: canSplit, west: canSplit, east: canSplit}\"\n       (wbViewDropZoneDrop)=\"onViewDrop($event)\"\n       class=\"content e2e-content e2e-view-content\">\n    <ng-container *wbPortalOutlet=\"part.activeView()?.slot!.portal; destroyOnDetach: false\"/>\n  </div>\n} @else {\n  <div wbViewDropZone\n       [wbViewDropZoneRegions]=\"canDrop() && {center: false, north: true, south: true, west: true, east: true}\"\n       [wbViewDropZoneAttributes]=\"{'data-partid': part.id}\"\n       (wbViewDropZoneDrop)=\"onViewDrop($event)\"\n       class=\"content e2e-content e2e-part-content\">\n    <ng-container *wbPortalOutlet=\"part.slot.portal; destroyOnDetach: false\"/>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;outline:none;background-color:var(--sci-workbench-part-background-color);overflow:hidden}:host[data-peripheral]{background-color:var(--sci-workbench-part-peripheral-background-color)}:host>wb-part-bar{flex:none}:host>div.content{flex:auto;display:grid;position:relative}\n"], dependencies: [{ kind: "component", type: PartBarComponent, selector: "wb-part-bar" }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneAttributes", "wbViewDropZoneRegionSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet", "wbPortalOutletDestroyOnDetach"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-part', imports: [
                         PartBarComponent,
@@ -11739,23 +11753,23 @@ class ɵWorkbenchPart {
     _rootOutletContexts = inject(ChildrenOutletContexts);
     _focusMonitor = inject(WorkbenchFocusMonitor);
     _layout = inject(WorkbenchLayoutService).layout;
-    _title = signal(undefined);
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
     _titleComputed = this.computeTitle();
     alternativeId;
-    navigation = signal(undefined);
-    activationInstant = signal(0);
-    active = signal(false);
-    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id);
-    viewIds = computed(() => this.views().map(view => view.id));
-    activeViewId = computed(() => this.activeView()?.id ?? null);
+    navigation = signal(undefined, ...(ngDevMode ? [{ debugName: "navigation" }] : []));
+    activationInstant = signal(0, ...(ngDevMode ? [{ debugName: "activationInstant" }] : []));
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    viewIds = computed(() => this.views().map(view => view.id), ...(ngDevMode ? [{ debugName: "viewIds" }] : []));
+    activeViewId = computed(() => this.activeView()?.id ?? null, ...(ngDevMode ? [{ debugName: "activeViewId" }] : []));
     mPart;
     gridName;
-    peripheral = signal(false);
-    referencePart = signal(false);
-    topLeft = signal(false);
-    topRight = signal(false);
-    activity = signal(null);
-    canMinimize = computed(() => this.activity() !== null && this.topRight());
+    peripheral = signal(false, ...(ngDevMode ? [{ debugName: "peripheral" }] : []));
+    referencePart = signal(false, ...(ngDevMode ? [{ debugName: "referencePart" }] : []));
+    topLeft = signal(false, ...(ngDevMode ? [{ debugName: "topLeft" }] : []));
+    topRight = signal(false, ...(ngDevMode ? [{ debugName: "topRight" }] : []));
+    activity = signal(null, ...(ngDevMode ? [{ debugName: "activity" }] : []));
+    canMinimize = computed(() => this.activity() !== null && this.topRight(), ...(ngDevMode ? [{ debugName: "canMinimize" }] : []));
     actions;
     activeView;
     views;
@@ -11765,8 +11779,8 @@ class ɵWorkbenchPart {
     _isInMainArea;
     constructor(id, layout) {
         this.id = id;
-        this.mPart = signal(layout.part({ partId: id }));
-        this.gridName = signal(layout.grid({ partId: id }).gridName);
+        this.mPart = signal(layout.part({ partId: id }), ...(ngDevMode ? [{ debugName: "mPart" }] : []));
+        this.gridName = signal(layout.grid({ partId: id }).gridName, ...(ngDevMode ? [{ debugName: "gridName" }] : []));
         this.actions = computePartActions(this);
         this.activeView = computeActiveView(this.mPart);
         this.views = computeViews(this.mPart);
@@ -12085,7 +12099,7 @@ class ViewDragService {
     /**
      * Indicates if a drag operation is active across application instances of the same origin.
      */
-    dragging = computed(() => this.viewDragData() !== null);
+    dragging = computed(() => this.viewDragData() !== null, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
     constructor() {
         this.installDragDetector();
     }
@@ -12272,7 +12286,7 @@ class ViewDragService {
                 untracked(() => onDragEnd());
                 options?.once && effectRef.destroy();
             }
-        }, { injector: options?.injector });
+        }, ...(ngDevMode ? [{ debugName: "effectRef", injector: options?.injector }] : [{ injector: options?.injector }]));
     }
     /**
      * Signals when start dragging a view.
@@ -12288,10 +12302,10 @@ class ViewDragService {
         this._viewDragStartBroadcastChannel.destroy();
         this._viewDragEndBroadcastChannel.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewDragService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewDragService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewDragService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewDragService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -12382,12 +12396,12 @@ class ViewSlotComponent {
         logger.debug(() => `Constructing ViewComponent. [viewId=${this.view.id}]`, LoggerNames.LIFECYCLE);
         inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying ViewComponent [viewId=${this.view.id}]'`, LoggerNames.LIFECYCLE));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: ViewSlotComponent, isStandalone: true, selector: "wb-view-slot", host: { properties: { "attr.data-viewid": "view.id", "attr.data-active": "view.active() ? '' : null", "class.view-drag": "viewDragService.dragging()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: ViewSlotComponent, isStandalone: true, selector: "wb-view-slot", host: { properties: { "attr.data-viewid": "view.id", "attr.data-active": "view.active() ? '' : null", "class.view-drag": "viewDragService.dragging()" } }, providers: [
             configureViewGlassPane(),
         ], viewQueries: [{ propertyName: "_viewport", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: GlassPaneDirective }], ngImport: i0, template: "<sci-viewport cdkTrapFocus>\n  <router-outlet [name]=\"view.id\" wbRouterOutletRootContext/>\n</sci-viewport>\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--sci-workbench-view-background-color);color:var(--sci-color-text)}wb-part[data-peripheral] :host{background-color:var(--sci-workbench-view-peripheral-background-color)}:host.view-drag{pointer-events:none}:host>sci-viewport{flex:1 1 0}:host>sci-viewport>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterOutletRootContextDirective, selector: "router-outlet[wbRouterOutletRootContext]" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewSlotComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-view-slot', imports: [
                         RouterOutlet,
@@ -12443,30 +12457,30 @@ class ɵWorkbenchView {
     _focusMonitor = inject(WorkbenchFocusMonitor);
     _logger = inject(Logger);
     _adapters = new Map();
-    _title = signal(null);
-    _heading = signal(null);
-    _dirty = signal(false);
-    _closable = signal(true);
+    _title = signal(null, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _heading = signal(null, ...(ngDevMode ? [{ debugName: "_heading" }] : []));
+    _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
+    _closable = signal(true, ...(ngDevMode ? [{ debugName: "_closable" }] : []));
     _blockedBy;
-    _scrolledIntoView = signal(true);
+    _scrolledIntoView = signal(true, ...(ngDevMode ? [{ debugName: "_scrolledIntoView" }] : []));
     alternativeId;
-    navigation = signal(undefined);
-    navigationHint = computed(() => this.navigation()?.hint);
-    navigationData = computed(() => this.navigation()?.data ?? {});
-    navigationState = computed(() => this.navigation()?.state ?? {});
-    urlSegments = computed(() => this.navigation()?.path ?? []);
-    position = computed(() => this.part().views().indexOf(this));
-    first = computed(() => this.position() === 0);
-    last = computed(() => this.position() === this.part().views().length - 1);
-    part = signal(null);
-    activationInstant = signal(0);
-    active = signal(false);
-    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id);
+    navigation = signal(undefined, ...(ngDevMode ? [{ debugName: "navigation" }] : []));
+    navigationHint = computed(() => this.navigation()?.hint, ...(ngDevMode ? [{ debugName: "navigationHint" }] : []));
+    navigationData = computed(() => this.navigation()?.data ?? {}, ...(ngDevMode ? [{ debugName: "navigationData" }] : []));
+    navigationState = computed(() => this.navigation()?.state ?? {}, ...(ngDevMode ? [{ debugName: "navigationState" }] : []));
+    urlSegments = computed(() => this.navigation()?.path ?? [], ...(ngDevMode ? [{ debugName: "urlSegments" }] : []));
+    position = computed(() => this.part().views().indexOf(this), ...(ngDevMode ? [{ debugName: "position" }] : []));
+    first = computed(() => this.position() === 0, ...(ngDevMode ? [{ debugName: "first" }] : []));
+    last = computed(() => this.position() === this.part().views().length - 1, ...(ngDevMode ? [{ debugName: "last" }] : []));
+    part = signal(null, ...(ngDevMode ? [{ debugName: "part" }] : []));
+    activationInstant = signal(0, ...(ngDevMode ? [{ debugName: "activationInstant" }] : []));
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id, ...(ngDevMode ? [{ debugName: "focused" }] : []));
     menuItems;
     blockedBy$;
     slot;
     classList = new ClassList();
-    isClosable = computed(() => this._closable() && !this._blockedBy());
+    isClosable = computed(() => this._closable() && !this._blockedBy(), ...(ngDevMode ? [{ debugName: "isClosable" }] : []));
     /**
      * Guard to confirm closing the view, if any.
      *
@@ -12885,7 +12899,7 @@ class ɵPopup {
     };
     _destroyed = false;
     cssClasses;
-    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id);
+    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id, ...(ngDevMode ? [{ debugName: "focused" }] : []));
     /**
      * Indicates whether this popup is blocked by dialog(s) that overlay it.
      */
@@ -12981,11 +12995,11 @@ class PageNotFoundComponent {
             popup: isPopupOutlet(this.outlet) || undefined,
         });
         return outlets.get(this.outlet)?.map(segment => `${segment}`).join('/') ?? '';
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: PageNotFoundComponent, isStandalone: true, selector: "wb-page-not-found", ngImport: i0, template: "<header>{{('%workbench.page_not_found.title' | wbText)()}}</header>\n\n@if (isViewOutlet(outlet)) {\n  @let message = '%workbench.page_not_found_view.message;path=' + path() | wbText;\n  <section class=\"message\" [innerHTML]=\"message()\"></section>\n} @else if (isPartOutlet(outlet)) {\n  @let message = '%workbench.page_not_found_part.message;path=' + path() | wbText;\n  <section class=\"message\" [innerHTML]=\"message()\"></section>\n} @else {\n  @let message = '%workbench.page_not_found.message;path=' + path() | wbText;\n  <section class=\"message\" [innerHTML]=\"message()\"></section>\n}\n\n<section class=\"actions\">\n  @if (isViewOutlet(outlet)) {\n    <button (click)=\"workbenchService.resetPerspective()\">{{('%workbench.reset_perspective.action' | wbText)()}}</button>\n    <button (click)=\"view!.close()\">{{('%workbench.close.action' | wbText)()}}</button>\n  } @else if (isPartOutlet(outlet)) {\n    <button (click)=\"workbenchService.resetPerspective()\">{{('%workbench.reset_perspective.action' | wbText)()}}</button>\n  } @else if (isDialogOutlet(outlet)) {\n    <button (click)=\"dialog!.close()\">{{('%workbench.close.action' | wbText)()}}</button>\n  } @else if (isPopupOutlet(outlet)) {\n    <button (click)=\"popup!.close()\">{{('%workbench.close.action' | wbText)()}}</button>\n  }\n</section>\n\n@if (isDevMode) {\n  @let hint = '%workbench.page_not_found_developer_hint.message' | wbText;\n  @let tooltip = '%workbench.dev_mode_only_hint.tooltip' | wbText;\n  <section class=\"developer-hint\" [title]=\"tooltip()\">{{hint()}}</section>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:2em;padding:3em;align-items:center}:host>header{font-weight:700;font-size:1.3rem}:host>section.message{text-align:center;line-height:1.75}:host>section.developer-hint{border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);padding:1em;max-width:550px;color:var(--sci-color-accent);font-family:monospace;text-align:center}:host>section.actions{display:flex;gap:.5em}:host>section.actions>button:is(button,#sci-reset){all:unset;cursor:var(--sci-workbench-button-cursor);padding:.5em 1.5em;color:var(--sci-color-accent-inverse);background-color:var(--sci-color-accent);background-clip:padding-box;border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);text-align:center}:host>section.actions>button:is(button,#sci-reset):focus,:host>section.actions>button:is(button,#sci-reset):active{border-color:transparent;outline:1px solid var(--sci-color-accent);color:var(--sci-color-accent-inverse)}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }, ...(ngDevMode ? [{ debugName: "path" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: PageNotFoundComponent, isStandalone: true, selector: "wb-page-not-found", ngImport: i0, template: "<header>{{('%workbench.page_not_found.title' | wbText)()}}</header>\n\n@if (isViewOutlet(outlet)) {\n  @let message = '%workbench.page_not_found_view.message;path=' + path() | wbText;\n  <section class=\"message\" [innerHTML]=\"message()\"></section>\n} @else if (isPartOutlet(outlet)) {\n  @let message = '%workbench.page_not_found_part.message;path=' + path() | wbText;\n  <section class=\"message\" [innerHTML]=\"message()\"></section>\n} @else {\n  @let message = '%workbench.page_not_found.message;path=' + path() | wbText;\n  <section class=\"message\" [innerHTML]=\"message()\"></section>\n}\n\n<section class=\"actions\">\n  @if (isViewOutlet(outlet)) {\n    <button (click)=\"workbenchService.resetPerspective()\">{{('%workbench.reset_perspective.action' | wbText)()}}</button>\n    <button (click)=\"view!.close()\">{{('%workbench.close.action' | wbText)()}}</button>\n  } @else if (isPartOutlet(outlet)) {\n    <button (click)=\"workbenchService.resetPerspective()\">{{('%workbench.reset_perspective.action' | wbText)()}}</button>\n  } @else if (isDialogOutlet(outlet)) {\n    <button (click)=\"dialog!.close()\">{{('%workbench.close.action' | wbText)()}}</button>\n  } @else if (isPopupOutlet(outlet)) {\n    <button (click)=\"popup!.close()\">{{('%workbench.close.action' | wbText)()}}</button>\n  }\n</section>\n\n@if (isDevMode) {\n  @let hint = '%workbench.page_not_found_developer_hint.message' | wbText;\n  @let tooltip = '%workbench.dev_mode_only_hint.tooltip' | wbText;\n  <section class=\"developer-hint\" [title]=\"tooltip()\">{{hint()}}</section>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:2em;padding:3em;align-items:center}:host>header{font-weight:700;font-size:1.3rem}:host>section.message{text-align:center;line-height:1.75}:host>section.developer-hint{border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);padding:1em;max-width:550px;color:var(--sci-color-accent);font-family:monospace;text-align:center}:host>section.actions{display:flex;gap:.5em}:host>section.actions>button:is(button,#sci-reset){all:unset;cursor:var(--sci-workbench-button-cursor);padding:.5em 1.5em;color:var(--sci-color-accent-inverse);background-color:var(--sci-color-accent);background-clip:padding-box;border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);text-align:center}:host>section.actions>button:is(button,#sci-reset):focus,:host>section.actions>button:is(button,#sci-reset):active{border-color:transparent;outline:1px solid var(--sci-color-accent);color:var(--sci-color-accent-inverse)}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PageNotFoundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PageNotFoundComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-page-not-found', imports: [
                         TextPipe,
@@ -13012,10 +13026,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * For more information, see the `standardizeConfig` function in Angular.
  */
 class ɵEmptyOutletComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵEmptyOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: ɵEmptyOutletComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<router-outlet/>\n", styles: [":host{display:grid}:host>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵEmptyOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: ɵEmptyOutletComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<router-outlet/>\n", styles: [":host{display:grid}:host>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵEmptyOutletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵEmptyOutletComponent, decorators: [{
             type: Component,
             args: [{ imports: [RouterOutlet], template: "<router-outlet/>\n", styles: [":host{display:grid}:host>router-outlet{position:absolute}\n"] }]
         }] });
@@ -13035,10 +13049,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 class NullContentComponent {
     isDevMode = isDevMode();
     view = inject(WorkbenchView, { optional: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NullContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: NullContentComponent, isStandalone: true, selector: "wb-null-content", ngImport: i0, template: "@if (isDevMode && view) {\n  @let hint = '%workbench.null_view_developer_hint.message;view=' + (view.alternativeId ?? view.id) | wbText;\n  @let tooltip = '%workbench.dev_mode_only_hint.tooltip' | wbText;\n  <section class=\"developer-hint\" [title]=\"tooltip()\" [innerHTML]=\"hint()\"></section>\n} @else {\n  {{('%workbench.null_content.message' | wbText)()}}\n}\n", styles: [":host{display:flex;flex-direction:column;gap:2em;padding:3em;align-items:center;color:var(--sci-color-text-subtlest);-webkit-user-select:none;user-select:none}:host>section.developer-hint{border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);padding:1em;max-width:550px;color:var(--sci-color-accent);font-family:monospace;text-align:center;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NullContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: NullContentComponent, isStandalone: true, selector: "wb-null-content", ngImport: i0, template: "@if (isDevMode && view) {\n  @let hint = '%workbench.null_view_developer_hint.message;view=' + (view.alternativeId ?? view.id) | wbText;\n  @let tooltip = '%workbench.dev_mode_only_hint.tooltip' | wbText;\n  <section class=\"developer-hint\" [title]=\"tooltip()\" [innerHTML]=\"hint()\"></section>\n} @else {\n  {{('%workbench.null_content.message' | wbText)()}}\n}\n", styles: [":host{display:flex;flex-direction:column;gap:2em;padding:3em;align-items:center;color:var(--sci-color-text-subtlest);-webkit-user-select:none;user-select:none}:host>section.developer-hint{border:1px solid var(--sci-color-accent);border-radius:var(--sci-corner);padding:1em;max-width:550px;color:var(--sci-color-accent);font-family:monospace;text-align:center;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NullContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NullContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-null-content', imports: [
                         TextPipe,
@@ -13273,10 +13287,10 @@ class WorkbenchAuxiliaryRouteInstaller {
         const newRoutes = [...config];
         this._router.config.splice(0, this._router.config.length, ...newRoutes);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchAuxiliaryRouteInstaller, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchAuxiliaryRouteInstaller, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchAuxiliaryRouteInstaller, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchAuxiliaryRouteInstaller, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchAuxiliaryRouteInstaller, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchAuxiliaryRouteInstaller, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -13362,10 +13376,10 @@ class WorkbenchLayoutDiffer {
             views: this._viewsDiffer.diff(views),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutDiffer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutDiffer, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutDiffer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutDiffer, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutDiffer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutDiffer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -13439,10 +13453,10 @@ class WorkbenchOutletDiffer {
             dialogs: this._dialogsDiffer.diff(dialogOutlets),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchOutletDiffer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchOutletDiffer, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchOutletDiffer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchOutletDiffer, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchOutletDiffer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchOutletDiffer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -13744,10 +13758,10 @@ class WorkbenchUrlObserver {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchUrlObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchUrlObserver, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchUrlObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchUrlObserver, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchUrlObserver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchUrlObserver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -13876,10 +13890,10 @@ class ViewMoveHandler {
             void this.onViewMove(event).finally(() => viewDragService.signalViewMoved(event));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewMoveHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewMoveHandler, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewMoveHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewMoveHandler, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ViewMoveHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewMoveHandler, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -13931,10 +13945,10 @@ class NgZoneObservableDecorator {
             return () => subscription.unsubscribe();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgZoneObservableDecorator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgZoneObservableDecorator });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NgZoneObservableDecorator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NgZoneObservableDecorator });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgZoneObservableDecorator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NgZoneObservableDecorator, decorators: [{
             type: Injectable
         }] });
 
@@ -14033,10 +14047,10 @@ const MICROFRONTEND_PLATFORM_POST_STARTUP = new InjectionToken('MICROFRONTEND_PL
  * Allows loading the configuration for the SCION Microfrontend Platform asynchronously, e.g., over the network or from a JSON file.
  */
 class MicrofrontendPlatformConfigLoader {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPlatformConfigLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPlatformConfigLoader });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPlatformConfigLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPlatformConfigLoader });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPlatformConfigLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPlatformConfigLoader, decorators: [{
             type: Injectable
         }] });
 
@@ -14083,10 +14097,10 @@ class ManifestObjectCache {
         return this._capabilities$
             .pipe(startWith(undefined), map(() => this.getCapability(capabilityId, { orElse: null })), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ManifestObjectCache, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ManifestObjectCache });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ManifestObjectCache, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ManifestObjectCache });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ManifestObjectCache, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ManifestObjectCache, decorators: [{
             type: Injectable
         }] });
 /**
@@ -14326,13 +14340,106 @@ class MicrofrontendViewIntentHandler {
             .map(view => view.id);
         return viewIds.length ? viewIds : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewIntentHandler });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewIntentHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewIntentHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewIntentHandler, decorators: [{
             type: Injectable
         }] });
 
+/*
+ * Copyright (c) 2018-2025 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * 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>".
+ *
+ * @see createRemoteTranslatable
+ */
+function provideRemoteTextProvider() {
+    const REMOTE_KEY = /^workbench\.external\.~(?<provider>[^\\~]+)~\.(?<key>.+)$/;
+    return makeEnvironmentProviders([
+        {
+            provide: WORKBENCH_TEXT_PROVIDER,
+            useValue: remoteTextProvider,
+            multi: true,
+        },
+    ]);
+    function remoteTextProvider(remoteKey, params) {
+        // Test if the key matches a remote key.
+        const match = REMOTE_KEY.exec(remoteKey);
+        if (!match) {
+            return undefined; // ignore key
+        }
+        // Parse key and provider from the remote key.
+        const { key, provider } = match.groups;
+        // 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));
+        return toSignal(text$, { initialValue: '' });
+    }
+    /**
+     * 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]) => {
+            if (!value.startsWith(TOPIC_PROTOCOL)) {
+                return of([name, 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 observableParams.length ? combineLatest(observableParams) : of([]);
+    }
+}
+/**
+ * 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.
+ *
+ * Example: %translationKey;param1=value1;param2=:value2 // :value2 is a named interpolation parameter
+ *
+ * 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.
+ *
+ * @param translatable - Specifies the translatable.
+ * @param config - Specifies the text provider and values for substituting named interpolation 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('%')) {
+        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}`);
+}
+/**
+ * Prefix of topic params.
+ */
+const TOPIC_PROTOCOL = 'topic://';
+
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
  *
@@ -14348,14 +14455,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * This component is designed to be displayed in {@link MicrofrontendHostMessageBoxComponent}.
  */
 class TextMessageComponent {
-    message = inject(WorkbenchMessageBox).params.get(eMESSAGE_BOX_MESSAGE_PARAM);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: TextMessageComponent, isStandalone: true, selector: "wb-text-message", ngImport: i0, template: "@if (message) {\n  {{message}}\n}", styles: [":host{overflow-wrap:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"] });
+    message;
+    constructor() {
+        const messageBox = inject(WorkbenchMessageBox);
+        const translatable = messageBox.params.get(eMESSAGE_BOX_MESSAGE_PARAM);
+        this.message = createRemoteTranslatable(translatable, { appSymbolicName: messageBox.referrer.appSymbolicName });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: TextMessageComponent, isStandalone: true, selector: "wb-text-message", ngImport: i0, template: "@if (message) {\n  {{(message | wbText)()}}\n}\n", styles: [":host{overflow-wrap:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wb-text-message', template: "@if (message) {\n  {{message}}\n}", styles: [":host{overflow-wrap:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"] }]
-        }] });
+            args: [{ selector: 'wb-text-message', imports: [
+                        TextPipe,
+                    ], template: "@if (message) {\n  {{(message | wbText)()}}\n}\n", styles: [":host{overflow-wrap:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"] }]
+        }], ctorParameters: () => [] });
 /**
  * Route for the built-in text message box capability provided by the workbench host application.
  */
@@ -14388,6 +14502,7 @@ class WorkbenchHostManifestInterceptor {
             ...hostManifest.intentions ?? [],
             providePerspectiveIntention(),
             provideViewIntention(),
+            provideTextProviderIntention(),
         ];
         hostManifest.capabilities = [
             ...hostManifest.capabilities ?? [],
@@ -14395,10 +14510,10 @@ class WorkbenchHostManifestInterceptor {
             provideBuiltInTextNotificationCapability(),
         ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchHostManifestInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchHostManifestInterceptor });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchHostManifestInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchHostManifestInterceptor });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchHostManifestInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchHostManifestInterceptor, decorators: [{
             type: Injectable
         }] });
 /**
@@ -14419,6 +14534,15 @@ function provideViewIntention() {
         qualifier: { '*': '*' },
     };
 }
+/**
+ * Provides a wildcard intention for the workbench to request texts from any application.
+ */
+function provideTextProviderIntention() {
+    return {
+        type: WorkbenchCapabilities.TextProvider,
+        qualifier: { provider: '*' },
+    };
+}
 /**
  * Provides the built-in notification capability to display text.
  *
@@ -14467,10 +14591,10 @@ function provideBuiltInTextMessageBoxCapability() {
  * SPDX-License-Identifier: EPL-2.0
  */
 class MicrofrontendSplashComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendSplashComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: MicrofrontendSplashComponent, isStandalone: true, selector: "wb-microfrontend-splash", ngImport: i0, template: "<sci-throbber type=\"ellipsis\"/>\n", styles: [":host{display:grid;place-items:center;grid-template-rows:minmax(3em,150px);overflow:hidden}:host>sci-throbber{--sci-throbber-size: 64px}\n"], dependencies: [{ kind: "component", type: SciThrobberComponent, selector: "sci-throbber", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendSplashComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MicrofrontendSplashComponent, isStandalone: true, selector: "wb-microfrontend-splash", ngImport: i0, template: "<sci-throbber type=\"ellipsis\"/>\n", styles: [":host{display:grid;place-items:center;grid-template-rows:minmax(3em,150px);overflow:hidden}:host>sci-throbber{--sci-throbber-size: 64px}\n"], dependencies: [{ kind: "component", type: SciThrobberComponent, selector: "sci-throbber", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendSplashComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendSplashComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-microfrontend-splash', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SciThrobberComponent], template: "<sci-throbber type=\"ellipsis\"/>\n", styles: [":host{display:grid;place-items:center;grid-template-rows:minmax(3em,150px);overflow:hidden}:host>sci-throbber{--sci-throbber-size: 64px}\n"] }]
         }] });
@@ -14555,7 +14679,7 @@ const Microfrontends = {
     },
     /**
      * Replaces named parameters in the given value with values contained in the given {@link Map}.
-     * Named parameters begin with a colon (`:`).
+     * Named parameters start with a colon (`:`).
      */
     substituteNamedParameters,
 };
@@ -14670,10 +14794,10 @@ class MicrofrontendPopupComponent {
     get popupContext() {
         return this.popup.input;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: MicrofrontendPopupComponent, isStandalone: true, selector: "wb-microfrontend-popup", host: { properties: { "class.workbench-drag": "workbenchLayoutService.dragging()" } }, viewQueries: [{ propertyName: "_routerOutletElement", first: true, predicate: ["router_outlet"], descendants: true, isSignal: true }], ngImport: i0, template: "<sci-router-outlet #router_outlet\n                   [name]=\"popup.id\"\n                   [attr.data-capabilityid]=\"popupCapability.metadata!.id\"\n                   [attr.data-app]=\"popupCapability.metadata!.appSymbolicName\"\n                   [ngClass]=\"popup.cssClasses\" class=\"e2e-popup\"\n                   keystrokes=\"keydown.escape\"\n                   (focuswithin)=\"onFocusWithin($event)\">\n  <ng-container *ngComponentOutlet=\"splash\"/>\n</sci-router-outlet>\n", styles: [":host{display:grid}:host.workbench-drag>sci-router-outlet{pointer-events:none}:host>sci-router-outlet::part(splash){display:grid}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: MicrofrontendPopupComponent, isStandalone: true, selector: "wb-microfrontend-popup", host: { properties: { "class.workbench-drag": "workbenchLayoutService.dragging()" } }, viewQueries: [{ propertyName: "_routerOutletElement", first: true, predicate: ["router_outlet"], descendants: true, isSignal: true }], ngImport: i0, template: "<sci-router-outlet #router_outlet\n                   [name]=\"popup.id\"\n                   [attr.data-capabilityid]=\"popupCapability.metadata!.id\"\n                   [attr.data-app]=\"popupCapability.metadata!.appSymbolicName\"\n                   [ngClass]=\"popup.cssClasses\" class=\"e2e-popup\"\n                   keystrokes=\"keydown.escape\"\n                   (focuswithin)=\"onFocusWithin($event)\">\n  <ng-container *ngComponentOutlet=\"splash\"/>\n</sci-router-outlet>\n", styles: [":host{display:grid}:host.workbench-drag>sci-router-outlet{pointer-events:none}:host>sci-router-outlet::part(splash){display:grid}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-microfrontend-popup', imports: [NgClass, NgComponentOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], host: {
                         '[class.workbench-drag]': 'workbenchLayoutService.dragging()',
@@ -14746,10 +14870,10 @@ class MicrofrontendHostPopupComponent {
         const commands = [{ outlets: { [this.popup.id]: outletCommands } }];
         return this._angularRouterMutex.submit(() => this._router.navigate(commands, { skipLocationChange: true, queryParamsHandling: 'preserve' }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendHostPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: MicrofrontendHostPopupComponent, isStandalone: true, selector: "wb-microfrontend-host-popup", ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"router_outlet; injector: outletInjector\"/>\n\n<ng-template #router_outlet>\n  <router-outlet [name]=\"popup.id\"/>\n</ng-template>\n", styles: [":host{display:grid}:host>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendHostPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MicrofrontendHostPopupComponent, isStandalone: true, selector: "wb-microfrontend-host-popup", ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"router_outlet; injector: outletInjector\"/>\n\n<ng-template #router_outlet>\n  <router-outlet [name]=\"popup.id\"/>\n</ng-template>\n", styles: [":host{display:grid}:host>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendHostPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendHostPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-microfrontend-host-popup', imports: [
                         RouterOutlet,
@@ -14920,10 +15044,10 @@ class MicrofrontendPopupIntentHandler {
             viewCapabilityId: view.adapt(MicrofrontendWorkbenchView)?.capability.metadata.id,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPopupIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPopupIntentHandler });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPopupIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPopupIntentHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPopupIntentHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPopupIntentHandler, decorators: [{
             type: Injectable
         }] });
 
@@ -14951,10 +15075,10 @@ class MicrofrontendPopupCapabilityValidator {
         }
         return capability;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPopupCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPopupCapabilityValidator });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPopupCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPopupCapabilityValidator });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPopupCapabilityValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPopupCapabilityValidator, decorators: [{
             type: Injectable
         }] });
 
@@ -14976,8 +15100,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * This component is designed to be displayed in a workbench message box.
  */
 class MicrofrontendHostMessageBoxComponent {
-    capability = input.required();
-    params = input.required();
+    capability = input.required(...(ngDevMode ? [{ debugName: "capability" }] : []));
+    params = input.required(...(ngDevMode ? [{ debugName: "params" }] : []));
+    referrer = input.required(...(ngDevMode ? [{ debugName: "referrer" }] : []));
     _host = inject(ElementRef).nativeElement;
     _injector = inject(Injector);
     _router = inject(Router);
@@ -15015,11 +15140,17 @@ class MicrofrontendHostMessageBoxComponent {
     computeOutletInjector() {
         const injector = inject(Injector);
         return computed(() => {
-            const capability = this.capability();
-            const params = this.params();
+            const context = {
+                capability: this.capability(),
+                params: this.params(),
+                dialogId: this.dialog.id,
+                referrer: {
+                    appSymbolicName: this.referrer(),
+                },
+            };
             return untracked(() => Injector.create({
                 parent: injector,
-                providers: [provideWorkbenchClientMessageBoxHandle(capability, params)],
+                providers: [provideWorkbenchClientMessageBoxHandle(context)],
             }));
         });
     }
@@ -15038,10 +15169,10 @@ class MicrofrontendHostMessageBoxComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendHostMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: MicrofrontendHostMessageBoxComponent, isStandalone: true, selector: "wb-microfrontend-host-message-box", inputs: { capability: { classPropertyName: "capability", publicName: "capability", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"router_outlet; injector: outletInjector()\"/>\n\n<ng-template #router_outlet>\n  <router-outlet [name]=\"dialog.id\"/>\n</ng-template>\n", styles: [":host{display:grid}:host>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendHostMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: MicrofrontendHostMessageBoxComponent, isStandalone: true, selector: "wb-microfrontend-host-message-box", inputs: { capability: { classPropertyName: "capability", publicName: "capability", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: true, transformFunction: null }, referrer: { classPropertyName: "referrer", publicName: "referrer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"router_outlet; injector: outletInjector()\"/>\n\n<ng-template #router_outlet>\n  <router-outlet [name]=\"dialog.id\"/>\n</ng-template>\n", styles: [":host{display:grid}:host>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendHostMessageBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendHostMessageBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-microfrontend-host-message-box', imports: [
                         RouterOutlet,
@@ -15051,14 +15182,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 /**
  * Provides the {WorkbenchMessageBox} handle to the routed component.
  */
-function provideWorkbenchClientMessageBoxHandle(capability, params) {
+function provideWorkbenchClientMessageBoxHandle(context) {
     return {
         provide: WorkbenchMessageBox,
         useFactory: () => {
             const dialog = inject(ɵWorkbenchDialog);
             return new class {
-                capability = capability;
-                params = params;
+                capability = context.capability;
+                params = context.params;
+                referrer = context.referrer;
                 id = dialog.id;
                 focused$ = toObservable(dialog.focused, { injector: dialog.injector });
                 signalReady() {
@@ -15084,8 +15216,9 @@ function provideWorkbenchClientMessageBoxHandle(capability, params) {
  * This component is designed to be displayed in a workbench message box.
  */
 class MicrofrontendMessageBoxComponent {
-    capability = input.required();
-    params = input.required();
+    capability = input.required(...(ngDevMode ? [{ debugName: "capability" }] : []));
+    params = input.required(...(ngDevMode ? [{ debugName: "params" }] : []));
+    referrer = input.required(...(ngDevMode ? [{ debugName: "referrer" }] : []));
     _host = inject(ElementRef).nativeElement;
     _outletRouter = inject(OutletRouter);
     _messageClient = inject(MessageClient);
@@ -15145,6 +15278,9 @@ class MicrofrontendMessageBoxComponent {
                 dialogId: this.dialog.id,
                 capability: this.capability(),
                 params: this.params(),
+                referrer: {
+                    appSymbolicName: this.referrer(),
+                },
             };
             const routerOutletElement = this._routerOutletElement().nativeElement;
             untracked(() => routerOutletElement.setContextValue(_MESSAGE_BOX_CONTEXT, context));
@@ -15165,10 +15301,10 @@ class MicrofrontendMessageBoxComponent {
             const properties = this.capability().properties;
             untracked(() => {
                 setStyle(routerOutletElement, {
-                    'width': properties.size?.width ?? '0', // allow content size to go bellow the default iframe size when reporting preferred size
+                    'width': properties.size?.width ?? '0', // allow content size to go below the default iframe size when reporting preferred size
                     'min-width': properties.size?.minWidth ?? null,
                     'max-width': properties.size?.maxWidth ?? null,
-                    'height': properties.size?.height ?? '0', // allow content size to go bellow the default iframe size when reporting preferred size
+                    'height': properties.size?.height ?? '0', // allow content size to go below the default iframe size when reporting preferred size
                     'min-height': properties.size?.minHeight ?? null,
                     'max-height': properties.size?.maxHeight ?? null,
                 });
@@ -15178,10 +15314,10 @@ class MicrofrontendMessageBoxComponent {
     propagateWorkbenchTheme() {
         Microfrontends.propagateTheme(this._routerOutletElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: MicrofrontendMessageBoxComponent, isStandalone: true, selector: "wb-microfrontend-message-box", inputs: { capability: { classPropertyName: "capability", publicName: "capability", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.workbench-drag": "workbenchLayoutService.dragging()" } }, viewQueries: [{ propertyName: "_routerOutletElement", first: true, predicate: ["router_outlet"], descendants: true, isSignal: true }], ngImport: i0, template: "<sci-router-outlet #router_outlet\n                   [name]=\"dialog.id\"\n                   [attr.data-capabilityid]=\"capability().metadata!.id\"\n                   [attr.data-app]=\"capability().metadata!.appSymbolicName\"\n                   keystrokes=\"keydown.escape\"\n                   (focuswithin)=\"onFocusWithin($event)\">\n  <ng-container *ngComponentOutlet=\"splash\"/>\n</sci-router-outlet>\n", styles: [":host{display:grid}:host.workbench-drag>sci-router-outlet{pointer-events:none}:host>sci-router-outlet::part(splash){display:grid}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: MicrofrontendMessageBoxComponent, isStandalone: true, selector: "wb-microfrontend-message-box", inputs: { capability: { classPropertyName: "capability", publicName: "capability", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: true, transformFunction: null }, referrer: { classPropertyName: "referrer", publicName: "referrer", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.workbench-drag": "workbenchLayoutService.dragging()" } }, viewQueries: [{ propertyName: "_routerOutletElement", first: true, predicate: ["router_outlet"], descendants: true, isSignal: true }], ngImport: i0, template: "<sci-router-outlet #router_outlet\n                   [name]=\"dialog.id\"\n                   [attr.data-capabilityid]=\"capability().metadata!.id\"\n                   [attr.data-app]=\"capability().metadata!.appSymbolicName\"\n                   keystrokes=\"keydown.escape\"\n                   (focuswithin)=\"onFocusWithin($event)\">\n  <ng-container *ngComponentOutlet=\"splash\"/>\n</sci-router-outlet>\n", styles: [":host{display:grid}:host.workbench-drag>sci-router-outlet{pointer-events:none}:host>sci-router-outlet::part(splash){display:grid}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendMessageBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendMessageBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-microfrontend-message-box', imports: [
                         NgComponentOutlet,
@@ -15245,12 +15381,13 @@ class MicrofrontendMessageBoxIntentHandler {
         const options = message.body ?? {};
         const capability = message.capability;
         const params = message.intent.params ?? new Map();
+        const referrer = message.headers.get(MessageHeaders.AppSymbolicName);
         const isHostProvider = capability.metadata.appSymbolicName === Beans.get(APP_IDENTITY);
         this._logger.debug(() => 'Handling microfrontend messagebox intent', LoggerNames.MICROFRONTEND, options);
         return this._messageBoxService.open(isHostProvider ? MicrofrontendHostMessageBoxComponent : MicrofrontendMessageBoxComponent, {
-            inputs: { capability, params },
-            title: options.title,
-            actions: options.actions,
+            inputs: { capability, params, referrer },
+            title: createRemoteTranslatable(options.title, { appSymbolicName: referrer }),
+            actions: options.actions && Object.fromEntries(Object.entries(options.actions).map(([key, label]) => [key, createRemoteTranslatable(label, { appSymbolicName: referrer })])),
             severity: options.severity,
             modality: options.modality,
             contentSelectable: options.contentSelectable,
@@ -15258,10 +15395,10 @@ class MicrofrontendMessageBoxIntentHandler {
             context: options.context,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendMessageBoxIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendMessageBoxIntentHandler });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendMessageBoxIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendMessageBoxIntentHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendMessageBoxIntentHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendMessageBoxIntentHandler, decorators: [{
             type: Injectable
         }] });
 
@@ -15280,8 +15417,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * This component is designed to be displayed in a workbench dialog.
  */
 class MicrofrontendDialogComponent {
-    capability = input.required();
-    params = input.required();
+    capability = input.required(...(ngDevMode ? [{ debugName: "capability" }] : []));
+    params = input.required(...(ngDevMode ? [{ debugName: "params" }] : []));
     _host = inject(ElementRef).nativeElement;
     _outletRouter = inject(OutletRouter);
     _messageClient = inject(MessageClient);
@@ -15355,6 +15492,7 @@ class MicrofrontendDialogComponent {
         effect(() => {
             const properties = this.capability().properties;
             const params = this.params();
+            const appSymbolicName = this.capability().metadata.appSymbolicName;
             untracked(() => {
                 this.dialog.size.width = properties.size.width;
                 this.dialog.size.height = properties.size.height;
@@ -15362,7 +15500,7 @@ class MicrofrontendDialogComponent {
                 this.dialog.size.maxWidth = properties.size.maxWidth;
                 this.dialog.size.minHeight = properties.size.minHeight;
                 this.dialog.size.maxHeight = properties.size.maxHeight;
-                this.dialog.title = Microfrontends.substituteNamedParameters(properties.title, params);
+                this.dialog.title = createRemoteTranslatable(properties.title, { appSymbolicName, valueParams: params, topicParams: properties.resolve });
                 this.dialog.closable = properties.closable ?? true;
                 this.dialog.resizable = properties.resizable ?? true;
                 this.dialog.padding = properties.padding ?? false;
@@ -15389,13 +15527,14 @@ class MicrofrontendDialogComponent {
         inject(MessageClient).observe$(_WorkbenchCommands.dialogTitleTopic(this.dialog.id))
             .pipe(takeUntilDestroyed())
             .subscribe(message => {
-            this.dialog.title = message.body;
+            const sender = message.headers.get(MessageHeaders.AppSymbolicName);
+            this.dialog.title = createRemoteTranslatable(message.body, { appSymbolicName: sender });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: MicrofrontendDialogComponent, isStandalone: true, selector: "wb-microfrontend-dialog", inputs: { capability: { classPropertyName: "capability", publicName: "capability", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.workbench-drag": "workbenchLayoutService.dragging()" } }, viewQueries: [{ propertyName: "_routerOutletElement", first: true, predicate: ["router_outlet"], descendants: true, isSignal: true }], ngImport: i0, template: "<sci-router-outlet #router_outlet\n                   [name]=\"dialog.id\"\n                   [attr.data-capabilityid]=\"capability().metadata!.id\"\n                   [attr.data-app]=\"capability().metadata!.appSymbolicName\"\n                   keystrokes=\"keydown.escape\"\n                   (focuswithin)=\"onFocusWithin($event)\">\n  <ng-container *ngComponentOutlet=\"splash\"/>\n</sci-router-outlet>\n", styles: [":host{display:grid}:host.workbench-drag>sci-router-outlet{pointer-events:none}:host>sci-router-outlet::part(splash){display:grid}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: MicrofrontendDialogComponent, isStandalone: true, selector: "wb-microfrontend-dialog", inputs: { capability: { classPropertyName: "capability", publicName: "capability", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.workbench-drag": "workbenchLayoutService.dragging()" } }, viewQueries: [{ propertyName: "_routerOutletElement", first: true, predicate: ["router_outlet"], descendants: true, isSignal: true }], ngImport: i0, template: "<sci-router-outlet #router_outlet\n                   [name]=\"dialog.id\"\n                   [attr.data-capabilityid]=\"capability().metadata!.id\"\n                   [attr.data-app]=\"capability().metadata!.appSymbolicName\"\n                   keystrokes=\"keydown.escape\"\n                   (focuswithin)=\"onFocusWithin($event)\">\n  <ng-container *ngComponentOutlet=\"splash\"/>\n</sci-router-outlet>\n", styles: [":host{display:grid}:host.workbench-drag>sci-router-outlet{pointer-events:none}:host>sci-router-outlet::part(splash){display:grid}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-microfrontend-dialog', imports: [
                         NgComponentOutlet,
@@ -15422,8 +15561,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * This component is designed to be displayed in a workbench dialog.
  */
 class MicrofrontendHostDialogComponent {
-    capability = input.required();
-    params = input.required();
+    capability = input.required(...(ngDevMode ? [{ debugName: "capability" }] : []));
+    params = input.required(...(ngDevMode ? [{ debugName: "params" }] : []));
     _injector = inject(Injector);
     _router = inject(Router);
     /** Mutex to serialize Angular Router navigation requests, preventing the cancellation of previously initiated asynchronous navigations. */
@@ -15472,6 +15611,7 @@ class MicrofrontendHostDialogComponent {
         effect(() => {
             const properties = this.capability().properties;
             const params = this.params();
+            const appSymbolicName = this.capability().metadata.appSymbolicName;
             untracked(() => {
                 this.dialog.size.width = properties.size?.width;
                 this.dialog.size.height = properties.size?.height;
@@ -15479,17 +15619,17 @@ class MicrofrontendHostDialogComponent {
                 this.dialog.size.maxWidth = properties.size?.maxWidth;
                 this.dialog.size.minHeight = properties.size?.minHeight;
                 this.dialog.size.maxHeight = properties.size?.maxHeight;
-                this.dialog.title = Microfrontends.substituteNamedParameters(properties.title, params);
+                this.dialog.title = createRemoteTranslatable(properties.title, { appSymbolicName, valueParams: params, topicParams: properties.resolve });
                 this.dialog.closable = properties.closable ?? true;
                 this.dialog.resizable = properties.resizable ?? true;
                 this.dialog.padding = properties.padding ?? true;
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendHostDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: MicrofrontendHostDialogComponent, isStandalone: true, selector: "wb-microfrontend-host-dialog", inputs: { capability: { classPropertyName: "capability", publicName: "capability", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"router_outlet; injector: outletInjector()\"/>\n\n<ng-template #router_outlet>\n  <router-outlet [name]=\"dialog.id\"/>\n</ng-template>\n", styles: [":host{display:grid}:host>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendHostDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: MicrofrontendHostDialogComponent, isStandalone: true, selector: "wb-microfrontend-host-dialog", inputs: { capability: { classPropertyName: "capability", publicName: "capability", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"router_outlet; injector: outletInjector()\"/>\n\n<ng-template #router_outlet>\n  <router-outlet [name]=\"dialog.id\"/>\n</ng-template>\n", styles: [":host{display:grid}:host>router-outlet{position:absolute}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendHostDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendHostDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-microfrontend-host-dialog', imports: [
                         RouterOutlet,
@@ -15514,7 +15654,7 @@ function provideWorkbenchClientDialogHandle(capability, params) {
                     titleChange$.next();
                     Observables.coerce(title)
                         .pipe(takeUntilDestroyed(dialog.injector.get(DestroyRef)), takeUntil(titleChange$))
-                        .subscribe(title => dialog.title = title);
+                        .subscribe(title => dialog.title = createRemoteTranslatable(title, { appSymbolicName: capability.metadata.appSymbolicName }));
                 }
                 close(result) {
                     dialog.close(result);
@@ -15592,10 +15732,10 @@ class MicrofrontendDialogIntentHandler {
             cssClass: Arrays.coerce(capability.properties.cssClass).concat(Arrays.coerce(options.cssClass)),
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendDialogIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendDialogIntentHandler });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendDialogIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendDialogIntentHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendDialogIntentHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendDialogIntentHandler, decorators: [{
             type: Injectable
         }] });
 
@@ -15644,10 +15784,10 @@ class MicrofrontendDialogCapabilityValidator {
             throw Error(`[NullSizeError] Dialog capability requires width and height in its size properties [application="${capability.metadata.appSymbolicName}", capability="${Objects.toMatrixNotation(capability.qualifier)}"]`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendDialogCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendDialogCapabilityValidator });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendDialogCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendDialogCapabilityValidator });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendDialogCapabilityValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendDialogCapabilityValidator, decorators: [{
             type: Injectable
         }] });
 
@@ -15675,10 +15815,10 @@ class MicrofrontendViewCapabilityValidator {
         }
         return capability;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewCapabilityValidator });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewCapabilityValidator });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewCapabilityValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewCapabilityValidator, decorators: [{
             type: Injectable
         }] });
 
@@ -15701,10 +15841,10 @@ class StableCapabilityIdAssigner {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: StableCapabilityIdAssigner, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: StableCapabilityIdAssigner });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: StableCapabilityIdAssigner, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: StableCapabilityIdAssigner });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: StableCapabilityIdAssigner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: StableCapabilityIdAssigner, decorators: [{
             type: Injectable
         }] });
 
@@ -15732,10 +15872,10 @@ class MicrofrontendMessageBoxCapabilityValidator {
         }
         return capability;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendMessageBoxCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendMessageBoxCapabilityValidator });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendMessageBoxCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendMessageBoxCapabilityValidator });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendMessageBoxCapabilityValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendMessageBoxCapabilityValidator, decorators: [{
             type: Injectable
         }] });
 function isBuiltInTextMessageBoxCapability(capability) {
@@ -15773,10 +15913,10 @@ class MicrofrontendPerspectiveCapabilityValidator {
         }
         return capability;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPerspectiveCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPerspectiveCapabilityValidator });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPerspectiveCapabilityValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPerspectiveCapabilityValidator });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPerspectiveCapabilityValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPerspectiveCapabilityValidator, decorators: [{
             type: Injectable
         }] });
 
@@ -15818,10 +15958,37 @@ class MicrofrontendPerspectiveIntentHandler {
         this._logger.debug(() => `Switching to perspective ${perspectiveId}.`, LoggerNames.MICROFRONTEND);
         return this._workbenchService.switchPerspective(perspectiveId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPerspectiveIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPerspectiveIntentHandler });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPerspectiveIntentHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPerspectiveIntentHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPerspectiveIntentHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPerspectiveIntentHandler, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Configures view capabilities not defining {@link WorkbenchViewCapability.properties.lazy} to preload views to maintain compatibility with applications setting view titles and headings in view microfrontends.
+ *
+ * @see MicrofrontendPlatformConfig.preloadInactiveViews
+ */
+class ViewCapabilityPreloadCapabilityInterceptor {
+    _logger = inject(Logger);
+    async intercept(capability) {
+        if (capability.type !== WorkbenchCapabilities.View) {
+            return capability;
+        }
+        const viewCapability = capability;
+        if (viewCapability.properties.lazy === undefined) {
+            viewCapability.properties.lazy = false;
+            const appSymbolicName = viewCapability.metadata?.appSymbolicName;
+            const qualifier = Object.entries(viewCapability.qualifier).reduce((qualifier, [key, value]) => `${qualifier};${key}=${value}`, '').substring(1);
+            this._logger.warn(`[Deprecation] Application '${appSymbolicName}' provides a "non-lazy" view capability: {${qualifier}}. Change to lazy by setting 'lazy' in capability properties. Lazy views require a title and heading in the manifest. Title and heading can be localized with optional interpolation parameters using resolvers. See documentation for details: https://workbench-client-api.scion.vercel.app/interfaces/WorkbenchViewCapability.html`);
+        }
+        return viewCapability;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewCapabilityPreloadCapabilityInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewCapabilityPreloadCapabilityInterceptor });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewCapabilityPreloadCapabilityInterceptor, decorators: [{
             type: Injectable
         }] });
 
@@ -15852,6 +16019,7 @@ class MicrofrontendPlatformInitializer {
     _dialogCapabilityValidator = inject(MicrofrontendDialogCapabilityValidator);
     _messageBoxCapabilityValidator = inject(MicrofrontendMessageBoxCapabilityValidator);
     _stableCapabilityIdAssigner = inject(StableCapabilityIdAssigner);
+    _viewCapabilityPreloadCapabilityInterceptor = inject(ViewCapabilityPreloadCapabilityInterceptor);
     _injector = inject(Injector);
     _zone = inject(NgZone);
     _logger = inject(Logger);
@@ -15873,6 +16041,7 @@ class MicrofrontendPlatformInitializer {
         Beans.register(WorkbenchMessageBoxService$1, { useClass: _WorkbenchMessageBoxService });
         Beans.register(WorkbenchDialogService$1, { useClass: _WorkbenchDialogService });
         Beans.register(WorkbenchNotificationService);
+        Beans.register(WorkbenchTextService, { useClass: _WorkbenchTextService });
         // Register host manifest interceptor for the workbench to register workbench-specific intentions and capabilities.
         Beans.register(HostManifestInterceptor, { useValue: this._hostManifestInterceptor, multi: true });
         // Synchronize emissions of Observables exposed by the SCION Microfrontend Platform with the Angular zone.
@@ -15899,6 +16068,10 @@ class MicrofrontendPlatformInitializer {
         Beans.register(CapabilityInterceptor, { useValue: this._messageBoxCapabilityValidator, multi: true });
         // Register capability interceptor to assign perspective and view capabilities a stable identifier.
         Beans.register(CapabilityInterceptor, { useValue: this._stableCapabilityIdAssigner, multi: true });
+        // Register view capability interceptor to preload inactive microfrontend views not defining the `lazy` property to maintain compatibility with applications setting view titles and headings in view microfrontends.
+        if (this.config.preloadInactiveViews) {
+            Beans.register(CapabilityInterceptor, { useValue: this._viewCapabilityPreloadCapabilityInterceptor, multi: true });
+        }
         // Inject services registered under {MICROFRONTEND_PLATFORM_POST_STARTUP} DI token;
         // must be done in runlevel 2, i.e., before activator microfrontends are installed.
         Beans.registerInitializer({
@@ -15914,10 +16087,10 @@ class MicrofrontendPlatformInitializer {
     ngOnDestroy() {
         void MicrofrontendPlatform.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPlatformInitializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPlatformInitializer });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPlatformInitializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPlatformInitializer });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPlatformInitializer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPlatformInitializer, decorators: [{
             type: Injectable
         }] });
 
@@ -15949,7 +16122,8 @@ class MicrofrontendViewCommandHandler {
         return this._messageClient.onMessage(_WorkbenchCommands.viewTitleTopic(':viewId'), message => {
             const viewId = message.params.get('viewId');
             this.runIfPrivileged(viewId, message, view => {
-                view.title = message.body;
+                const referrer = message.headers.get(MessageHeaders.AppSymbolicName);
+                view.title = createRemoteTranslatable(message.body, { appSymbolicName: referrer }) ?? null;
             });
         });
     }
@@ -15960,7 +16134,8 @@ class MicrofrontendViewCommandHandler {
         return this._messageClient.onMessage(_WorkbenchCommands.viewHeadingTopic(':viewId'), message => {
             const viewId = message.params.get('viewId');
             this.runIfPrivileged(viewId, message, view => {
-                view.heading = message.body;
+                const referrer = message.headers.get(MessageHeaders.AppSymbolicName);
+                view.heading = createRemoteTranslatable(message.body, { appSymbolicName: referrer }) ?? null;
             });
         });
     }
@@ -16014,10 +16189,10 @@ class MicrofrontendViewCommandHandler {
     ngOnDestroy() {
         this._subscriptions.forEach(subscription => subscription.unsubscribe());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewCommandHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewCommandHandler });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewCommandHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewCommandHandler });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewCommandHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewCommandHandler, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 /**
@@ -16058,10 +16233,10 @@ class Notification {
  */
 class TextNotificationComponent {
     text = inject(Notification).input;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: TextNotificationComponent, isStandalone: true, selector: "wb-text-notification", ngImport: i0, template: `{{(text | wbText)()}}`, isInline: true, dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: TextNotificationComponent, isStandalone: true, selector: "wb-text-notification", ngImport: i0, template: `{{(text | wbText)()}}`, isInline: true, dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextNotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TextNotificationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'wb-text-notification',
@@ -16233,10 +16408,10 @@ class NotificationService {
             this.closeNotification(lastNotification);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -16257,11 +16432,13 @@ function installNotificationIntentHandler() {
     const intentClient = inject(IntentClient);
     const notificationService = inject(NotificationService);
     const logger = inject(Logger);
-    intentClient.onIntent({ type: WorkbenchCapabilities.Notification, qualifier: {} }, ({ body: config }) => {
+    intentClient.onIntent({ type: WorkbenchCapabilities.Notification, qualifier: {} }, message => {
+        const config = message.body;
+        const referrer = message.headers.get(MessageHeaders.AppSymbolicName);
         logger.debug(() => 'Showing notification', LoggerNames.MICROFRONTEND, config);
         notificationService.notify({
-            title: config?.title,
-            content: config?.content ? config.content : '',
+            title: createRemoteTranslatable(config?.title, { appSymbolicName: referrer }),
+            content: createRemoteTranslatable(config?.content, { appSymbolicName: referrer }) ?? '',
             severity: config?.severity,
             duration: config?.duration,
             group: config?.group,
@@ -16317,11 +16494,11 @@ class ContentAsOverlayComponent {
      *
      * A config input is used instead of separate input properties to support updating the config if detached from the Angular change detector.
      */
-    config = input.required();
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
     _template = viewChild.required(TemplateRef);
-    _visible = computed(() => this.config().visible());
-    _location = computed(() => this.config().location());
-    _overlay = signal(undefined);
+    _visible = computed(() => this.config().visible(), ...(ngDevMode ? [{ debugName: "_visible" }] : []));
+    _location = computed(() => this.config().location(), ...(ngDevMode ? [{ debugName: "_location" }] : []));
+    _overlay = signal(undefined, ...(ngDevMode ? [{ debugName: "_overlay" }] : []));
     constructor() {
         this.createOverlay();
         this.alignOverlayToHostBounds();
@@ -16383,10 +16560,10 @@ class ContentAsOverlayComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ContentAsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: ContentAsOverlayComponent, isStandalone: true, selector: "wb-content-as-overlay", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <ng-content/>\n</ng-template>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ContentAsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: ContentAsOverlayComponent, isStandalone: true, selector: "wb-content-as-overlay", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <ng-content/>\n</ng-template>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ContentAsOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ContentAsOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-content-as-overlay', template: "<ng-template>\n  <ng-content/>\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
@@ -16432,7 +16609,7 @@ class MicrofrontendViewComponent {
         location: inject(IFRAME_OVERLAY_HOST),
         visible: this.view.slot.portal.attached,
     };
-    capability = null;
+    capability = signal(null, ...(ngDevMode ? [{ debugName: "capability" }] : []));
     constructor() {
         this._logger.debug(() => `Constructing MicrofrontendViewComponent. [viewId=${this.view.id}]`, LoggerNames.MICROFRONTEND_ROUTING);
         this.keystrokesToBubble = this.computeKeyStrokesToBubble();
@@ -16448,7 +16625,8 @@ class MicrofrontendViewComponent {
     }
     installNavigator() {
         this._route.params
-            .pipe(switchMap(params => this.fetchCapability$(params[_MicrofrontendRouteParams.ɵVIEW_CAPABILITY_ID]).pipe(map(capability => ({ capability, params })))), serializeExecution(({ capability, params }) => this.onNavigate(this.capability, capability, params)), takeUntilDestroyed())
+            .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.
+        takeUntilDestroyed())
             .subscribe();
     }
     /**
@@ -16461,23 +16639,39 @@ class MicrofrontendViewComponent {
             untracked(() => routerOutletElement.setContextValue(_VIEW_ID_CONTEXT_KEY, this.view.id));
         });
     }
-    async onNavigate(prevCapability, capability, params) {
+    /**
+     * Method invoked each time when navigating to a different capability.
+     */
+    onCapabilityChange(context) {
+        const { capability, prevCapability, params } = context;
+        this.capability.set(capability);
+        // Signal the currently loaded application to unload.
+        if (prevCapability && prevCapability.metadata.appSymbolicName !== capability?.metadata.appSymbolicName) {
+            void this._messageClient.publish(_WorkbenchCommands.viewUnloadingTopic(this.view.id));
+        }
+        // Update view properties.
+        this.setViewProperties(context);
+        // Inactive views are not checked for changes since detached from the Angular component tree.
+        // So, we manually trigger change detection to update attributes on the `sci-router-outlet`.
+        if (!this.view.active()) {
+            this._changeDetectorRef.detectChanges();
+        }
+        // Unload microfrontend if capability is not found.
         if (!capability) {
             this._logger.warn(() => `[NullCapabilityError] No application found to provide a view capability of id '${params[_MicrofrontendRouteParams.ɵVIEW_CAPABILITY_ID]}'. Maybe, the requested view is not public API or the providing application not available.`, LoggerNames.MICROFRONTEND_ROUTING);
             this.unload();
-            return;
         }
-        this.capability = capability;
+    }
+    /**
+     * Method invoked to perform a navigation.
+     */
+    async onNavigate(context) {
+        const { capability, prevCapability, params } = context;
         this.view.registerAdapter(MicrofrontendWorkbenchView, new MicrofrontendWorkbenchView(capability, params));
-        // Check if navigating to a new microfrontend.
+        // Check if navigating to a different microfrontend.
         if (!prevCapability || prevCapability.metadata.id !== capability.metadata.id) {
-            this.setViewProperties(capability, params);
             this.installParamsUpdater(capability);
         }
-        // Signal the currently loaded application to unload.
-        if (prevCapability && prevCapability.metadata.appSymbolicName !== capability.metadata.appSymbolicName) {
-            await this._messageClient.publish(_WorkbenchCommands.viewUnloadingTopic(this.view.id));
-        }
         // Pass parameters to the microfrontend.
         await this._messageClient.publish(_WorkbenchCommands.viewParamsTopic(this.view.id), Maps.coerce(params), { retain: true });
         // When navigating to another view capability of the same app, wait until transported the params to the microfrontend before loading the
@@ -16493,7 +16687,7 @@ class MicrofrontendViewComponent {
         }
         // Navigate to the microfrontend.
         const application = this._manifestService.getApplication(capability.metadata.appSymbolicName);
-        this._logger.debug(() => `Loading microfrontend into workbench view [viewId=${this.view.id}, app=${capability.metadata.appSymbolicName}, baseUrl=${application.baseUrl}, path=${(capability.properties.path)}].`, LoggerNames.MICROFRONTEND_ROUTING, params, capability);
+        this._logger.debug(() => `Loading microfrontend into "${this.view.id}" [app=${capability.metadata.appSymbolicName}, baseUrl=${application.baseUrl}, path=${(capability.properties.path)}].`, LoggerNames.MICROFRONTEND_ROUTING, params, capability);
         await this._outletRouter.navigate(capability.properties.path, {
             outlet: this.view.id,
             relativeTo: application.baseUrl,
@@ -16502,11 +16696,6 @@ class MicrofrontendViewComponent {
             showSplash: capability.properties.showSplash,
             ɵcapabilityId: capability.metadata.id,
         });
-        // Inactive views are not checked for changes since detached from the Angular component tree.
-        // So, we manually trigger change detection to update attributes on the `sci-router-outlet`.
-        if (!this.view.active()) {
-            this._changeDetectorRef.detectChanges();
-        }
     }
     fetchCapability$(capabilityId) {
         return this._manifestObjectCache.observeCapability$(capabilityId);
@@ -16550,11 +16739,12 @@ class MicrofrontendViewComponent {
     /**
      * Updates the properties of this view, such as the view title, as defined by the capability.
      */
-    setViewProperties(viewCapability, params) {
-        this.view.title = Microfrontends.substituteNamedParameters(viewCapability.properties.title, Maps.coerce(params)) ?? null;
-        this.view.heading = Microfrontends.substituteNamedParameters(viewCapability.properties.heading, Maps.coerce(params)) ?? null;
-        this.view.classList.application = viewCapability.properties.cssClass;
-        this.view.closable = viewCapability.properties.closable ?? true;
+    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;
+        this.view.classList.application = capability?.properties.cssClass;
+        this.view.closable = capability?.properties.closable ?? true;
         this.view.dirty = false;
     }
     installViewActivePublisher() {
@@ -16654,12 +16844,12 @@ class MicrofrontendViewComponent {
         void this._outletRouter.navigate(null, { outlet: this.view.id });
         this.view.unregisterAdapter(MicrofrontendWorkbenchView);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: MicrofrontendViewComponent, isStandalone: true, selector: "wb-microfrontend-view", viewQueries: [{ propertyName: "_routerOutletElement", first: true, predicate: ["router_outlet"], descendants: true, isSignal: true }], ngImport: i0, template: "<wb-content-as-overlay [config]=\"overlayConfig\">\n  <div class=\"microfrontend-view\"\n       [class.workbench-drag]=\"workbenchLayoutService.dragging()\"\n       [attr.data-viewid]=\"view.id\"\n       wbGlassPane>\n    <sci-router-outlet #router_outlet\n                       [name]=\"view.id\"\n                       [attr.data-capabilityid]=\"capability?.metadata!.id\"\n                       [attr.data-app]=\"capability?.metadata!.appSymbolicName\"\n                       [ngClass]=\"view.classList.asList()\"\n                       (focuswithin)=\"onFocusWithin($event)\"\n                       [keystrokes]=\"keystrokesToBubble()\">\n      <ng-container *ngComponentOutlet=\"splash\"/>\n    </sci-router-outlet>\n  </div>\n</wb-content-as-overlay>\n", styles: [":host{display:grid}div.microfrontend-view{display:grid}div.microfrontend-view.workbench-drag{pointer-events:none}div.microfrontend-view>sci-router-outlet::part(splash){display:grid}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ContentAsOverlayComponent, selector: "wb-content-as-overlay", inputs: ["config"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: GlassPaneDirective, selector: "[wbGlassPane]" }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: MicrofrontendViewComponent, isStandalone: true, selector: "wb-microfrontend-view", viewQueries: [{ propertyName: "_routerOutletElement", first: true, predicate: ["router_outlet"], descendants: true, isSignal: true }], ngImport: i0, template: "<wb-content-as-overlay [config]=\"overlayConfig\">\n  <div class=\"microfrontend-view\"\n       [class.workbench-drag]=\"workbenchLayoutService.dragging()\"\n       [attr.data-viewid]=\"view.id\"\n       wbGlassPane>\n    <sci-router-outlet #router_outlet\n                       [name]=\"view.id\"\n                       [attr.data-capabilityid]=\"capability()?.metadata!.id\"\n                       [attr.data-app]=\"capability()?.metadata!.appSymbolicName\"\n                       [ngClass]=\"view.classList.asList()\"\n                       (focuswithin)=\"onFocusWithin($event)\"\n                       [keystrokes]=\"keystrokesToBubble()\">\n      <ng-container *ngComponentOutlet=\"splash\"/>\n    </sci-router-outlet>\n  </div>\n</wb-content-as-overlay>\n", styles: [":host{display:grid}div.microfrontend-view{display:grid}div.microfrontend-view.workbench-drag{pointer-events:none}div.microfrontend-view>sci-router-outlet::part(splash){display:grid}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ContentAsOverlayComponent, selector: "wb-content-as-overlay", inputs: ["config"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: GlassPaneDirective, selector: "[wbGlassPane]" }], viewProviders: [
             configureMicrofrontendGlassPane(),
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-microfrontend-view', imports: [
                         NgClass,
@@ -16668,7 +16858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                         GlassPaneDirective,
                     ], viewProviders: [
                         configureMicrofrontendGlassPane(),
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<wb-content-as-overlay [config]=\"overlayConfig\">\n  <div class=\"microfrontend-view\"\n       [class.workbench-drag]=\"workbenchLayoutService.dragging()\"\n       [attr.data-viewid]=\"view.id\"\n       wbGlassPane>\n    <sci-router-outlet #router_outlet\n                       [name]=\"view.id\"\n                       [attr.data-capabilityid]=\"capability?.metadata!.id\"\n                       [attr.data-app]=\"capability?.metadata!.appSymbolicName\"\n                       [ngClass]=\"view.classList.asList()\"\n                       (focuswithin)=\"onFocusWithin($event)\"\n                       [keystrokes]=\"keystrokesToBubble()\">\n      <ng-container *ngComponentOutlet=\"splash\"/>\n    </sci-router-outlet>\n  </div>\n</wb-content-as-overlay>\n", styles: [":host{display:grid}div.microfrontend-view{display:grid}div.microfrontend-view.workbench-drag{pointer-events:none}div.microfrontend-view>sci-router-outlet::part(splash){display:grid}\n"] }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<wb-content-as-overlay [config]=\"overlayConfig\">\n  <div class=\"microfrontend-view\"\n       [class.workbench-drag]=\"workbenchLayoutService.dragging()\"\n       [attr.data-viewid]=\"view.id\"\n       wbGlassPane>\n    <sci-router-outlet #router_outlet\n                       [name]=\"view.id\"\n                       [attr.data-capabilityid]=\"capability()?.metadata!.id\"\n                       [attr.data-app]=\"capability()?.metadata!.appSymbolicName\"\n                       [ngClass]=\"view.classList.asList()\"\n                       (focuswithin)=\"onFocusWithin($event)\"\n                       [keystrokes]=\"keystrokesToBubble()\">\n      <ng-container *ngComponentOutlet=\"splash\"/>\n    </sci-router-outlet>\n  </div>\n</wb-content-as-overlay>\n", styles: [":host{display:grid}div.microfrontend-view{display:grid}div.microfrontend-view.workbench-drag{pointer-events:none}div.microfrontend-view>sci-router-outlet::part(splash){display:grid}\n"] }]
         }], ctorParameters: () => [] });
 /**
  * Blocks the microfrontend outlet when dialog(s) overlay this view.
@@ -16685,6 +16875,39 @@ function configureMicrofrontendGlassPane() {
         },
     ];
 }
+/**
+ * Executes passed function each time when the source emits a different capability.
+ */
+function executeOnCapabilityChange(onCapabilityChange) {
+    let prevCapability = null;
+    return map(({ capability, params }) => {
+        const context = { capability, prevCapability, params };
+        if (prevCapability?.metadata.id !== capability?.metadata.id) {
+            onCapabilityChange(context);
+            prevCapability = capability;
+        }
+        return context;
+    });
+}
+/**
+ * Continues the execution chain only if the capability is not `null`.
+ */
+function filterNullCapability() {
+    return filter((context) => !!context.capability);
+}
+/**
+ * Mirrors the source if the view is active or non-lazy. Otherwise, emission is delayed until the view is activated.
+ *
+ * Cancels any previous delayed emission when the source emits again.
+ */
+function delayIfLazy() {
+    // Use a root effect to continue emitting even if the component is detached from change detection.
+    const active$ = toRootObservable(inject(ɵWorkbenchView).active);
+    return switchMap(context => {
+        const lazy = context.capability.properties.lazy ?? true;
+        return active$.pipe(filter(active => active || !lazy), map(() => context), take(1));
+    });
+}
 
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
@@ -16799,10 +17022,10 @@ class MicrofrontendPerspectiveInstaller {
         }));
         return firstValueFrom(viewCapabilities$);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPerspectiveInstaller, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPerspectiveInstaller });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPerspectiveInstaller, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPerspectiveInstaller });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MicrofrontendPerspectiveInstaller, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MicrofrontendPerspectiveInstaller, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 /**
@@ -16815,6 +17038,33 @@ function providePerspectiveInstaller() {
     ]);
 }
 
+/*
+ * Copyright (c) 2018-2025 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Registers a text provider for micro apps to request texts of the host app.
+ */
+function provideHostTextProvider() {
+    return makeEnvironmentProviders([
+        provideMicrofrontendPlatformInitializer(() => {
+            const injector = inject(Injector);
+            WorkbenchClient.registerTextProvider((key, params) => {
+                const translatable = Object.entries(params).reduce((translatable, [name, value]) => `${translatable};${name}=${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
+                finalize(() => environmentInjector.destroy()));
+            });
+        }),
+    ]);
+}
+
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
  *
@@ -16849,12 +17099,15 @@ function provideWorkbenchMicrofrontendSupport(workbenchConfig) {
         MicrofrontendDialogCapabilityValidator,
         MicrofrontendMessageBoxCapabilityValidator,
         StableCapabilityIdAssigner,
+        ViewCapabilityPreloadCapabilityInterceptor,
         NgZoneObservableDecorator,
         WorkbenchHostManifestInterceptor,
         provideBuiltInTextMessageBoxCapabilityRoute(),
         provideMicrofrontendViewRoute(),
         provideMicrofrontendPlatformBeans(),
         provideWorkbenchClientBeans(),
+        provideRemoteTextProvider(),
+        provideHostTextProvider(),
     ]);
 }
 /**
@@ -16903,6 +17156,7 @@ function provideWorkbenchClientBeans() {
         { provide: WorkbenchDialogService$1, useFactory: () => Beans.get(WorkbenchDialogService$1) },
         { provide: WorkbenchMessageBoxService$1, useFactory: () => Beans.get(WorkbenchMessageBoxService$1) },
         { provide: WorkbenchNotificationService, useFactory: () => Beans.get(WorkbenchNotificationService) },
+        { provide: WorkbenchTextService, useFactory: () => Beans.get(WorkbenchTextService) },
     ]);
 }
 /**
@@ -16945,10 +17199,10 @@ class StaticMicrofrontendPlatformConfigLoader {
     async load() {
         return this._workbenchConfig.microfrontendPlatform;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: StaticMicrofrontendPlatformConfigLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: StaticMicrofrontendPlatformConfigLoader });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: StaticMicrofrontendPlatformConfigLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: StaticMicrofrontendPlatformConfigLoader });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: StaticMicrofrontendPlatformConfigLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: StaticMicrofrontendPlatformConfigLoader, decorators: [{
             type: Injectable
         }] });
 
@@ -17006,10 +17260,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * @see provideWorkbenchInitializer
  */
 class WorkbenchLauncher {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLauncher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLauncher, providedIn: 'root', useExisting: ɵWorkbenchLauncher });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLauncher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLauncher, providedIn: 'root', useExisting: ɵWorkbenchLauncher });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLauncher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLauncher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useExisting: ɵWorkbenchLauncher }]
         }] });
@@ -17084,10 +17338,10 @@ class ɵLocation extends Location {
         // the router only if the platform is still running.
         return (this._router ??= !this._appRef.destroyed ? this._appRef.injector.get(Router) : undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵLocation, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵLocation });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵLocation, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵLocation });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ɵLocation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ɵLocation, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -17242,7 +17496,7 @@ function provideTextProviders(config) {
         // Provide app-specific texts.
         {
             provide: WORKBENCH_TEXT_PROVIDER,
-            useValue: config.textProvider ?? (() => undefined),
+            useValue: applicationTextProvider(config),
             multi: true,
         },
         // Provide texts of menu items configured in `config.viewMenuItems`.
@@ -17259,6 +17513,25 @@ function provideTextProviders(config) {
         },
     ]);
 }
+/**
+ * Provides application-specifc texts and translated workbench texts.
+ *
+ * Register this provider as the first text provider, enabling change or translation of built-in workbench texts.
+ */
+function applicationTextProvider(config) {
+    const appTextProvider = config.textProvider;
+    if (!appTextProvider) {
+        return () => undefined;
+    }
+    return (key, params) => {
+        // Translation keys starting with the `workbench.external.` prefix are external and must not
+        // be localized by the workbench application, such as remote keys to resolve texts from micro apps.
+        if (key.startsWith('workbench.external.')) {
+            return undefined;
+        }
+        return appTextProvider(key, params);
+    };
+}
 
 /**
  * Provides Material icons for non-workbench icons.
@@ -17284,11 +17557,11 @@ class MaterialIconComponent {
     /**
      * Specifies the ligature of the Material icon.
      */
-    ligature = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MaterialIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: MaterialIconComponent, isStandalone: true, selector: "wb-material-icon", inputs: { ligature: { classPropertyName: "ligature", publicName: "ligature", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.material-icons": "true", "class.material-icons-outlined": "true", "class.material-icons-round": "true", "class.material-icons-sharp": "true", "class.material-symbols-sharp": "true", "class.material-symbols-outlined": "true", "class.material-symbols-rounded": "true" } }, ngImport: i0, template: '{{ligature()}}', isInline: true });
+    ligature = input.required(...(ngDevMode ? [{ debugName: "ligature" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MaterialIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: MaterialIconComponent, isStandalone: true, selector: "wb-material-icon", inputs: { ligature: { classPropertyName: "ligature", publicName: "ligature", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.material-icons": "true", "class.material-icons-outlined": "true", "class.material-icons-round": "true", "class.material-icons-sharp": "true", "class.material-symbols-sharp": "true", "class.material-symbols-outlined": "true", "class.material-symbols-rounded": "true" } }, ngImport: i0, template: '{{ligature()}}', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MaterialIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MaterialIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'wb-material-icon',
@@ -17347,11 +17620,11 @@ class WorkbenchIconComponent {
     /**
      * Specifies the ligature of the icon.
      */
-    ligature = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: WorkbenchIconComponent, isStandalone: true, selector: "wb-workbench-icon", inputs: { ligature: { classPropertyName: "ligature", publicName: "ligature", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.scion-workbench-icons": "true" } }, ngImport: i0, template: '{{ligature()}}', isInline: true });
+    ligature = input.required(...(ngDevMode ? [{ debugName: "ligature" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: WorkbenchIconComponent, isStandalone: true, selector: "wb-workbench-icon", inputs: { ligature: { classPropertyName: "ligature", publicName: "ligature", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.scion-workbench-icons": "true" } }, ngImport: i0, template: '{{ligature()}}', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'wb-workbench-icon',
@@ -17532,10 +17805,10 @@ function rejectIfNotRootEnvironment() {
  * Default splash displayed while starting the workbench.
  */
 class SplashComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SplashComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: SplashComponent, isStandalone: true, selector: "wb-splash", ngImport: i0, template: "<sci-throbber type=\"ellipsis\"/>\n", styles: [":host{display:grid;justify-content:center;margin-top:3em}:host>sci-throbber{--sci-throbber-size: 80px}\n"], dependencies: [{ kind: "component", type: SciThrobberComponent, selector: "sci-throbber", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SplashComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: SplashComponent, isStandalone: true, selector: "wb-splash", ngImport: i0, template: "<sci-throbber type=\"ellipsis\"/>\n", styles: [":host{display:grid;justify-content:center;margin-top:3em}:host>sci-throbber{--sci-throbber-size: 80px}\n"], dependencies: [{ kind: "component", type: SciThrobberComponent, selector: "sci-throbber", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SplashComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SplashComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-splash', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SciThrobberComponent], template: "<sci-throbber type=\"ellipsis\"/>\n", styles: [":host{display:grid;justify-content:center;margin-top:3em}:host>sci-throbber{--sci-throbber-size: 80px}\n"] }]
         }] });
@@ -17557,10 +17830,10 @@ class CoerceObservablePipe {
     transform(value) {
         return Observables.coerce(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CoerceObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: CoerceObservablePipe, isStandalone: true, name: "wbCoerceObservable$" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CoerceObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: CoerceObservablePipe, isStandalone: true, name: "wbCoerceObservable$" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CoerceObservablePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CoerceObservablePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbCoerceObservable$' }]
         }] });
@@ -17579,7 +17852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * It informs the user of a system event, e.g., that a task has been completed or an error has occurred.
  */
 class NotificationComponent {
-    notification = input.required();
+    notification = input.required(...(ngDevMode ? [{ debugName: "notification" }] : []));
     closeNotification = output();
     _injector = inject(Injector);
     _cd = inject(ChangeDetectorRef);
@@ -17648,10 +17921,10 @@ class NotificationComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: NotificationComponent, isStandalone: true, selector: "wb-notification", inputs: { notification: { classPropertyName: "notification", publicName: "notification", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeNotification: "closeNotification" }, host: { listeners: { "mousedown": "onMousedown($event)" } }, ngImport: i0, template: "<div class=\"outline\">\n  @if (notification().title$ | async | wbCoerceObservable$ | async; as title) {\n    <header class=\"e2e-title\">{{(title | wbText)()}}</header>\n  }\n  <ng-container *cdkPortalOutlet=\"portal\"/>\n</div>\n<button (click)=\"onClose()\"\n        [title]=\"('%workbench.close.tooltip' | wbText)()\"\n        class=\"close e2e-close\">\n  <wb-icon icon=\"workbench.close\"/>\n</button>\n", styles: [":host{display:grid;background-color:var(--sci-color-background-elevation);color:var(--sci-color-text);font-size:1rem;border-radius:var(--sci-corner);box-shadow:var(--sci-elevation) var(--sci-static-color-black);width:var(--sci-workbench-notification-width);border-left:var(--sci-workbench-notification-severity-indicator-size) solid transparent;position:relative}:host.info{border-left-color:var(--sci-color-accent)}:host.warn{border-left-color:var(--sci-color-notice)}:host.error{border-left-color:var(--sci-color-negative)}:host>div.outline{border:1px solid var(--sci-color-border);border-left:none;padding:1em 1.5em;border-top-right-radius:var(--sci-corner);border-bottom-right-radius:var(--sci-corner);font-size:.9em;white-space:pre-line;overflow-wrap:break-word;overflow:hidden}:host>div.outline>header{font-weight:700;margin-bottom:.75em}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);position:absolute;top:.275em;right:.275em;padding:.125em;border-radius:var(--sci-corner-small)}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: CoerceObservablePipe, name: "wbCoerceObservable$" }, { kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: NotificationComponent, isStandalone: true, selector: "wb-notification", inputs: { notification: { classPropertyName: "notification", publicName: "notification", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeNotification: "closeNotification" }, host: { listeners: { "mousedown": "onMousedown($event)" } }, ngImport: i0, template: "<div class=\"outline\">\n  @if (notification().title$ | async | wbCoerceObservable$ | async; as title) {\n    <header class=\"e2e-title\">{{(title | wbText)()}}</header>\n  }\n  <ng-container *cdkPortalOutlet=\"portal\"/>\n</div>\n<button (click)=\"onClose()\"\n        [title]=\"('%workbench.close.tooltip' | wbText)()\"\n        class=\"close e2e-close\">\n  <wb-icon icon=\"workbench.close\"/>\n</button>\n", styles: [":host{display:grid;background-color:var(--sci-color-background-elevation);color:var(--sci-color-text);font-size:1rem;border-radius:var(--sci-corner);box-shadow:var(--sci-elevation) var(--sci-static-color-black);width:var(--sci-workbench-notification-width);border-left:var(--sci-workbench-notification-severity-indicator-size) solid transparent;position:relative}:host.info{border-left-color:var(--sci-color-accent)}:host.warn{border-left-color:var(--sci-color-notice)}:host.error{border-left-color:var(--sci-color-negative)}:host>div.outline{border:1px solid var(--sci-color-border);border-left:none;padding:1em 1.5em;border-top-right-radius:var(--sci-corner);border-bottom-right-radius:var(--sci-corner);font-size:.9em;white-space:pre-line;overflow-wrap:break-word;overflow:hidden}:host>div.outline>header{font-weight:700;margin-bottom:.75em}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor);position:absolute;top:.275em;right:.275em;padding:.125em;border-radius:var(--sci-corner-small)}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CoerceObservablePipe, name: "wbCoerceObservable$" }, { kind: "pipe", type: TextPipe, name: "wbText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AsyncPipe,
@@ -17681,10 +17954,10 @@ class NotificationCssClassesPipe {
             .concat(severity)
             .concat(`e2e-severity-${severity}`)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NotificationCssClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: NotificationCssClassesPipe, isStandalone: true, name: "wbNotificationCssClasses$" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NotificationCssClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: NotificationCssClassesPipe, isStandalone: true, name: "wbNotificationCssClasses$" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NotificationCssClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NotificationCssClassesPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'wbNotificationCssClasses$' }]
         }] });
@@ -17718,10 +17991,10 @@ class NotificationListComponent {
             ]),
         ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NotificationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: NotificationListComponent, isStandalone: true, selector: "wb-notification-list", ngImport: i0, template: "@for (notification of notifications$ | async; track notification.config.group || notification) {\n  <wb-notification [notification]=\"notification\"\n                   [ngClass]=\"notification | wbNotificationCssClasses$ | async\"\n                   (closeNotification)=\"onNotificationClose(notification)\"\n                   @notification-enter-or-leave/>\n}\n", styles: [":host{display:flex;flex-flow:column wrap-reverse;gap:.5em;max-height:100%;align-items:flex-start;align-content:flex-start;pointer-events:none;padding:.5em}:host>wb-notification{position:relative;pointer-events:auto;max-width:calc(100% - 1em)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NotificationComponent, selector: "wb-notification", inputs: ["notification"], outputs: ["closeNotification"] }, { kind: "pipe", type: NotificationCssClassesPipe, name: "wbNotificationCssClasses$" }], animations: [trigger('notification-enter-or-leave', NotificationListComponent.provideAnimation())], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NotificationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: NotificationListComponent, isStandalone: true, selector: "wb-notification-list", ngImport: i0, template: "@for (notification of notifications$ | async; track notification.config.group || notification) {\n  <wb-notification [notification]=\"notification\"\n                   [ngClass]=\"notification | wbNotificationCssClasses$ | async\"\n                   (closeNotification)=\"onNotificationClose(notification)\"\n                   @notification-enter-or-leave/>\n}\n", styles: [":host{display:flex;flex-flow:column wrap-reverse;gap:.5em;max-height:100%;align-items:flex-start;align-content:flex-start;pointer-events:none;padding:.5em}:host>wb-notification{position:relative;pointer-events:auto;max-width:calc(100% - 1em)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NotificationComponent, selector: "wb-notification", inputs: ["notification"], outputs: ["closeNotification"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: NotificationCssClassesPipe, name: "wbNotificationCssClasses$" }], animations: [trigger('notification-enter-or-leave', NotificationListComponent.provideAnimation())], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NotificationListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NotificationListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-notification-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AsyncPipe,
@@ -17744,8 +18017,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * Renders a button to toggle the visibility of an activity.
  */
 class ActivityItemComponent {
-    activity = input.required();
-    active = input.required();
+    activity = input.required(...(ngDevMode ? [{ debugName: "activity" }] : []));
+    active = input.required(...(ngDevMode ? [{ debugName: "active" }] : []));
     tooltip = text(computed(() => this.activity().tooltip ?? this.activity().label));
     focusWithinActivity = this.computeFocusWithinActivity();
     _workbenchRouter = inject(ɵWorkbenchRouter);
@@ -17779,10 +18052,10 @@ class ActivityItemComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivityItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: ActivityItemComponent, isStandalone: true, selector: "wb-activity-item", inputs: { activity: { classPropertyName: "activity", publicName: "activity", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-active": "active() ? '' : null", "attr.data-focus-within-activity": "focusWithinActivity() ? '' : null", "attr.data-activityid": "activity().id", "attr.title": "tooltip()" } }, ngImport: i0, template: "<button (click)=\"onToggle()\"\n        [class.focus-within-activity]=\"focusWithinActivity()\"\n        [class.active]=\"active()\">\n  <wb-icon [icon]=\"activity().icon\"/>\n</button>\n", styles: [":host{display:inline-grid}:host>button:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:var(--sci-workbench-activity-item-padding);background-color:var(--sci-workbench-activity-item-background-color);color:var(--sci-workbench-activity-item-text-color);border:var(--sci-workbench-activity-item-border-width) solid var(--sci-workbench-activity-item-border-color);border-radius:var(--sci-workbench-activity-item-border-radius);cursor:var(--sci-workbench-activity-item-cursor);-webkit-user-select:none;user-select:none;overflow:hidden;height:24px;width:24px;font-size:24px}:host>button:is(button,#sci-reset):hover{background-color:var(--sci-workbench-activity-item-background-color-hover);border-color:var(--sci-workbench-activity-item-border-color-hover);color:var(--sci-workbench-activity-item-text-color-hover)}:host>button:is(button,#sci-reset).active{background-color:var(--sci-workbench-activity-item-background-color-active);border-color:var(--sci-workbench-activity-item-border-color-active);color:var(--sci-workbench-activity-item-text-color-active)}:host>button:is(button,#sci-reset).active:hover{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-active) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).active:active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-active) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent);background-clip:padding-box}:host>button:is(button,#sci-reset).focus-within-activity{background-color:var(--sci-workbench-activity-item-background-color-focus);border-color:var(--sci-workbench-activity-item-border-color-focus);color:var(--sci-workbench-activity-item-text-color-focus)}:host>button:is(button,#sci-reset).focus-within-activity:hover{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-focus) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).focus-within-activity:active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-focus) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivityItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: ActivityItemComponent, isStandalone: true, selector: "wb-activity-item", inputs: { activity: { classPropertyName: "activity", publicName: "activity", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-active": "active() ? '' : null", "attr.data-focus-within-activity": "focusWithinActivity() ? '' : null", "attr.data-activityid": "activity().id", "attr.title": "tooltip()" } }, ngImport: i0, template: "<button (click)=\"onToggle()\"\n        [class.focus-within-activity]=\"focusWithinActivity()\"\n        [class.active]=\"active()\">\n  <wb-icon [icon]=\"activity().icon\"/>\n</button>\n", styles: [":host{display:inline-grid}:host>button:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:var(--sci-workbench-activity-item-padding);background-color:var(--sci-workbench-activity-item-background-color);color:var(--sci-workbench-activity-item-text-color);border:var(--sci-workbench-activity-item-border-width) solid var(--sci-workbench-activity-item-border-color);border-radius:var(--sci-workbench-activity-item-border-radius);cursor:var(--sci-workbench-activity-item-cursor);-webkit-user-select:none;user-select:none;overflow:hidden;height:24px;width:24px;font-size:24px}:host>button:is(button,#sci-reset):hover{background-color:var(--sci-workbench-activity-item-background-color-hover);border-color:var(--sci-workbench-activity-item-border-color-hover);color:var(--sci-workbench-activity-item-text-color-hover)}:host>button:is(button,#sci-reset):active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-hover) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).active{background-color:var(--sci-workbench-activity-item-background-color-active);border-color:var(--sci-workbench-activity-item-border-color-active);color:var(--sci-workbench-activity-item-text-color-active)}:host>button:is(button,#sci-reset).active:hover{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-active) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).active:active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-active) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent);background-clip:padding-box}:host>button:is(button,#sci-reset).focus-within-activity{background-color:var(--sci-workbench-activity-item-background-color-focus);border-color:var(--sci-workbench-activity-item-border-color-focus);color:var(--sci-workbench-activity-item-text-color-focus)}:host>button:is(button,#sci-reset).focus-within-activity:hover{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-focus) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).focus-within-activity:active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-focus) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivityItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivityItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-activity-item', imports: [
                         IconComponent,
@@ -17791,7 +18064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                         '[attr.data-focus-within-activity]': `focusWithinActivity() ? '' : null`,
                         '[attr.data-activityid]': 'activity().id',
                         '[attr.title]': 'tooltip()',
-                    }, template: "<button (click)=\"onToggle()\"\n        [class.focus-within-activity]=\"focusWithinActivity()\"\n        [class.active]=\"active()\">\n  <wb-icon [icon]=\"activity().icon\"/>\n</button>\n", styles: [":host{display:inline-grid}:host>button:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:var(--sci-workbench-activity-item-padding);background-color:var(--sci-workbench-activity-item-background-color);color:var(--sci-workbench-activity-item-text-color);border:var(--sci-workbench-activity-item-border-width) solid var(--sci-workbench-activity-item-border-color);border-radius:var(--sci-workbench-activity-item-border-radius);cursor:var(--sci-workbench-activity-item-cursor);-webkit-user-select:none;user-select:none;overflow:hidden;height:24px;width:24px;font-size:24px}:host>button:is(button,#sci-reset):hover{background-color:var(--sci-workbench-activity-item-background-color-hover);border-color:var(--sci-workbench-activity-item-border-color-hover);color:var(--sci-workbench-activity-item-text-color-hover)}:host>button:is(button,#sci-reset).active{background-color:var(--sci-workbench-activity-item-background-color-active);border-color:var(--sci-workbench-activity-item-border-color-active);color:var(--sci-workbench-activity-item-text-color-active)}:host>button:is(button,#sci-reset).active:hover{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-active) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).active:active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-active) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent);background-clip:padding-box}:host>button:is(button,#sci-reset).focus-within-activity{background-color:var(--sci-workbench-activity-item-background-color-focus);border-color:var(--sci-workbench-activity-item-border-color-focus);color:var(--sci-workbench-activity-item-text-color-focus)}:host>button:is(button,#sci-reset).focus-within-activity:hover{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-focus) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).focus-within-activity:active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-focus) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}\n"] }]
+                    }, template: "<button (click)=\"onToggle()\"\n        [class.focus-within-activity]=\"focusWithinActivity()\"\n        [class.active]=\"active()\">\n  <wb-icon [icon]=\"activity().icon\"/>\n</button>\n", styles: [":host{display:inline-grid}:host>button:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:var(--sci-workbench-activity-item-padding);background-color:var(--sci-workbench-activity-item-background-color);color:var(--sci-workbench-activity-item-text-color);border:var(--sci-workbench-activity-item-border-width) solid var(--sci-workbench-activity-item-border-color);border-radius:var(--sci-workbench-activity-item-border-radius);cursor:var(--sci-workbench-activity-item-cursor);-webkit-user-select:none;user-select:none;overflow:hidden;height:24px;width:24px;font-size:24px}:host>button:is(button,#sci-reset):hover{background-color:var(--sci-workbench-activity-item-background-color-hover);border-color:var(--sci-workbench-activity-item-border-color-hover);color:var(--sci-workbench-activity-item-text-color-hover)}:host>button:is(button,#sci-reset):active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-hover) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).active{background-color:var(--sci-workbench-activity-item-background-color-active);border-color:var(--sci-workbench-activity-item-border-color-active);color:var(--sci-workbench-activity-item-text-color-active)}:host>button:is(button,#sci-reset).active:hover{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-active) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).active:active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-active) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent);background-clip:padding-box}:host>button:is(button,#sci-reset).focus-within-activity{background-color:var(--sci-workbench-activity-item-background-color-focus);border-color:var(--sci-workbench-activity-item-border-color-focus);color:var(--sci-workbench-activity-item-text-color-focus)}:host>button:is(button,#sci-reset).focus-within-activity:hover{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-focus) 95%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}:host>button:is(button,#sci-reset).focus-within-activity:active{background-color:color-mix(in srgb,var(--sci-workbench-activity-item-background-color-focus) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}\n"] }]
         }], ctorParameters: () => [] });
 
 /*
@@ -17807,11 +18080,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * Represents the stack of activities in a docking area.
  */
 class ActivityStackComponent {
-    stack = input.required();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivityStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ActivityStackComponent, isStandalone: true, selector: "wb-activity-stack", inputs: { stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (activity of stack().activities; track activity.id) {\n  <wb-activity-item [activity]=\"activity\" [active]=\"stack().activeActivityId === activity.id\"/>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--sci-workbench-activity-item-gap)}\n"], dependencies: [{ kind: "component", type: ActivityItemComponent, selector: "wb-activity-item", inputs: ["activity", "active"] }] });
+    stack = input.required(...(ngDevMode ? [{ debugName: "stack" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivityStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ActivityStackComponent, isStandalone: true, selector: "wb-activity-stack", inputs: { stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (activity of stack().activities; track activity.id) {\n  <wb-activity-item [activity]=\"activity\" [active]=\"stack().activeActivityId === activity.id\"/>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--sci-workbench-activity-item-gap)}\n"], dependencies: [{ kind: "component", type: ActivityItemComponent, selector: "wb-activity-item", inputs: ["activity", "active"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivityStackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivityStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-activity-stack', imports: [
                         ActivityItemComponent,
@@ -17831,12 +18104,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * Renders the activity bar of a given workbench side.
  */
 class ActivityBarComponent {
-    align = input.required();
+    align = input.required(...(ngDevMode ? [{ debugName: "align" }] : []));
     layout = inject(ɵWorkbenchService).layout;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivityBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ActivityBarComponent, isStandalone: true, selector: "wb-activity-bar", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-align": "align()" } }, ngImport: i0, template: "@let activityLayout = layout().activityLayout;\n\n@switch (align()) {\n  @case ('left') {\n    @if (activityLayout.toolbars.leftTop.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.leftTop\" data-docking-area=\"left-top\"/>\n    }\n\n    @if (activityLayout.toolbars.leftTop.activities.length && activityLayout.toolbars.leftBottom.activities.length) {\n      <hr/>\n    }\n\n    @if (activityLayout.toolbars.leftBottom.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.leftBottom\" data-docking-area=\"left-bottom\"/>\n    }\n    <div class=\"filler\"></div>\n    @if (activityLayout.toolbars.bottomLeft.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.bottomLeft\" data-docking-area=\"bottom-left\"/>\n    }\n  }\n  @case ('right') {\n    @if (activityLayout.toolbars.rightTop.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.rightTop\" data-docking-area=\"right-top\"/>\n    }\n\n    @if (activityLayout.toolbars.rightTop.activities.length && activityLayout.toolbars.rightBottom.activities.length) {\n      <hr>\n    }\n\n    @if (activityLayout.toolbars.rightBottom.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.rightBottom\" data-docking-area=\"right-bottom\"/>\n    }\n    <div class=\"filler\"></div>\n    @if (activityLayout.toolbars.bottomRight.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.bottomRight\" data-docking-area=\"bottom-right\"/>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--sci-workbench-activity-item-gap);-webkit-user-select:none;user-select:none;padding:var(--sci-workbench-activity-bar-padding);background-color:var(--sci-workbench-activity-bar-background-color)}:host[data-align=left]{border-right:1px solid var(--sci-color-border)}:host[data-align=right]{border-left:1px solid var(--sci-color-border)}:host>wb-activity-stack{display:flex;flex-direction:column;align-items:center}:host>hr{all:unset;height:1px;width:24px;align-self:center;background-color:var(--sci-color-border);border-radius:var(--sci-corner)}:host>div.filler{flex:auto}\n"], dependencies: [{ kind: "component", type: ActivityStackComponent, selector: "wb-activity-stack", inputs: ["stack"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivityBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ActivityBarComponent, isStandalone: true, selector: "wb-activity-bar", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-align": "align()" } }, ngImport: i0, template: "@let activityLayout = layout().activityLayout;\n\n@switch (align()) {\n  @case ('left') {\n    @if (activityLayout.toolbars.leftTop.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.leftTop\" data-docking-area=\"left-top\"/>\n    }\n\n    @if (activityLayout.toolbars.leftTop.activities.length && activityLayout.toolbars.leftBottom.activities.length) {\n      <hr/>\n    }\n\n    @if (activityLayout.toolbars.leftBottom.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.leftBottom\" data-docking-area=\"left-bottom\"/>\n    }\n    <div class=\"filler\"></div>\n    @if (activityLayout.toolbars.bottomLeft.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.bottomLeft\" data-docking-area=\"bottom-left\"/>\n    }\n  }\n  @case ('right') {\n    @if (activityLayout.toolbars.rightTop.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.rightTop\" data-docking-area=\"right-top\"/>\n    }\n\n    @if (activityLayout.toolbars.rightTop.activities.length && activityLayout.toolbars.rightBottom.activities.length) {\n      <hr>\n    }\n\n    @if (activityLayout.toolbars.rightBottom.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.rightBottom\" data-docking-area=\"right-bottom\"/>\n    }\n    <div class=\"filler\"></div>\n    @if (activityLayout.toolbars.bottomRight.activities.length) {\n      <wb-activity-stack [stack]=\"activityLayout.toolbars.bottomRight\" data-docking-area=\"bottom-right\"/>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--sci-workbench-activity-item-gap);-webkit-user-select:none;user-select:none;padding:var(--sci-workbench-activity-bar-padding);background-color:var(--sci-workbench-activity-bar-background-color)}:host[data-align=left]{border-right:1px solid var(--sci-color-border)}:host[data-align=right]{border-left:1px solid var(--sci-color-border)}:host>wb-activity-stack{display:flex;flex-direction:column;align-items:center}:host>hr{all:unset;height:1px;width:24px;align-self:center;background-color:var(--sci-color-border);border-radius:var(--sci-corner)}:host>div.filler{flex:auto}\n"], dependencies: [{ kind: "component", type: ActivityStackComponent, selector: "wb-activity-stack", inputs: ["stack"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivityBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivityBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-activity-bar', imports: [
                         ActivityStackComponent,
@@ -17861,15 +18134,15 @@ class ActivityPanelComponent {
     /**
      * Specifies the location of the panel.
      */
-    panel = input.required();
+    panel = input.required(...(ngDevMode ? [{ debugName: "panel" }] : []));
     /**
      * Specifies the first activity to display in the panel.
      */
-    activityId1 = input.required();
+    activityId1 = input.required(...(ngDevMode ? [{ debugName: "activityId1" }] : []));
     /**
      * Specifies the second activity to display in the panel.
      */
-    activityId2 = input.required();
+    activityId2 = input.required(...(ngDevMode ? [{ debugName: "activityId2" }] : []));
     _workbenchLayoutService = inject(WorkbenchLayoutService);
     _workbenchRouter = inject(ɵWorkbenchRouter);
     layout = this._workbenchLayoutService.layout;
@@ -17908,10 +18181,10 @@ class ActivityPanelComponent {
             };
         }, { equal: Objects$1.isEqual });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivityPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: ActivityPanelComponent, isStandalone: true, selector: "wb-activity-panel", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: true, transformFunction: null }, activityId1: { classPropertyName: "activityId1", publicName: "activityId1", isSignal: true, isRequired: true, transformFunction: null }, activityId2: { classPropertyName: "activityId2", publicName: "activityId2", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-panel": "panel()" } }, ngImport: i0, template: "@if (activityId1() && activityId2()) {\n  <sci-sashbox [direction]=\"direction()\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onSashEnd($event)\">\n    <ng-template sciSash [size]=\"sashSizes().sash1\" key=\"sash1\">\n      <ng-container *ngTemplateOutlet=\"activity_template; context: {$implicit: activityId1()}\"/>\n    </ng-template>\n\n    <ng-template sciSash [size]=\"sashSizes().sash2\" key=\"sash2\">\n      <ng-container *ngTemplateOutlet=\"activity_template; context: {$implicit: activityId2()}\"/>\n    </ng-template>\n  </sci-sashbox>\n} @else if (activityId1()) {\n  <ng-container *ngTemplateOutlet=\"activity_template; context: {$implicit: activityId1()}\"/>\n} @else if (activityId2()) {\n  <ng-container *ngTemplateOutlet=\"activity_template; context: {$implicit: activityId2()}\"/>\n}\n\n<ng-template #activity_template let-activityId>\n  <wb-grid [grid]=\"layout().grids[activityId]!\"\n           [attr.data-grid]=\"activityId\"\n           [gridDropZone]=\"{\n             dropRegionSize: .15,\n             dropPlaceholderSize: .15,\n             dropZoneAttributes: {'data-grid': activityId},\n           }\"/>\n</ng-template>\n", styles: [":host{display:grid}:host>sci-sashbox{z-index:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SciSashboxComponent, selector: "sci-sashbox", inputs: ["direction"], outputs: ["sashStart", "sashEnd"] }, { kind: "directive", type: SciSashDirective, selector: "ng-template[sciSash]", inputs: ["size", "minSize", "key", "animate"], exportAs: ["sciSash"] }, { kind: "component", type: GridComponent, selector: "wb-grid", inputs: ["grid", "gridDropZone"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivityPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ActivityPanelComponent, isStandalone: true, selector: "wb-activity-panel", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: true, transformFunction: null }, activityId1: { classPropertyName: "activityId1", publicName: "activityId1", isSignal: true, isRequired: true, transformFunction: null }, activityId2: { classPropertyName: "activityId2", publicName: "activityId2", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-panel": "panel()" } }, ngImport: i0, template: "@if (activityId1() && activityId2()) {\n  <sci-sashbox [direction]=\"direction()\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onSashEnd($event)\">\n    <ng-template sciSash [size]=\"sashSizes().sash1\" key=\"sash1\">\n      <ng-container *ngTemplateOutlet=\"activity_template; context: {$implicit: activityId1()}\"/>\n    </ng-template>\n\n    <ng-template sciSash [size]=\"sashSizes().sash2\" key=\"sash2\">\n      <ng-container *ngTemplateOutlet=\"activity_template; context: {$implicit: activityId2()}\"/>\n    </ng-template>\n  </sci-sashbox>\n} @else if (activityId1()) {\n  <ng-container *ngTemplateOutlet=\"activity_template; context: {$implicit: activityId1()}\"/>\n} @else if (activityId2()) {\n  <ng-container *ngTemplateOutlet=\"activity_template; context: {$implicit: activityId2()}\"/>\n}\n\n<ng-template #activity_template let-activityId>\n  <wb-grid [grid]=\"layout().grids[activityId]!\"\n           [attr.data-grid]=\"activityId\"\n           [gridDropZone]=\"{\n             dropRegionSize: .15,\n             dropPlaceholderSize: .15,\n             dropZoneAttributes: {'data-grid': activityId},\n           }\"/>\n</ng-template>\n", styles: [":host{display:grid}:host>sci-sashbox{z-index:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SciSashboxComponent, selector: "sci-sashbox", inputs: ["direction"], outputs: ["sashStart", "sashEnd"] }, { kind: "directive", type: SciSashDirective, selector: "ng-template[sciSash]", inputs: ["size", "minSize", "key", "animate"], exportAs: ["sciSash"] }, { kind: "component", type: GridComponent, selector: "wb-grid", inputs: ["grid", "gridDropZone"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ActivityPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ActivityPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-activity-panel', imports: [
                         NgTemplateOutlet,
@@ -17933,19 +18206,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * SPDX-License-Identifier: EPL-2.0
  */
 class LayoutComponent {
-    layout = input.required();
+    layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : []));
     _workbenchLayoutService = inject(WorkbenchLayoutService);
     _workbenchRouter = inject(ɵWorkbenchRouter);
     _workbenchId = inject(WORKBENCH_ID);
     _viewDragService = inject(ViewDragService);
-    _panels = computed(() => this.layout().activityLayout.panels);
+    _panels = computed(() => this.layout().activityLayout.panels, ...(ngDevMode ? [{ debugName: "_panels" }] : []));
     desktop = inject(WorkbenchDesktop);
-    toolbars = computed(() => this.layout().activityLayout.toolbars);
-    leftActivityPanel = computed(() => this.toolbars().leftTop.activeActivityId || this.toolbars().leftBottom.activeActivityId ? this._panels().left : null);
-    rightActivityPanel = computed(() => this.toolbars().rightTop.activeActivityId || this.toolbars().rightBottom.activeActivityId ? this._panels().right : null);
-    bottomActivityPanel = computed(() => this.toolbars().bottomLeft.activeActivityId || this.toolbars().bottomRight.activeActivityId ? this._panels().bottom : null);
-    leftActivityBarVisible = computed(() => this.toolbars().leftTop.activities.length || this.toolbars().leftBottom.activities.length || this.toolbars().bottomLeft.activities.length);
-    rightActivityBarVisible = computed(() => this.toolbars().rightTop.activities.length || this.toolbars().rightBottom.activities.length || this.toolbars().bottomRight.activities.length);
+    toolbars = computed(() => this.layout().activityLayout.toolbars, ...(ngDevMode ? [{ debugName: "toolbars" }] : []));
+    leftActivityPanel = computed(() => this.toolbars().leftTop.activeActivityId || this.toolbars().leftBottom.activeActivityId ? this._panels().left : null, ...(ngDevMode ? [{ debugName: "leftActivityPanel" }] : []));
+    rightActivityPanel = computed(() => this.toolbars().rightTop.activeActivityId || this.toolbars().rightBottom.activeActivityId ? this._panels().right : null, ...(ngDevMode ? [{ debugName: "rightActivityPanel" }] : []));
+    bottomActivityPanel = computed(() => this.toolbars().bottomLeft.activeActivityId || this.toolbars().bottomRight.activeActivityId ? this._panels().bottom : null, ...(ngDevMode ? [{ debugName: "bottomActivityPanel" }] : []));
+    leftActivityBarVisible = computed(() => this.toolbars().leftTop.activities.length || this.toolbars().leftBottom.activities.length || this.toolbars().bottomLeft.activities.length, ...(ngDevMode ? [{ debugName: "leftActivityBarVisible" }] : []));
+    rightActivityBarVisible = computed(() => this.toolbars().rightTop.activities.length || this.toolbars().rightBottom.activities.length || this.toolbars().bottomRight.activities.length, ...(ngDevMode ? [{ debugName: "rightActivityBarVisible" }] : []));
     panelAlignment = inject(WorkbenchService).settings.panelAlignment;
     panelAnimation = inject(WorkbenchService).settings.panelAnimation;
     perspectiveService = inject(WorkbenchPerspectiveService);
@@ -17960,7 +18233,7 @@ class LayoutComponent {
      */
     canDropInMainGrid = computed(() => {
         return !this.layout().hasActivities() || this.layout().parts({ grid: 'main' }).some(part => part.id !== MAIN_AREA);
-    });
+    }, ...(ngDevMode ? [{ debugName: "canDropInMainGrid" }] : []));
     onSashStart() {
         this._workbenchLayoutService.signalResizing(true);
     }
@@ -17992,10 +18265,10 @@ class LayoutComponent {
             dragData: event.dragData,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LayoutComponent, isStandalone: true, selector: "wb-layout", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "@.disabled": "perspectiveService.switchingPerspective() || perspectiveService.resettingPerspective()" } }, ngImport: i0, template: "<!-- Left Activity Bar -->\n@if (leftActivityBarVisible()) {\n  <wb-activity-bar [align]=\"'left'\"/>\n}\n\n<main>\n  @switch (panelAlignment()) {\n    @case ('left') {\n      <ng-container *ngTemplateOutlet=\"layout_align_left\"/>\n    }\n    @case ('right') {\n      <ng-container *ngTemplateOutlet=\"layout_align_right\"/>\n    }\n    @case ('center') {\n      <ng-container *ngTemplateOutlet=\"layout_center\"/>\n    }\n    @case ('justify') {\n      <ng-container *ngTemplateOutlet=\"layout_justify\"/>\n    }\n  }\n</main>\n\n<!-- Right Activity Bar -->\n@if (rightActivityBarVisible()) {\n  <wb-activity-bar [align]=\"'right'\"/>\n}\n\n<!-- Layout with bottom panel alignment left -->\n<ng-template #layout_align_left>\n  <!-- @formatter:off -->\n  <!-- +---+------------+---+ -->\n  <!-- | L |            | R | -->\n  <!-- | E |    MAIN    | I | -->\n  <!-- | F |    GRID    | G | -->\n  <!-- | T |            | H | -->\n  <!-- +---+------------+ T | -->\n  <!-- |       BOTTOM   |   | -->\n  <!-- +----------------+---+ -->\n  <!-- @formatter:on -->\n  <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n    <ng-template sciSash>\n      <sci-sashbox [direction]=\"'column'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onVerticalSashEnd($event)\">\n        <ng-template sciSash>\n          <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n            <!-- Left Activity Panel -->\n            @if (leftActivityPanel(); as panel) {\n              <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"left\" [animate]=\"panelAnimation()\">\n                <wb-activity-panel [panel]=\"'left'\" [activityId1]=\"toolbars().leftTop.activeActivityId\" [activityId2]=\"toolbars().leftBottom.activeActivityId\"/>\n              </ng-template>\n            }\n            <!-- Main Grid -->\n            <ng-template sciSash>\n              <ng-container *ngTemplateOutlet=\"main_grid\"/>\n            </ng-template>\n          </sci-sashbox>\n        </ng-template>\n        <!-- Bottom Activity Panel -->\n        @if (bottomActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.height}px`\" key=\"bottom\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'bottom'\" [activityId1]=\"toolbars().bottomLeft.activeActivityId\" [activityId2]=\"toolbars().bottomRight.activeActivityId\"/>\n          </ng-template>\n        }\n      </sci-sashbox>\n    </ng-template>\n    <!-- Right Activity Panel -->\n    @if (rightActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"right\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'right'\" [activityId1]=\"toolbars().rightTop.activeActivityId\" [activityId2]=\"toolbars().rightBottom.activeActivityId\"/>\n      </ng-template>\n    }\n  </sci-sashbox>\n</ng-template>\n\n<!-- Layout with bottom panel alignment right -->\n<ng-template #layout_align_right>\n  <!-- @formatter:off -->\n  <!-- +---+------------+---+ -->\n  <!-- | L |            | R | -->\n  <!-- | E |    MAIN    | I | -->\n  <!-- | F |    GRID    | G | -->\n  <!-- | T |            | H | -->\n  <!-- |   |            | T | -->\n  <!-- |   +------------+---| -->\n  <!-- |   |    BOTTOM      | -->\n  <!-- +---+----------------+ -->\n  <!-- @formatter:on -->\n  <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n    <!-- Left Activity Panel -->\n    @if (leftActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"left\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'left'\" [activityId1]=\"toolbars().leftTop.activeActivityId\" [activityId2]=\"toolbars().leftBottom.activeActivityId\"/>\n      </ng-template>\n    }\n    <ng-template sciSash>\n      <sci-sashbox [direction]=\"'column'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onVerticalSashEnd($event)\">\n        <ng-template sciSash>\n          <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n            <!-- Main Grid -->\n            <ng-template sciSash>\n              <ng-container *ngTemplateOutlet=\"main_grid\"/>\n            </ng-template>\n            <!-- Right Activity Panel -->\n            @if (rightActivityPanel(); as panel) {\n              <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"right\" [animate]=\"panelAnimation()\">\n                <wb-activity-panel [panel]=\"'right'\" [activityId1]=\"toolbars().rightTop.activeActivityId\" [activityId2]=\"toolbars().rightBottom.activeActivityId\"/>\n              </ng-template>\n            }\n          </sci-sashbox>\n        </ng-template>\n        <!-- Bottom Activity Panel -->\n        @if (bottomActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.height}px`\" key=\"bottom\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'bottom'\" [activityId1]=\"toolbars().bottomLeft.activeActivityId\" [activityId2]=\"toolbars().bottomRight.activeActivityId\"/>\n          </ng-template>\n        }\n      </sci-sashbox>\n    </ng-template>\n  </sci-sashbox>\n</ng-template>\n\n<!-- Layout with bottom panel alignment center -->\n<ng-template #layout_center>\n  <!-- @formatter:off -->\n  <!-- +---+------------+---+ -->\n  <!-- | L |    MAIN    | R | -->\n  <!-- | E |    GRID    | I | -->\n  <!-- | F |            | G | -->\n  <!-- | T +------------+ H | -->\n  <!-- |   |   BOTTOM   | T | -->\n  <!-- +---+------------+---+ -->\n  <!-- @formatter:on -->\n  <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n    <!-- Left Activity Panel -->\n    @if (leftActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"left\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'left'\" [activityId1]=\"toolbars().leftTop.activeActivityId\" [activityId2]=\"toolbars().leftBottom.activeActivityId\"/>\n      </ng-template>\n    }\n    <ng-template sciSash>\n      <sci-sashbox [direction]=\"'column'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onVerticalSashEnd($event)\">\n        <!-- Main Grid -->\n        <ng-template sciSash>\n          <ng-container *ngTemplateOutlet=\"main_grid\"/>\n        </ng-template>\n        <!-- Bottom Activity Panel -->\n        @if (bottomActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.height}px`\" key=\"bottom\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'bottom'\" [activityId1]=\"toolbars().bottomLeft.activeActivityId\" [activityId2]=\"toolbars().bottomRight.activeActivityId\"/>\n          </ng-template>\n        }\n      </sci-sashbox>\n    </ng-template>\n    <!-- Right Activity Panel -->\n    @if (rightActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"right\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'right'\" [activityId1]=\"toolbars().rightTop.activeActivityId\" [activityId2]=\"toolbars().rightBottom.activeActivityId\"/>\n      </ng-template>\n    }\n  </sci-sashbox>\n</ng-template>\n\n<!-- Layout with bottom panel alignment justify -->\n<ng-template #layout_justify>\n  <!-- @formatter:off -->\n  <!-- +---+------------+---+ -->\n  <!-- | L |            | R | -->\n  <!-- | E |    MAIN    | I | -->\n  <!-- | F |    GRID    | G | -->\n  <!-- | T |            | H | -->\n  <!-- |   |            | T | -->\n  <!-- +---+------------+---+ -->\n  <!-- |       BOTTOM       | -->\n  <!-- +--------------------+ -->\n  <!-- @formatter:on -->\n  <sci-sashbox [direction]=\"'column'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onVerticalSashEnd($event)\">\n    <ng-template sciSash>\n      <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n        <!-- Left Activity Panel -->\n        @if (leftActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"left\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'left'\" [activityId1]=\"toolbars().leftTop.activeActivityId\" [activityId2]=\"toolbars().leftBottom.activeActivityId\"/>\n          </ng-template>\n        }\n        <!-- Main Grid -->\n        <ng-template sciSash>\n          <ng-container *ngTemplateOutlet=\"main_grid\"/>\n        </ng-template>\n        <!-- Right Activity Panel -->\n        @if (rightActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"right\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'right'\" [activityId1]=\"toolbars().rightTop.activeActivityId\" [activityId2]=\"toolbars().rightBottom.activeActivityId\"/>\n          </ng-template>\n        }\n      </sci-sashbox>\n    </ng-template>\n    <!-- Bottom Activity Panel -->\n    @if (bottomActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.height}px`\" key=\"bottom\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'bottom'\" [activityId1]=\"toolbars().bottomLeft.activeActivityId\" [activityId2]=\"toolbars().bottomRight.activeActivityId\"/>\n      </ng-template>\n    }\n  </sci-sashbox>\n</ng-template>\n\n<!-- Main Grid -->\n<ng-template #main_grid>\n  @if (layout().grids.main.root.visible) {\n    <wb-grid [grid]=\"layout().grids.main\"\n             [gridDropZone]=\"canDropInMainGrid() && {\n               dropRegionSize: 50,\n               dropPlaceholderSize: 50,\n               dropZoneAttributes: {'data-grid': 'main'}\n             }\"\n             [attr.data-grid]=\"'main'\"/>\n  } @else {\n    <div wbViewDropZone\n         [wbViewDropZoneRegions]=\"canDrop() && {center: true, north: false, south: false, west: false, east: false}\"\n         [wbViewDropZoneAttributes]=\"{'data-desktop': ''}\"\n         (wbViewDropZoneDrop)=\"onDesktopViewDrop($event)\"\n         class=\"desktop\">\n      <ng-container *wbPortalOutlet=\"desktop.slot.portal; destroyOnDetach: false\"/>\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:flex;--sci-sashbox-gap: 0;--sci-sashbox-splitter-background-color: var(--sci-workbench-part-divider-color);--sci-sashbox-splitter-background-color-hover: var(--sci-workbench-part-divider-color-hover);--sci-sashbox-splitter-size: var(--sci-workbench-part-divider-size);--sci-sashbox-splitter-size-hover: var(--sci-workbench-part-divider-size-hover);--sci-sashbox-splitter-touch-target-size: var(--sci-workbench-part-divider-touch-target-size);--sci-sashbox-splitter-border-radius: 0;--sci-sashbox-splitter-opacity-active: var(--sci-workbench-part-divider-opacity-active);--sci-sashbox-splitter-opacity-hover: var(--sci-workbench-part-divider-opacity-hover)}:host>wb-activity-bar{flex:none}:host>main{flex:auto;display:grid}:host>main div.desktop{display:grid;position:relative}:host>main sci-sashbox{z-index:auto}\n"], dependencies: [{ kind: "component", type: ActivityBarComponent, selector: "wb-activity-bar", inputs: ["align"] }, { kind: "directive", type: SciSashDirective, selector: "ng-template[sciSash]", inputs: ["size", "minSize", "key", "animate"], exportAs: ["sciSash"] }, { kind: "component", type: SciSashboxComponent, selector: "sci-sashbox", inputs: ["direction"], outputs: ["sashStart", "sashEnd"] }, { kind: "component", type: ActivityPanelComponent, selector: "wb-activity-panel", inputs: ["panel", "activityId1", "activityId2"] }, { kind: "component", type: GridComponent, selector: "wb-grid", inputs: ["grid", "gridDropZone"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneAttributes", "wbViewDropZoneRegionSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet", "wbPortalOutletDestroyOnDetach"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: LayoutComponent, isStandalone: true, selector: "wb-layout", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "@.disabled": "perspectiveService.switchingPerspective() || perspectiveService.resettingPerspective()" } }, ngImport: i0, template: "<!-- Left Activity Bar -->\n@if (leftActivityBarVisible()) {\n  <wb-activity-bar [align]=\"'left'\"/>\n}\n\n<main>\n  @switch (panelAlignment()) {\n    @case ('left') {\n      <ng-container *ngTemplateOutlet=\"layout_align_left\"/>\n    }\n    @case ('right') {\n      <ng-container *ngTemplateOutlet=\"layout_align_right\"/>\n    }\n    @case ('center') {\n      <ng-container *ngTemplateOutlet=\"layout_center\"/>\n    }\n    @case ('justify') {\n      <ng-container *ngTemplateOutlet=\"layout_justify\"/>\n    }\n  }\n</main>\n\n<!-- Right Activity Bar -->\n@if (rightActivityBarVisible()) {\n  <wb-activity-bar [align]=\"'right'\"/>\n}\n\n<!-- Layout with bottom panel alignment left -->\n<ng-template #layout_align_left>\n  <!-- @formatter:off -->\n  <!-- +---+------------+---+ -->\n  <!-- | L |            | R | -->\n  <!-- | E |    MAIN    | I | -->\n  <!-- | F |    GRID    | G | -->\n  <!-- | T |            | H | -->\n  <!-- +---+------------+ T | -->\n  <!-- |       BOTTOM   |   | -->\n  <!-- +----------------+---+ -->\n  <!-- @formatter:on -->\n  <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n    <ng-template sciSash>\n      <sci-sashbox [direction]=\"'column'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onVerticalSashEnd($event)\">\n        <ng-template sciSash>\n          <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n            <!-- Left Activity Panel -->\n            @if (leftActivityPanel(); as panel) {\n              <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"left\" [animate]=\"panelAnimation()\">\n                <wb-activity-panel [panel]=\"'left'\" [activityId1]=\"toolbars().leftTop.activeActivityId\" [activityId2]=\"toolbars().leftBottom.activeActivityId\"/>\n              </ng-template>\n            }\n            <!-- Main Grid -->\n            <ng-template sciSash>\n              <ng-container *ngTemplateOutlet=\"main_grid\"/>\n            </ng-template>\n          </sci-sashbox>\n        </ng-template>\n        <!-- Bottom Activity Panel -->\n        @if (bottomActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.height}px`\" key=\"bottom\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'bottom'\" [activityId1]=\"toolbars().bottomLeft.activeActivityId\" [activityId2]=\"toolbars().bottomRight.activeActivityId\"/>\n          </ng-template>\n        }\n      </sci-sashbox>\n    </ng-template>\n    <!-- Right Activity Panel -->\n    @if (rightActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"right\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'right'\" [activityId1]=\"toolbars().rightTop.activeActivityId\" [activityId2]=\"toolbars().rightBottom.activeActivityId\"/>\n      </ng-template>\n    }\n  </sci-sashbox>\n</ng-template>\n\n<!-- Layout with bottom panel alignment right -->\n<ng-template #layout_align_right>\n  <!-- @formatter:off -->\n  <!-- +---+------------+---+ -->\n  <!-- | L |            | R | -->\n  <!-- | E |    MAIN    | I | -->\n  <!-- | F |    GRID    | G | -->\n  <!-- | T |            | H | -->\n  <!-- |   |            | T | -->\n  <!-- |   +------------+---| -->\n  <!-- |   |    BOTTOM      | -->\n  <!-- +---+----------------+ -->\n  <!-- @formatter:on -->\n  <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n    <!-- Left Activity Panel -->\n    @if (leftActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"left\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'left'\" [activityId1]=\"toolbars().leftTop.activeActivityId\" [activityId2]=\"toolbars().leftBottom.activeActivityId\"/>\n      </ng-template>\n    }\n    <ng-template sciSash>\n      <sci-sashbox [direction]=\"'column'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onVerticalSashEnd($event)\">\n        <ng-template sciSash>\n          <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n            <!-- Main Grid -->\n            <ng-template sciSash>\n              <ng-container *ngTemplateOutlet=\"main_grid\"/>\n            </ng-template>\n            <!-- Right Activity Panel -->\n            @if (rightActivityPanel(); as panel) {\n              <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"right\" [animate]=\"panelAnimation()\">\n                <wb-activity-panel [panel]=\"'right'\" [activityId1]=\"toolbars().rightTop.activeActivityId\" [activityId2]=\"toolbars().rightBottom.activeActivityId\"/>\n              </ng-template>\n            }\n          </sci-sashbox>\n        </ng-template>\n        <!-- Bottom Activity Panel -->\n        @if (bottomActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.height}px`\" key=\"bottom\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'bottom'\" [activityId1]=\"toolbars().bottomLeft.activeActivityId\" [activityId2]=\"toolbars().bottomRight.activeActivityId\"/>\n          </ng-template>\n        }\n      </sci-sashbox>\n    </ng-template>\n  </sci-sashbox>\n</ng-template>\n\n<!-- Layout with bottom panel alignment center -->\n<ng-template #layout_center>\n  <!-- @formatter:off -->\n  <!-- +---+------------+---+ -->\n  <!-- | L |    MAIN    | R | -->\n  <!-- | E |    GRID    | I | -->\n  <!-- | F |            | G | -->\n  <!-- | T +------------+ H | -->\n  <!-- |   |   BOTTOM   | T | -->\n  <!-- +---+------------+---+ -->\n  <!-- @formatter:on -->\n  <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n    <!-- Left Activity Panel -->\n    @if (leftActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"left\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'left'\" [activityId1]=\"toolbars().leftTop.activeActivityId\" [activityId2]=\"toolbars().leftBottom.activeActivityId\"/>\n      </ng-template>\n    }\n    <ng-template sciSash>\n      <sci-sashbox [direction]=\"'column'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onVerticalSashEnd($event)\">\n        <!-- Main Grid -->\n        <ng-template sciSash>\n          <ng-container *ngTemplateOutlet=\"main_grid\"/>\n        </ng-template>\n        <!-- Bottom Activity Panel -->\n        @if (bottomActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.height}px`\" key=\"bottom\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'bottom'\" [activityId1]=\"toolbars().bottomLeft.activeActivityId\" [activityId2]=\"toolbars().bottomRight.activeActivityId\"/>\n          </ng-template>\n        }\n      </sci-sashbox>\n    </ng-template>\n    <!-- Right Activity Panel -->\n    @if (rightActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"right\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'right'\" [activityId1]=\"toolbars().rightTop.activeActivityId\" [activityId2]=\"toolbars().rightBottom.activeActivityId\"/>\n      </ng-template>\n    }\n  </sci-sashbox>\n</ng-template>\n\n<!-- Layout with bottom panel alignment justify -->\n<ng-template #layout_justify>\n  <!-- @formatter:off -->\n  <!-- +---+------------+---+ -->\n  <!-- | L |            | R | -->\n  <!-- | E |    MAIN    | I | -->\n  <!-- | F |    GRID    | G | -->\n  <!-- | T |            | H | -->\n  <!-- |   |            | T | -->\n  <!-- +---+------------+---+ -->\n  <!-- |       BOTTOM       | -->\n  <!-- +--------------------+ -->\n  <!-- @formatter:on -->\n  <sci-sashbox [direction]=\"'column'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onVerticalSashEnd($event)\">\n    <ng-template sciSash>\n      <sci-sashbox [direction]=\"'row'\" (sashStart)=\"onSashStart()\" (sashEnd)=\"onHorizontalSashEnd($event)\">\n        <!-- Left Activity Panel -->\n        @if (leftActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"left\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'left'\" [activityId1]=\"toolbars().leftTop.activeActivityId\" [activityId2]=\"toolbars().leftBottom.activeActivityId\"/>\n          </ng-template>\n        }\n        <!-- Main Grid -->\n        <ng-template sciSash>\n          <ng-container *ngTemplateOutlet=\"main_grid\"/>\n        </ng-template>\n        <!-- Right Activity Panel -->\n        @if (rightActivityPanel(); as panel) {\n          <ng-template sciSash [size]=\"`${panel.width}px`\" key=\"right\" [animate]=\"panelAnimation()\">\n            <wb-activity-panel [panel]=\"'right'\" [activityId1]=\"toolbars().rightTop.activeActivityId\" [activityId2]=\"toolbars().rightBottom.activeActivityId\"/>\n          </ng-template>\n        }\n      </sci-sashbox>\n    </ng-template>\n    <!-- Bottom Activity Panel -->\n    @if (bottomActivityPanel(); as panel) {\n      <ng-template sciSash [size]=\"`${panel.height}px`\" key=\"bottom\" [animate]=\"panelAnimation()\">\n        <wb-activity-panel [panel]=\"'bottom'\" [activityId1]=\"toolbars().bottomLeft.activeActivityId\" [activityId2]=\"toolbars().bottomRight.activeActivityId\"/>\n      </ng-template>\n    }\n  </sci-sashbox>\n</ng-template>\n\n<!-- Main Grid -->\n<ng-template #main_grid>\n  @if (layout().grids.main.root.visible) {\n    <wb-grid [grid]=\"layout().grids.main\"\n             [gridDropZone]=\"canDropInMainGrid() && {\n               dropRegionSize: 50,\n               dropPlaceholderSize: 50,\n               dropZoneAttributes: {'data-grid': 'main'}\n             }\"\n             [attr.data-grid]=\"'main'\"/>\n  } @else {\n    <div wbViewDropZone\n         [wbViewDropZoneRegions]=\"canDrop() && {center: true, north: false, south: false, west: false, east: false}\"\n         [wbViewDropZoneAttributes]=\"{'data-desktop': ''}\"\n         (wbViewDropZoneDrop)=\"onDesktopViewDrop($event)\"\n         class=\"desktop\">\n      <ng-container *wbPortalOutlet=\"desktop.slot.portal; destroyOnDetach: false\"/>\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:flex;--sci-sashbox-gap: 0;--sci-sashbox-splitter-background-color: var(--sci-workbench-part-divider-color);--sci-sashbox-splitter-background-color-hover: var(--sci-workbench-part-divider-color-hover);--sci-sashbox-splitter-size: var(--sci-workbench-part-divider-size);--sci-sashbox-splitter-size-hover: var(--sci-workbench-part-divider-size-hover);--sci-sashbox-splitter-touch-target-size: var(--sci-workbench-part-divider-touch-target-size);--sci-sashbox-splitter-border-radius: 0;--sci-sashbox-splitter-opacity-active: var(--sci-workbench-part-divider-opacity-active);--sci-sashbox-splitter-opacity-hover: var(--sci-workbench-part-divider-opacity-hover)}:host>wb-activity-bar{flex:none}:host>main{flex:auto;display:grid}:host>main div.desktop{display:grid;position:relative}:host>main sci-sashbox{z-index:auto}\n"], dependencies: [{ kind: "component", type: ActivityBarComponent, selector: "wb-activity-bar", inputs: ["align"] }, { kind: "directive", type: SciSashDirective, selector: "ng-template[sciSash]", inputs: ["size", "minSize", "key", "animate"], exportAs: ["sciSash"] }, { kind: "component", type: SciSashboxComponent, selector: "sci-sashbox", inputs: ["direction"], outputs: ["sashStart", "sashEnd"] }, { kind: "component", type: ActivityPanelComponent, selector: "wb-activity-panel", inputs: ["panel", "activityId1", "activityId2"] }, { kind: "component", type: GridComponent, selector: "wb-grid", inputs: ["grid", "gridDropZone"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ViewDropZoneDirective, selector: "[wbViewDropZone]", inputs: ["wbViewDropZoneRegions", "wbViewDropZoneAttributes", "wbViewDropZoneRegionSize", "wbViewDropZonePlaceholderSize"], outputs: ["wbViewDropZoneDrop"] }, { kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet", "wbPortalOutletDestroyOnDetach"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-layout', imports: [
                         ActivityBarComponent,
@@ -18027,8 +18300,8 @@ class WorkbenchComponent {
     _workbenchLauncher = inject(WorkbenchLauncher);
     _logger = inject(Logger);
     _workbenchRouter = inject(ɵWorkbenchRouter);
-    _iframeOverlayHost = viewChild('iframe_overlay_host', { read: ViewContainerRef });
-    _viewDropZoneOverlayHost = viewChild('view_drop_zone_overlay_host', { read: ViewContainerRef });
+    _iframeOverlayHost = viewChild('iframe_overlay_host', ...(ngDevMode ? [{ debugName: "_iframeOverlayHost", read: ViewContainerRef }] : [{ read: ViewContainerRef }]));
+    _viewDropZoneOverlayHost = viewChild('view_drop_zone_overlay_host', ...(ngDevMode ? [{ debugName: "_viewDropZoneOverlayHost", read: ViewContainerRef }] : [{ read: ViewContainerRef }]));
     /** Splash to display during workbench startup. */
     splash = inject(WorkbenchConfig).splashComponent ?? inject(WorkbenchConfig).startup?.splash ?? SplashComponent;
     workbenchStartup = inject(WorkbenchStartup);
@@ -18105,12 +18378,12 @@ class WorkbenchComponent {
         }
         throw Error(`[WorkbenchError] Circular loading of the workbench component detected in workbench outlet '${outlet}'. Did you forget to add the CanMatch guard 'canMatchWorkbenchOutlet(false)' to the application's empty-path default route?`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: WorkbenchComponent, isStandalone: true, selector: "wb-workbench", viewQueries: [{ propertyName: "_iframeOverlayHost", first: true, predicate: ["iframe_overlay_host"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_viewDropZoneOverlayHost", first: true, predicate: ["view_drop_zone_overlay_host"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (workbenchStartup.done()) {\n  <div class=\"stacking-context-barrier\" wbGlassPane>\n    <wb-layout [layout]=\"workbenchService.layout()\"/>\n\n    <!-- Achor to attach iframes of embedded microfrontends -->\n    <ng-container #iframe_overlay_host/>\n  </div>\n\n  <!-- Anchor to attach the visual placeholder when dragging a view over a valid drop zone -->\n  <div #view_drop_zone_overlay_host class=\"view-drop-zone-overlay-host\"></div>\n\n  <!-- Notifications -->\n  <wb-notification-list/>\n} @else {\n  <ng-container *ngComponentOutlet=\"splash\"/>\n}\n", styles: [":host{display:grid;overflow:hidden;color:var(--sci-color-text);background-color:var(--sci-color-background-primary)}:where(:host){position:relative}:host>div.stacking-context-barrier{display:flex;isolation:isolate}:host>div.stacking-context-barrier>wb-layout{flex:auto}:host>div.view-drop-zone-overlay-host{position:absolute}:host>wb-notification-list{position:absolute;inset:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: NotificationListComponent, selector: "wb-notification-list" }, { kind: "directive", type: GlassPaneDirective, selector: "[wbGlassPane]" }, { kind: "component", type: LayoutComponent, selector: "wb-layout", inputs: ["layout"] }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: WorkbenchComponent, isStandalone: true, selector: "wb-workbench", viewQueries: [{ propertyName: "_iframeOverlayHost", first: true, predicate: ["iframe_overlay_host"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_viewDropZoneOverlayHost", first: true, predicate: ["view_drop_zone_overlay_host"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (workbenchStartup.done()) {\n  <div class=\"stacking-context-barrier\" wbGlassPane>\n    <wb-layout [layout]=\"workbenchService.layout()\"/>\n\n    <!-- Achor to attach iframes of embedded microfrontends -->\n    <ng-container #iframe_overlay_host/>\n  </div>\n\n  <!-- Anchor to attach the visual placeholder when dragging a view over a valid drop zone -->\n  <div #view_drop_zone_overlay_host class=\"view-drop-zone-overlay-host\"></div>\n\n  <!-- Notifications -->\n  <wb-notification-list/>\n} @else {\n  <ng-container *ngComponentOutlet=\"splash\"/>\n}\n", styles: [":host{display:grid;overflow:hidden;color:var(--sci-color-text);background-color:var(--sci-color-background-primary)}:where(:host){position:relative}:host>div.stacking-context-barrier{display:flex;isolation:isolate}:host>div.stacking-context-barrier>wb-layout{flex:auto}:host>div.view-drop-zone-overlay-host{position:absolute}:host>wb-notification-list{position:absolute;inset:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: NotificationListComponent, selector: "wb-notification-list" }, { kind: "directive", type: GlassPaneDirective, selector: "[wbGlassPane]" }, { kind: "component", type: LayoutComponent, selector: "wb-layout", inputs: ["layout"] }], viewProviders: [
             configureWorkbenchGlassPane(),
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-workbench', imports: [
                         NgComponentOutlet,
@@ -18163,10 +18436,10 @@ function configureWorkbenchGlassPane() {
  * Factory for creating a {@link WorkbenchLayout}.
  */
 class WorkbenchLayoutFactory {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutFactory, providedIn: 'root', useExisting: ɵWorkbenchLayoutFactory });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutFactory, providedIn: 'root', useExisting: ɵWorkbenchLayoutFactory });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchLayoutFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchLayoutFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useExisting: ɵWorkbenchLayoutFactory }]
         }] });
@@ -18234,10 +18507,10 @@ class WorkbenchDesktopDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDesktopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: WorkbenchDesktopDirective, isStandalone: true, selector: "ng-template[wbDesktop]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDesktopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: WorkbenchDesktopDirective, isStandalone: true, selector: "ng-template[wbDesktop]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDesktopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDesktopDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[wbDesktop]' }]
         }], ctorParameters: () => [] });
@@ -18313,15 +18586,15 @@ class WorkbenchViewMenuItemDirective {
      *
      * Supported modifiers are 'ctrl', 'shift', 'alt' and 'meta'.
      */
-    accelerator = input();
+    accelerator = input(...(ngDevMode ? [undefined, { debugName: "accelerator" }] : []));
     /**
      * Enables grouping of menu items.
      */
-    group = input();
+    group = input(...(ngDevMode ? [undefined, { debugName: "group" }] : []));
     /**
      * Controls if the menu item is disabled. Defaults to `false`.
      */
-    disabled = input();
+    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
     /**
      * Predicate to match a specific context, such as a particular view or condition. Defaults to any context.
      *
@@ -18330,11 +18603,11 @@ class WorkbenchViewMenuItemDirective {
      * - Runs in a reactive context and is called again when tracked signals change.
      *   Use Angular's `untracked` function to execute code outside this reactive context.
      */
-    canMatch = input();
+    canMatch = input(...(ngDevMode ? [undefined, { debugName: "canMatch" }] : []));
     /**
      * Specifies CSS class(es) to add to the menu item, e.g., to locate the menu item in tests.
      */
-    cssClass = input();
+    cssClass = input(...(ngDevMode ? [undefined, { debugName: "cssClass" }] : []));
     /**
      * Emits when the menu item is clicked.
      */
@@ -18366,10 +18639,10 @@ class WorkbenchViewMenuItemDirective {
         });
         inject(DestroyRef).onDestroy(() => action.dispose());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchViewMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: WorkbenchViewMenuItemDirective, isStandalone: true, selector: "ng-template[wbViewMenuItem]", inputs: { accelerator: { classPropertyName: "accelerator", publicName: "accelerator", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, canMatch: { classPropertyName: "canMatch", publicName: "canMatch", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchViewMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: WorkbenchViewMenuItemDirective, isStandalone: true, selector: "ng-template[wbViewMenuItem]", inputs: { accelerator: { classPropertyName: "accelerator", publicName: "accelerator", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, canMatch: { classPropertyName: "canMatch", publicName: "canMatch", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchViewMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchViewMenuItemDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[wbViewMenuItem]' }]
         }], ctorParameters: () => [] });
@@ -18424,7 +18697,7 @@ class WorkbenchPartActionDirective {
     /**
      * Specifies where to place this action in the part bar. Defaults to `end`.
      */
-    align = input();
+    align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : []));
     /**
      * Predicate to match a specific context, such as a particular part or condition. Defaults to any context.
      *
@@ -18433,11 +18706,11 @@ class WorkbenchPartActionDirective {
      * - Runs in a reactive context and is called again when tracked signals change.
      *   Use Angular's `untracked` function to execute code outside this reactive context.
      */
-    canMatch = input();
+    canMatch = input(...(ngDevMode ? [undefined, { debugName: "canMatch" }] : []));
     /**
      * Specifies CSS class(es) to add to the action, e.g., to locate the action in tests.
      */
-    cssClass = input();
+    cssClass = input(...(ngDevMode ? [undefined, { debugName: "cssClass" }] : []));
     constructor() {
         this.registerPartAction();
     }
@@ -18469,10 +18742,10 @@ class WorkbenchPartActionDirective {
         });
         inject(DestroyRef).onDestroy(() => action.dispose());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchPartActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: WorkbenchPartActionDirective, isStandalone: true, selector: "ng-template[wbPartAction]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, canMatch: { classPropertyName: "canMatch", publicName: "canMatch", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchPartActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: WorkbenchPartActionDirective, isStandalone: true, selector: "ng-template[wbPartAction]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, canMatch: { classPropertyName: "canMatch", publicName: "canMatch", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchPartActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchPartActionDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[wbPartAction]' }]
         }], ctorParameters: () => [] });
@@ -18530,8 +18803,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
  * ```
  */
 class WorkbenchRouterLinkDirective {
-    commands = input.required({ alias: 'wbRouterLink', transform: (commands) => Arrays.coerce(commands) });
-    extras = input({}, { alias: 'wbRouterLinkExtras', transform: (extras) => extras ?? {} });
+    commands = input.required(...(ngDevMode ? [{ debugName: "commands", alias: 'wbRouterLink', transform: (commands) => Arrays.coerce(commands) }] : [{ alias: 'wbRouterLink', transform: (commands) => Arrays.coerce(commands) }]));
+    extras = input({}, ...(ngDevMode ? [{ debugName: "extras", alias: 'wbRouterLinkExtras', transform: (extras) => extras ?? {} }] : [{ alias: 'wbRouterLinkExtras', transform: (extras) => extras ?? {} }]));
     _workbenchRouter = inject(WorkbenchRouter);
     _router = inject(Router);
     _route = inject(ActivatedRoute);
@@ -18578,10 +18851,10 @@ class WorkbenchRouterLinkDirective {
             .pipe(combineLatestWith(extras$, navigationEnd$), switchMap$1(([commands, extras]) => workbenchRouter.createUrlTree(createNavigationFromCommands(commands, extras), extras)), map(urlTree => urlTree && locationStrategy.prepareExternalUrl(this._router.serializeUrl(urlTree))));
         return toSignal(href$, { initialValue: null });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchRouterLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: WorkbenchRouterLinkDirective, isStandalone: true, selector: "[wbRouterLink]", inputs: { commands: { classPropertyName: "commands", publicName: "wbRouterLink", isSignal: true, isRequired: true, transformFunction: null }, extras: { classPropertyName: "extras", publicName: "wbRouterLinkExtras", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event.button,$event.ctrlKey,$event.metaKey)" }, properties: { "attr.href": "href()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchRouterLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: WorkbenchRouterLinkDirective, isStandalone: true, selector: "[wbRouterLink]", inputs: { commands: { classPropertyName: "commands", publicName: "wbRouterLink", isSignal: true, isRequired: true, transformFunction: null }, extras: { classPropertyName: "extras", publicName: "wbRouterLinkExtras", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event.button,$event.ctrlKey,$event.metaKey)" }, properties: { "attr.href": "href()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchRouterLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchRouterLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wbRouterLink]',
@@ -18641,7 +18914,7 @@ class WorkbenchDialogActionDirective {
     /**
      * Specifies where to place this action in the dialog footer. Defaults to `end`.
      */
-    align = input('end');
+    align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : []));
     template = inject(TemplateRef);
     _action;
     constructor() {
@@ -18651,10 +18924,10 @@ class WorkbenchDialogActionDirective {
         // Defer disposing action to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
         inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._action?.dispose()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: WorkbenchDialogActionDirective, isStandalone: true, selector: "ng-template[wbDialogAction]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: WorkbenchDialogActionDirective, isStandalone: true, selector: "ng-template[wbDialogAction]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: WorkbenchDialogActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: WorkbenchDialogActionDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[wbDialogAction]' }]
         }], ctorParameters: () => [] });