@scion/workbench 21.0.0-beta.4 → 21.0.0-beta.6

package/fesm2022/scion-workbench.mjs

@@ -6395,7 +6395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  */
 function trackFocus(target, workbenchElement) {
     const focusMonitor = inject(ɵWorkbenchFocusMonitor);
-    const subscription = toObservable(focusMonitor.activeElement)
+    toObservable(focusMonitor.activeElement)
         .pipe(startWith(focusMonitor.activeElement()), // Immediately subscribe to `focusin` events, required when the DOM element is focused right after invocation.
     switchMap(activeWorkbenchElement => activeWorkbenchElement === workbenchElement ? EMPTY : merge(fromEvent(target, 'focusin', { once: true }), fromEvent(target, 'sci-microfrontend-focusin', { once: true }))), finalize(() => requestAnimationFrame(() => focusMonitor.unsetActiveElement(workbenchElement))), // Asynchronously unset the active workbench element to prevent a `null` focus during destruction until the next element gains focus.
     takeUntilDestroyed())
@@ -6404,7 +6404,6 @@ function trackFocus(target, workbenchElement) {
     });
     return {
         unsetActiveElement: () => focusMonitor.unsetActiveElement(workbenchElement),
-        destroy: () => subscription.unsubscribe(),
     };
 }
 class ɵWorkbenchFocusMonitor {
@@ -6426,7 +6425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * Copyright (c) 2018-2026 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -6854,7 +6853,7 @@ class WbComponentPortal {
             this.detach();
         }
         this._viewContainerRef.set(viewContainerRef);
-        this._componentRef.update(componentRef => componentRef ?? createPortalComponent(this._componentType, { providers: this._options?.providers, injector: viewContainerRef.injector }));
+        this._componentRef.update(componentRef => componentRef ?? createPortalComponent(this._componentType, { providers: this._options?.providers, injector: this._options?.injector ?? viewContainerRef.injector }));
         this._logger.debug(() => 'Attaching portal', LoggerNames.LIFECYCLE, this._options?.debugName ?? this._componentType.name);
         this._componentRef().changeDetectorRef.reattach();
         this._viewContainerRef().insert(this._componentRef().hostView);
@@ -8330,7 +8329,7 @@ class MainAreaPartComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainAreaPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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-slot\"/>\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-slot e2e-slot\">\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: "21.0.1", ngImport: i0, type: MainAreaPartComponent, decorators: [{
             type: Component,
@@ -8341,7 +8340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                     ], host: {
                         '[attr.data-grid]': 'dasherize(part.gridName())',
                         '[attr.data-active]': `part.active() ? '' : null`,
-                    }, 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"] }]
+                    }, 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-slot\"/>\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-slot e2e-slot\">\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"] }]
         }] });
 
 /*
@@ -9723,7 +9722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * Copyright (c) 2018-2026 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -9745,7 +9744,8 @@ class WorkbenchDialogComponent {
     headerHeight = signal(undefined, { ...(ngDevMode ? { debugName: "headerHeight" } : {}) });
     transformTranslateX = signal(0, { ...(ngDevMode ? { debugName: "transformTranslateX" } : {}) });
     transformTranslateY = signal(0, { ...(ngDevMode ? { debugName: "transformTranslateY" } : {}) });
-    dialogContent = viewChild.required(SciViewportComponent, { read: (ElementRef) });
+    slotAnchorName = this.dialog.id.replace('.', '_'); // Anchor must not contain a dot.
+    dialogSlotBounds = viewChild.required('slot_bounds', { read: (ElementRef) });
     constructor() {
         this.setDialogOffset();
         this.trackFocus();
@@ -9847,7 +9847,7 @@ class WorkbenchDialogComponent {
         this.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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()", "class": "dialog.cssClass()" } }, viewQueries: [{ propertyName: "_cdkTrapFocus", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }, { propertyName: "_dialogElement", first: true, predicate: ["dialog_element"], descendants: true, isSignal: true }, { propertyName: "dialogContent", first: true, predicate: SciViewportComponent, descendants: true, read: ElementRef, 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     (mousedown)=\"onDialogMouseDown()\"\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)}:host.justified{--\\275 dialog-padding: 0}:host{display:flex;flex-direction:column;align-items:center;position:relative}: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"], 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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()", "style.--\u0275slot-anchor": "`--${slotAnchorName}`", "class": "dialog.cssClass()" } }, viewQueries: [{ propertyName: "_cdkTrapFocus", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }, { propertyName: "_dialogElement", first: true, predicate: ["dialog_element"], descendants: true, isSignal: true }, { propertyName: "dialogSlotBounds", first: true, predicate: ["slot_bounds"], descendants: true, read: ElementRef, 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     (mousedown)=\"onDialogMouseDown()\"\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=\"e2e-dialog-slot\">\n      <ng-container *ngComponentOutlet=\"dialog.component; inputs: dialog.inputs\"/>\n    </sci-viewport>\n\n    <!-- Extra DIV to capture bounds available to slotted content, excluding viewport content padding. May differ from the actual content size if content overflows or does not fill the slot. -->\n    <div class=\"slot-bounds e2e-dialog-slot-bounds\" #slot_bounds></div>\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)}:host.justified{--\\275 dialog-padding: 0}:host{display:flex;flex-direction:column;align-items:center;position:relative}: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;anchor-name:var(--\\275slot-anchor)}:host>div.dialog>div.dialog-box>sci-viewport::part(content){padding-inline:var(--\\275 dialog-padding)}:host>div.dialog>div.dialog-box>div.slot-bounds{position:absolute;position-anchor:var(--\\275slot-anchor);inset:anchor(top) anchor(right) anchor(bottom) anchor(left);margin-inline:var(--\\275 dialog-padding);visibility:hidden}: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"], 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()),
@@ -9882,9 +9882,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         '[style.--ɵdialog-min-width]': 'dialog.size.minWidth() ?? \'100px\'',
                         '[style.--ɵdialog-width]': 'dialog.size.width()',
                         '[style.--ɵdialog-max-width]': 'dialog.size.maxWidth()',
+                        '[style.--ɵslot-anchor]': '`--${slotAnchorName}`',
                         '[class]': 'dialog.cssClass()',
-                    }, template: "<div class=\"dialog e2e-dialog\"\n     [class.blinking]=\"dialog.blinking$ | async\"\n     [tabindex]=\"-1\"\n     wbMovable [wbHandle]=\"header\" (wbMovableMove)=\"onMove($event)\"\n     (mousedown)=\"onDialogMouseDown()\"\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)}:host.justified{--\\275 dialog-padding: 0}:host{display:flex;flex-direction:column;align-items:center;position:relative}: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"] }]
-        }], ctorParameters: () => [], propDecorators: { _cdkTrapFocus: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }], _dialogElement: [{ type: i0.ViewChild, args: ['dialog_element', { isSignal: true }] }], dialogContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciViewportComponent), { ...{ read: (ElementRef) }, isSignal: true }] }], onEscape: [{
+                    }, template: "<div class=\"dialog e2e-dialog\"\n     [class.blinking]=\"dialog.blinking$ | async\"\n     [tabindex]=\"-1\"\n     wbMovable [wbHandle]=\"header\" (wbMovableMove)=\"onMove($event)\"\n     (mousedown)=\"onDialogMouseDown()\"\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=\"e2e-dialog-slot\">\n      <ng-container *ngComponentOutlet=\"dialog.component; inputs: dialog.inputs\"/>\n    </sci-viewport>\n\n    <!-- Extra DIV to capture bounds available to slotted content, excluding viewport content padding. May differ from the actual content size if content overflows or does not fill the slot. -->\n    <div class=\"slot-bounds e2e-dialog-slot-bounds\" #slot_bounds></div>\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)}:host.justified{--\\275 dialog-padding: 0}:host{display:flex;flex-direction:column;align-items:center;position:relative}: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;anchor-name:var(--\\275slot-anchor)}:host>div.dialog>div.dialog-box>sci-viewport::part(content){padding-inline:var(--\\275 dialog-padding)}:host>div.dialog>div.dialog-box>div.slot-bounds{position:absolute;position-anchor:var(--\\275slot-anchor);inset:anchor(top) anchor(right) anchor(bottom) anchor(left);margin-inline:var(--\\275 dialog-padding);visibility:hidden}: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"] }]
+        }], ctorParameters: () => [], propDecorators: { _cdkTrapFocus: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }], _dialogElement: [{ type: i0.ViewChild, args: ['dialog_element', { isSignal: true }] }], dialogSlotBounds: [{ type: i0.ViewChild, args: ['slot_bounds', { ...{ read: (ElementRef) }, isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
             }] } });
@@ -9916,7 +9917,7 @@ function configureDialogGlassPane() {
 }
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * Copyright (c) 2018-2026 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -9925,96 +9926,17 @@ function configureDialogGlassPane() {
  * SPDX-License-Identifier: EPL-2.0
  */
 /**
- * Enables the display of a component in a dialog.
- *
- * A dialog is a visual element for focused interaction with the user, such as prompting the user for input or confirming actions.
- * The user can move and resize a dialog.
- *
- * Displayed on top of other content, a modal dialog blocks interaction with other parts of the application.
- *
- * ## Modality
- * A dialog can be context-modal or application-modal. Context-modal blocks a specific part of the application, as specified by the context;
- * application-modal blocks the workbench or browser viewport, based on {@link WorkbenchConfig.dialog.modalityScope}.
- *
- * ## Context
- * A dialog can be bound to a context (e.g., part or view), defaulting to the calling context.
- * The dialog is displayed only if the context is visible and closes when the context is disposed.
- *
- * ## Positioning
- * A dialog is opened in the center of its context, if any, unless opened from the peripheral area.
- *
- * ## Stacking
- * Dialogs are stacked per modality, with only the topmost dialog in each stack being interactive.
- *
- * ## Dialog Component
- * The dialog component can inject the {@link WorkbenchDialog} handle to interact with the dialog, such as setting the title or closing the dialog.
- * Inputs passed to the dialog are available as input properties in the dialog component.
- *
- * ## Dialog Header
- * By default, the dialog displays the title and a close button in the header. Alternatively, the dialog supports the use of a custom header.
- * To provide a custom header, add an Angular template to the HTML of the dialog component and decorate it with the `wbDialogHeader` directive.
- *
- * ```html
- * <ng-template wbDialogHeader>
- *   <app-dialog-header/>
- * </ng-template>
- * ```
- *
- * ## Dialog Footer
- * A dialog has a default footer that displays actions defined in the HTML of the dialog component. An action is an Angular template decorated with
- * the `wbDialogAction` directive. Multiple actions are supported, rendered in modeling order, and can be left- or right-aligned.
- *
- * ```html
- * <!-- Checkbox -->
- * <ng-template wbDialogAction align="start">
- *   <label>
- *     <input type="checkbox"/>
- *     Do not ask me again
- *   </label>
- * </ng-template>
- *
- * <!-- OK Button -->
- * <ng-template wbDialogAction align="end">
- *   <button (click)="...">OK</button>
- * </ng-template>
- *
- * <!-- Cancel Button -->
- * <ng-template wbDialogAction align="end">
- *   <button (click)="...">Cancel</button>
- * </ng-template>
- * ```
- *
- * Alternatively, the dialog supports the use of a custom footer. To provide a custom footer, add an Angular template to the HTML of the dialog component and
- * decorate it with the `wbDialogFooter` directive.
- *
- * ```html
- * <ng-template wbDialogFooter>
- *   <app-dialog-footer/>
- * </ng-template>
- * ```
- *
- * ## Styling
- * The following CSS variables can be set to customize the default look of a dialog.
- *
- * - `--sci-workbench-dialog-padding`
- * - `--sci-workbench-dialog-header-height`
- * - `--sci-workbench-dialog-header-background-color`
- * - `--sci-workbench-dialog-title-font-family`
- * - `--sci-workbench-dialog-title-font-weight`
- * - `--sci-workbench-dialog-title-font-size`
- * - `--sci-workbench-dialog-title-align`
+ * Provides {@link WorkbenchDialogService} for dependency injection.
  */
-class WorkbenchDialogService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, providedIn: 'root', useExisting: ɵWorkbenchDialogService });
+function provideWorkbenchDialogService() {
+    return [
+        ɵWorkbenchDialogService,
+        { provide: WorkbenchDialogService, useExisting: ɵWorkbenchDialogService },
+    ];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root', useExisting: ɵWorkbenchDialogService }]
-        }] });
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * Copyright (c) 2018-2022 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -10022,95 +9944,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-class MessageBoxFooterComponent {
-    actions = input.required({ ...(ngDevMode ? { debugName: "actions" } : {}) });
-    severity = input.required({ ...(ngDevMode ? { debugName: "severity" } : {}) });
-    action = output();
-    preferredSizeChange = output();
-    _actionButtons = viewChildren('action_button', { ...(ngDevMode ? { debugName: "_actionButtons" } : {}) });
+/**
+ * Renders the content of a workbench popup.
+ */
+class WorkbenchPopupComponent {
+    _host = inject(ElementRef).nativeElement;
+    _cdkTrapFocus = viewChild.required('focus_trap', { read: CdkTrapFocus });
+    popup = inject(ɵWorkbenchPopup);
     constructor() {
-        void this.emitPreferredSize();
-    }
-    insertionSortOrderFn = () => 0;
-    onAction(key) {
-        this.action.emit(key);
-    }
-    onArrowKey(index, direction) {
-        const actionButtonCount = this._actionButtons().length;
-        const newIndex = (direction === 'left' ? index - 1 : index + 1);
-        this._actionButtons()[(newIndex + actionButtonCount) % actionButtonCount].nativeElement.focus();
+        trackFocus(this._host, this.popup);
+        this.focusInitialElement();
     }
-    async emitPreferredSize() {
-        const host = inject(ElementRef).nativeElement;
-        host.classList.add('calculating-min-width');
-        try {
-            // Wait for the CSS class to take effect, then wait an animation frame to avoid the error: "ResizeObserver loop completed with undelivered notifications".
-            await firstValueFrom(fromResize$(host).pipe(observeOn(animationFrameScheduler)));
-            this.preferredSizeChange.emit(host.offsetWidth);
-        }
-        finally {
-            host.classList.remove('calculating-min-width');
-        }
+    focusInitialElement() {
+        const effectRef = effect(() => {
+            // [Angular 14] The initial focus must not be requested via `cdkTrapFocusAutoCapture` as this would restore
+            // focus to the previously focused element when the `FocusTrap` is destroyed. This behavior is unwanted if the
+            // popup is closed by losing focus. Otherwise, the newly focused element that caused the loss of focus and thus
+            // the closing of the popup would immediately become unfocused again. This behavior could only be observed when
+            // 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: "21.0.1", ngImport: i0, type: MessageBoxFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: "21.0.1", ngImport: i0, type: WorkbenchPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: WorkbenchPopupComponent, 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()", "class": "popup.cssClass()" } }, 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 *ngComponentOutlet=\"popup.component; inputs: popup.inputs\"/>\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: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wb-message-box-footer', imports: [
-                        KeyValuePipe,
-                        TextPipe,
+            args: [{ selector: 'wb-popup', imports: [
+                        CdkTrapFocus,
+                        SciViewportComponent,
+                        NgComponentOutlet,
+                    ], hostDirectives: [
+                        GlassPaneDirective,
+                    ], providers: [
+                        configurePopupGlassPane(),
                     ], host: {
-                        '[attr.data-severity]': 'severity()',
-                    }, 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"] }]
-        }], ctorParameters: () => [], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: true }] }], action: [{ type: i0.Output, args: ["action"] }], preferredSizeChange: [{ type: i0.Output, args: ["preferredSizeChange"] }], _actionButtons: [{ type: i0.ViewChildren, args: ['action_button', { isSignal: true }] }] } });
+                        '[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()',
+                        '[class]': 'popup.cssClass()',
+                    }, template: "<sci-viewport cdkTrapFocus class=\"e2e-popup-viewport\" #focus_trap>\n  <ng-container *ngComponentOutlet=\"popup.component; inputs: popup.inputs\"/>\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"] }]
+        }], ctorParameters: () => [], propDecorators: { _cdkTrapFocus: [{ type: i0.ViewChild, args: ['focus_trap', { ...{ read: CdkTrapFocus }, isSignal: true }] }] } });
+/**
+ * Blocks this popup when dialog(s) overlay it.
+ */
+function configurePopupGlassPane() {
+    return [
+        {
+            provide: GLASS_PANE_BLOCKABLE,
+            useFactory: () => inject(ɵWorkbenchPopup),
+        },
+        {
+            provide: GLASS_PANE_OPTIONS,
+            useFactory: () => ({ attributes: { 'data-popupid': inject(ɵWorkbenchPopup).id } }),
+        },
+    ];
+}
 
-/*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+/**
+ * A popup is a visual workbench element for displaying content above other content. The popup is positioned relative
+ * to an anchor based on its preferred alignment. The anchor can be an element or a coordinate.
  *
- * 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/
+ * The popup component can inject this handle to interact with the popup.
  *
- * SPDX-License-Identifier: EPL-2.0
- */
-/**
- * Use this directive to replace the default dialog footer that renders actions contributed via the {@link WorkbenchDialogActionDirective} directive.
+ * Popup inputs are available as input properties in the popup component.
  *
- * The host element of this modeling directive must be a <ng-template>. The footer shares the lifecycle of the host element.
+ * @see WorkbenchPopupService
  *
- * **Example:**
- * ```html
- * <ng-template wbDialogFooter>
- *   <app-dialog-footer/>
- * </ng-template>
- * ```
+ * @deprecated since version 21.0.0-beta.1. Replaced by `WorkbenchPopup`. Marked for removal in version 22.
  */
-class WorkbenchDialogFooterDirective {
-    /**
-     * Specifies if to display a visual separator between the dialog content and this footer.
-     * Defaults to `true`.
-     */
-    divider = input(undefined, { ...(ngDevMode ? { debugName: "divider" } : {}), transform: booleanAttribute });
-    template = inject(TemplateRef);
-    _footer;
-    constructor() {
-        const dialog = inject(ɵWorkbenchDialog);
-        // Defer registering footer to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
-        asapScheduler.schedule(() => this._footer = dialog.registerFooter(this));
-        // Defer disposing footer to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
-        inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._footer?.dispose()));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: WorkbenchDialogFooterDirective, isStandalone: true, selector: "ng-template[wbDialogFooter]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+class Popup extends WorkbenchPopup {
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogFooterDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[wbDialogFooter]' }]
-        }], ctorParameters: () => [], propDecorators: { divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * 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
@@ -10119,90 +10033,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  * SPDX-License-Identifier: EPL-2.0
  */
 /**
- * Use this directive to replace the default dialog header that displays the title and a close button.
- *
- * The host element of this modeling directive must be a <ng-template>. The header shares the lifecycle of the host element.
- *
- * **Example:**
- * ```html
- * <ng-template wbDialogHeader>
- *   <app-dialog-header/>
- * </ng-template>
- * ```
- */
-class WorkbenchDialogHeaderDirective {
-    /**
-     * Specifies if to display a visual separator between this header and the dialog content.
-     * Defaults to `true`.
-     */
-    divider = input(undefined, { ...(ngDevMode ? { debugName: "divider" } : {}), transform: booleanAttribute });
-    template = inject(TemplateRef);
-    _header;
-    constructor() {
-        const dialog = inject(ɵWorkbenchDialog);
-        // Defer registering header to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
-        asapScheduler.schedule(() => this._header = dialog.registerHeader(this));
-        // Defer disposing header to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
-        inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._header?.dispose()));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", 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: "21.0.1", ngImport: i0, type: WorkbenchDialogHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[wbDialogHeader]' }]
-        }], ctorParameters: () => [], propDecorators: { divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
-
-/*
- * Copyright (c) 2018-2023 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
- */
-class MessageBoxHeaderComponent {
-    title = input(undefined, { ...(ngDevMode ? { debugName: "title" } : {}) });
-    severity = input.required({ ...(ngDevMode ? { debugName: "severity" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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{word-break: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: "21.0.1", ngImport: i0, type: MessageBoxHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wb-message-box-header', imports: [
-                        TextPipe,
-                    ], host: {
-                        '[attr.data-severity]': 'severity()',
-                    }, 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{word-break: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"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: true }] }] } });
-
-/*
- * Copyright (c) 2018-2024 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
+ * DI token to register providers available for DI if in the context of a workbench popup.
  */
+const WORKBENCH_POPUP_CONTEXT = new InjectionToken('WORKBENCH_POPUP_CONTEXT');
 /**
- * Tests if the object is of the specified type.
+ * Provides providers available for DI if in the context of a workbench popup.
  */
-class TypeofPipe {
-    transform(object, type) {
-        return typeof object === type;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, isStandalone: true, name: "wbTypeof" });
+function provideWorkbenchPopupContext() {
+    return {
+        provide: WORKBENCH_POPUP_CONTEXT,
+        useFactory: () => [
+            provideWorkbenchDialogService(),
+            provideWorkbenchMessageBoxService(),
+            provideWorkbenchPopupService(),
+        ],
+        multi: true,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'wbTypeof' }]
-        }] });
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * 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
@@ -10210,453 +10060,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-/**
- * Renders the workbench message box.
- *
- * This component is designed to be opened in a workbench dialog.
- */
-class WorkbenchMessageBoxComponent {
-    message = input.required({ ...(ngDevMode ? { debugName: "message" } : {}), transform: nullIfEmptyMessage });
-    options = input(undefined, { ...(ngDevMode ? { debugName: "options" } : {}) });
-    _dialog = inject(ɵWorkbenchDialog);
-    empty = signal(false, { ...(ngDevMode ? { debugName: "empty" } : {}) });
-    constructor() {
-        this._dialog.closable = false;
-        this._dialog.resizable = false;
-        this._dialog.padding = false;
-        // Limit the maximum messagebox width if text message to break the message.
-        effect(() => {
-            if (typeof this.message() === 'string' || this.message() === null) {
-                this._dialog.size.maxWidth = 'var(--sci-workbench-messagebox-max-width)';
+/** @inheritDoc */
+class ɵWorkbenchPopup {
+    id;
+    component;
+    invocationContext;
+    _options;
+    /** Injector for the popup; destroyed when the popup is closed. */
+    injector = inject(Injector);
+    _overlayRef;
+    _focusMonitor = inject(WorkbenchFocusMonitor);
+    _portal;
+    _componentRef = signal(undefined, { ...(ngDevMode ? { debugName: "_componentRef" } : {}) });
+    _popupOrigin;
+    _cssClass = signal([], { ...(ngDevMode ? { debugName: "_cssClass" } : {}) });
+    size;
+    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id, { ...(ngDevMode ? { debugName: "focused" } : {}) });
+    attached;
+    destroyed = signal(false, { ...(ngDevMode ? { debugName: "destroyed" } : {}) });
+    bounds = boundingClientRect(computed(() => this._componentRef()?.location.nativeElement));
+    blockedBy;
+    // TODO [Angular 22] Remove with Angular 22. Used for backward compatiblity.
+    input;
+    result;
+    constructor(id, component, invocationContext, _options) {
+        this.id = id;
+        this.component = component;
+        this.invocationContext = invocationContext;
+        this._options = _options;
+        this._portal = this.createPortal();
+        this.input = this._portal.injector?.get(LEGACY_POPUP_INPUT, undefined, { optional: true });
+        this._popupOrigin = this.trackPopupOrigin();
+        this._cssClass.set(Arrays.coerce(this._options.cssClass));
+        this.size = new ɵWorkbenchPopupSize(this._options);
+        this.blockedBy = inject(WorkbenchDialogRegistry).top(this.id);
+        this.attached = this.monitorHostElementAttached();
+        const positionStrategy = inject(Overlay).position()
+            .flexibleConnectedTo({ x: 0, y: 0 })
+            .withFlexibleDimensions(false)
+            .withLockedPosition(false) // If locked, the popup won't attempt to reposition itself if not enough space available.
+            .withPositions((() => {
+            switch (this._options.align ?? 'north') {
+                case 'north':
+                    return [NORTH, SOUTH, WEST, EAST];
+                case 'south':
+                    return [SOUTH, NORTH, WEST, EAST];
+                case 'west':
+                    return [WEST, EAST, NORTH, SOUTH];
+                case 'east':
+                    return [EAST, WEST, NORTH, SOUTH];
+                default:
+                    throw Error('[PopupPositionError] Illegal position; must be north, south, west or east');
             }
+        })());
+        this._overlayRef = this.createOverlay(positionStrategy);
+        const componentRef = this._overlayRef.attach(this._portal);
+        const popupElement = componentRef.location.nativeElement;
+        this._componentRef.set(componentRef);
+        // Make the popup focusable to request focus.
+        popupElement.setAttribute('tabindex', '-1');
+        this.stickToAnchor(positionStrategy);
+        this.repositionOnResize();
+        this.bindToHostElement(popupElement);
+        this.closeOnHostDestroy();
+        this.closeOnFocusLoss(popupElement);
+        this.closeOnEscape(popupElement);
+        inject(DestroyRef).onDestroy(() => this.destroyed.set(true));
+    }
+    /**
+     * Waits for the popup to close, resolving to its result or rejecting if closed with an error.
+     */
+    waitForClose() {
+        return new Promise((resolve, reject) => {
+            this.injector.get(DestroyRef).onDestroy(() => {
+                this.result instanceof Error ? reject(this.result) : resolve(this.result);
+            });
         });
     }
-    onAction(action) {
-        this._dialog.close(action);
+    /**
+     * Creates a portal to render {@link WorkbenchPopupComponent} in the popup's injection context.
+     */
+    createPortal() {
+        const injector = Injector.create({
+            parent: this._options.injector ?? inject(Injector),
+            providers: [
+                { provide: ɵWorkbenchPopup, useValue: this },
+                { provide: WorkbenchPopup, useExisting: ɵWorkbenchPopup },
+                { provide: Popup, useExisting: ɵWorkbenchPopup },
+                { provide: WORKBENCH_ELEMENT, useExisting: ɵWorkbenchPopup },
+                inject(WORKBENCH_POPUP_CONTEXT, { optional: true }) ?? [],
+                this._options.providers ?? [],
+            ],
+        });
+        inject(DestroyRef).onDestroy(() => injector.destroy());
+        return new ComponentPortal(WorkbenchPopupComponent, null, injector);
     }
-    onEscape() {
-        if ('cancel' in (this.options()?.actions ?? {})) {
-            this._dialog.close('cancel');
+    /**
+     * Creates a dedicated overlay per popup to place it on top of previously created overlays, such as dialogs, popups, dropdowns, etc.
+     */
+    createOverlay(positionStrategy) {
+        return inject(Overlay).create({
+            panelClass: 'wb-popup',
+            hasBackdrop: false,
+            positionStrategy: positionStrategy,
+            scrollStrategy: inject(Overlay).scrollStrategies.noop(),
+            disposeOnNavigation: true,
+        });
+    }
+    /**
+     * Moves the popup with the anchor.
+     */
+    stickToAnchor(positionStrategy) {
+        effect(() => {
+            const origin = this._popupOrigin();
+            untracked(() => {
+                if (origin) {
+                    positionStrategy.setOrigin(origin);
+                    this._overlayRef.updatePosition();
+                }
+            });
+        });
+    }
+    /**
+     * Monitors attachment of the host element.
+     */
+    monitorHostElementAttached() {
+        if (this.invocationContext) {
+            return this.invocationContext.attached;
         }
+        const workbenchComponentRef = inject(WORKBENCH_COMPONENT_REF);
+        return computed(() => !!workbenchComponentRef());
     }
-    onFooterPreferredSizeChange(preferredSize) {
-        this._dialog.size.minWidth = `${preferredSize}px`;
+    /**
+     * Repositions the popup position when resized.
+     */
+    repositionOnResize() {
+        const zone = inject(NgZone);
+        fromResize$(this._overlayRef.overlayElement)
+            .pipe(observeIn(fn => zone.run(fn)), takeUntilDestroyed())
+            .subscribe(() => {
+            this._overlayRef.updatePosition();
+        });
     }
-    onContentDimensionChange(dimension) {
-        this.empty.set(!dimension.offsetHeight);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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": "-1", "class.empty": "empty()", "class.content-selectable": "options()?.contentSelectable", "class.has-title": "!!this.options()?.title" } }, 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:grid;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{word-break: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"], 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: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wb-message-box', imports: [
-                        NgComponentOutlet,
-                        SciDimensionDirective,
-                        WorkbenchDialogHeaderDirective,
-                        WorkbenchDialogFooterDirective,
-                        MessageBoxHeaderComponent,
-                        MessageBoxFooterComponent,
-                        TypeofPipe,
-                        TextPipe,
-                    ], host: {
-                        // Ensure host element to be focusable in order to close the message box on Escape keystroke.
-                        '[attr.tabindex]': '-1',
-                        '[class.empty]': 'empty()',
-                        '[class.content-selectable]': 'options()?.contentSelectable',
-                        '[class.has-title]': '!!this.options()?.title',
-                        '(keydown.escape)': 'onEscape()',
-                    }, 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:grid;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{word-break:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
-function nullIfEmptyMessage(message) {
-    return message !== '' ? message : null;
-}
-
-/**
- * Provides a standardized dialog for presenting a message to the user, such as an info, warning or alert,
- * or for prompting the user for confirmation. The message can be plain text or a component, allowing for
- * structured content or input prompts.
- *
- * Displayed on top of other content, a modal message box blocks interaction with other parts of the application.
- *
- * ## Modality
- * A message box can be context-modal or application-modal. Context-modal blocks a specific part of the application, as specified by the context;
- * application-modal blocks the workbench or browser viewport, based on {@link WorkbenchConfig.dialog.modalityScope}.
- *
- * ## Context
- * A message box can be bound to a context (e.g., part or view), defaulting to the calling context.
- * The message box is displayed only if the context is visible and closes when the context is disposed.
- *
- * ## Positioning
- * A message box is opened in the center of its context, if any, unless opened from the peripheral area.
- *
- * ## Stacking
- * Message boxes are stacked per modality, with only the topmost message box in each stack being interactive.
- *
- * ## Styling
- * The following CSS variables can be set to customize the default look of a message box.
- *
- * - `--sci-workbench-messagebox-max-width`
- * - `--sci-workbench-messagebox-severity-indicator-size`
- * - `--sci-workbench-messagebox-padding`
- * - `--sci-workbench-messagebox-text-align`
- * - `--sci-workbench-messagebox-title-align`
- * - `--sci-workbench-messagebox-title-font-family`
- * - `--sci-workbench-messagebox-title-font-weight`
- * - `--sci-workbench-messagebox-title-font-size`
- */
-class WorkbenchMessageBoxService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService }]
-        }] });
-
-/*
- * Copyright (c) 2018-2023 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
- */
-/** @inheritDoc */
-class ɵWorkbenchMessageBoxService {
-    _workbenchDialogService = inject(WorkbenchDialogService);
-    _zone = inject(NgZone);
-    constructor() {
-        this.installServiceLifecycleLogger();
-    }
-    /**
-     * @inheritDoc
-     */
-    async open(message, options) {
-        assertNotInReactiveContext(this.open, 'Call WorkbenchMessageBoxService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
-        // Ensure to run in Angular zone to display the message box even if called from outside the Angular zone, e.g. from an error handler.
-        if (!NgZone.isInAngularZone()) {
-            return this._zone.run(() => this.open(message, options));
-        }
-        return (await this._workbenchDialogService.open(WorkbenchMessageBoxComponent, {
-            inputs: { message, options },
-            modality: options?.modality,
-            injector: options?.injector,
-            providers: options?.providers,
-            cssClass: options?.cssClass,
-            context: options?.context,
-            animate: true,
-        }));
-    }
-    installServiceLifecycleLogger() {
-        const logger = inject(Logger);
-        const workbenchElement = inject(WORKBENCH_ELEMENT, { optional: true });
-        logger.debug(() => `Constructing WorkbenchMessageBoxService [context=${workbenchElement?.id}]`, LoggerNames.LIFECYCLE);
-        inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying WorkbenchMessageBoxService [context=${workbenchElement?.id}]'`, LoggerNames.LIFECYCLE));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-/**
- * Provides {@link WorkbenchDialogService} for dependency injection.
- */
-function provideWorkbenchMessageBoxService() {
-    return [
-        ɵWorkbenchMessageBoxService,
-        { provide: WorkbenchMessageBoxService, useExisting: ɵWorkbenchMessageBoxService },
-    ];
-}
-
-/*
- * Copyright (c) 2018-2022 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
- */
-/**
- * Renders the content of a workbench popup.
- */
-class WorkbenchPopupComponent {
-    _host = inject(ElementRef).nativeElement;
-    _cdkTrapFocus = viewChild.required('focus_trap', { read: CdkTrapFocus });
-    popup = inject(ɵWorkbenchPopup);
-    constructor() {
-        trackFocus(this._host, this.popup);
-        this.focusInitialElement();
-    }
-    focusInitialElement() {
-        const effectRef = effect(() => {
-            // [Angular 14] The initial focus must not be requested via `cdkTrapFocusAutoCapture` as this would restore
-            // focus to the previously focused element when the `FocusTrap` is destroyed. This behavior is unwanted if the
-            // popup is closed by losing focus. Otherwise, the newly focused element that caused the loss of focus and thus
-            // the closing of the popup would immediately become unfocused again. This behavior could only be observed when
-            // 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: "21.0.1", ngImport: i0, type: WorkbenchPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: WorkbenchPopupComponent, 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()", "class": "popup.cssClass()" } }, 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 *ngComponentOutlet=\"popup.component; inputs: popup.inputs\"/>\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: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchPopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wb-popup', imports: [
-                        CdkTrapFocus,
-                        SciViewportComponent,
-                        NgComponentOutlet,
-                    ], hostDirectives: [
-                        GlassPaneDirective,
-                    ], providers: [
-                        configurePopupGlassPane(),
-                    ], host: {
-                        '[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()',
-                        '[class]': 'popup.cssClass()',
-                    }, template: "<sci-viewport cdkTrapFocus class=\"e2e-popup-viewport\" #focus_trap>\n  <ng-container *ngComponentOutlet=\"popup.component; inputs: popup.inputs\"/>\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"] }]
-        }], ctorParameters: () => [], propDecorators: { _cdkTrapFocus: [{ type: i0.ViewChild, args: ['focus_trap', { ...{ read: CdkTrapFocus }, isSignal: true }] }] } });
-/**
- * Blocks this popup when dialog(s) overlay it.
- */
-function configurePopupGlassPane() {
-    return [
-        {
-            provide: GLASS_PANE_BLOCKABLE,
-            useFactory: () => inject(ɵWorkbenchPopup),
-        },
-        {
-            provide: GLASS_PANE_OPTIONS,
-            useFactory: () => ({ attributes: { 'data-popupid': inject(ɵWorkbenchPopup).id } }),
-        },
-    ];
-}
-
-/**
- * A popup is a visual workbench element for displaying content above other content. The popup is positioned relative
- * to an anchor based on its preferred alignment. The anchor can be an element or a coordinate.
- *
- * The popup component can inject this handle to interact with the popup.
- *
- * Popup inputs are available as input properties in the popup component.
- *
- * @see WorkbenchPopupService
- *
- * @deprecated since version 21.0.0-beta.1. Replaced by `WorkbenchPopup`. Marked for removal in version 22.
- */
-class Popup extends WorkbenchPopup {
-}
-
-/*
- * 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
- */
-/**
- * DI token to register providers available for DI if in the context of a workbench popup.
- */
-const WORKBENCH_POPUP_CONTEXT = new InjectionToken('WORKBENCH_POPUP_CONTEXT');
-/**
- * Provides providers available for DI if in the context of a workbench popup.
- */
-function provideWorkbenchPopupContext() {
-    return {
-        provide: WORKBENCH_POPUP_CONTEXT,
-        useFactory: () => [
-            provideWorkbenchDialogService(),
-            provideWorkbenchMessageBoxService(),
-            provideWorkbenchPopupService(),
-        ],
-        multi: true,
-    };
-}
-
-/*
- * 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
- */
-/** @inheritDoc */
-class ɵWorkbenchPopup {
-    id;
-    component;
-    invocationContext;
-    _options;
-    /** Injector for the popup; destroyed when the popup is closed. */
-    injector = inject(Injector);
-    _overlayRef;
-    _focusMonitor = inject(WorkbenchFocusMonitor);
-    _portal;
-    _componentRef = signal(undefined, { ...(ngDevMode ? { debugName: "_componentRef" } : {}) });
-    _popupOrigin;
-    _cssClass = signal([], { ...(ngDevMode ? { debugName: "_cssClass" } : {}) });
-    size;
-    focused = computed(() => this._focusMonitor.activeElement()?.id === this.id, { ...(ngDevMode ? { debugName: "focused" } : {}) });
-    attached;
-    destroyed = signal(false, { ...(ngDevMode ? { debugName: "destroyed" } : {}) });
-    bounds = boundingClientRect(computed(() => this._componentRef()?.location.nativeElement));
-    blockedBy;
-    // TODO [Angular 22] Remove with Angular 22. Used for backward compatiblity.
-    input;
-    result;
-    constructor(id, component, invocationContext, _options) {
-        this.id = id;
-        this.component = component;
-        this.invocationContext = invocationContext;
-        this._options = _options;
-        this._portal = this.createPortal();
-        this.input = this._portal.injector?.get(LEGACY_POPUP_INPUT, undefined, { optional: true });
-        this._popupOrigin = this.trackPopupOrigin();
-        this._cssClass.set(Arrays.coerce(this._options.cssClass));
-        this.size = new ɵWorkbenchPopupSize(this._options);
-        this.blockedBy = inject(WorkbenchDialogRegistry).top(this.id);
-        this.attached = this.monitorHostElementAttached();
-        const positionStrategy = inject(Overlay).position()
-            .flexibleConnectedTo({ x: 0, y: 0 })
-            .withFlexibleDimensions(false)
-            .withLockedPosition(false) // If locked, the popup won't attempt to reposition itself if not enough space available.
-            .withPositions((() => {
-            switch (this._options.align ?? 'north') {
-                case 'north':
-                    return [NORTH, SOUTH, WEST, EAST];
-                case 'south':
-                    return [SOUTH, NORTH, WEST, EAST];
-                case 'west':
-                    return [WEST, EAST, NORTH, SOUTH];
-                case 'east':
-                    return [EAST, WEST, NORTH, SOUTH];
-                default:
-                    throw Error('[PopupPositionError] Illegal position; must be north, south, west or east');
-            }
-        })());
-        this._overlayRef = this.createOverlay(positionStrategy);
-        const componentRef = this._overlayRef.attach(this._portal);
-        const popupElement = componentRef.location.nativeElement;
-        this._componentRef.set(componentRef);
-        // Make the popup focusable to request focus.
-        popupElement.setAttribute('tabindex', '-1');
-        this.stickToAnchor(positionStrategy);
-        this.repositionOnResize();
-        this.bindToHostElement(popupElement);
-        this.closeOnHostDestroy();
-        this.closeOnFocusLoss(popupElement);
-        this.closeOnEscape(popupElement);
-        inject(DestroyRef).onDestroy(() => this.destroyed.set(true));
-    }
-    /**
-     * Waits for the popup to close, resolving to its result or rejecting if closed with an error.
-     */
-    waitForClose() {
-        return new Promise((resolve, reject) => {
-            this.injector.get(DestroyRef).onDestroy(() => {
-                this.result instanceof Error ? reject(this.result) : resolve(this.result);
-            });
-        });
-    }
-    /**
-     * Creates a portal to render {@link WorkbenchPopupComponent} in the popup's injection context.
-     */
-    createPortal() {
-        const injector = Injector.create({
-            parent: this._options.injector ?? inject(Injector),
-            providers: [
-                { provide: ɵWorkbenchPopup, useValue: this },
-                { provide: WorkbenchPopup, useExisting: ɵWorkbenchPopup },
-                { provide: Popup, useExisting: ɵWorkbenchPopup },
-                { provide: WORKBENCH_ELEMENT, useExisting: ɵWorkbenchPopup },
-                inject(WORKBENCH_POPUP_CONTEXT, { optional: true }) ?? [],
-                this._options.providers ?? [],
-            ],
-        });
-        inject(DestroyRef).onDestroy(() => injector.destroy());
-        return new ComponentPortal(WorkbenchPopupComponent, null, injector);
-    }
-    /**
-     * Creates a dedicated overlay per popup to place it on top of previously created overlays, such as dialogs, popups, dropdowns, etc.
-     */
-    createOverlay(positionStrategy) {
-        return inject(Overlay).create({
-            panelClass: 'wb-popup',
-            hasBackdrop: false,
-            positionStrategy: positionStrategy,
-            scrollStrategy: inject(Overlay).scrollStrategies.noop(),
-            disposeOnNavigation: true,
-        });
-    }
-    /**
-     * Moves the popup with the anchor.
-     */
-    stickToAnchor(positionStrategy) {
-        effect(() => {
-            const origin = this._popupOrigin();
-            untracked(() => {
-                if (origin) {
-                    positionStrategy.setOrigin(origin);
-                    this._overlayRef.updatePosition();
-                }
-            });
-        });
-    }
-    /**
-     * Monitors attachment of the host element.
-     */
-    monitorHostElementAttached() {
-        if (this.invocationContext) {
-            return this.invocationContext.attached;
-        }
-        const workbenchComponentRef = inject(WORKBENCH_COMPONENT_REF);
-        return computed(() => !!workbenchComponentRef());
-    }
-    /**
-     * Repositions the popup position when resized.
-     */
-    repositionOnResize() {
-        const zone = inject(NgZone);
-        fromResize$(this._overlayRef.overlayElement)
-            .pipe(observeIn(fn => zone.run(fn)), takeUntilDestroyed())
-            .subscribe(() => {
-            this._overlayRef.updatePosition();
-        });
-    }
-    /**
-     * Closes the popup on focus loss, if configured.
-     */
-    closeOnFocusLoss(popupElement) {
-        const focusMonitor = inject(FocusMonitor);
-        if (this._options.closeStrategy?.onFocusLost ?? true) {
-            effect(onCleanup => {
-                if (!this.attached() || !this._popupOrigin()) {
-                    return;
-                }
-                untracked(() => {
-                    const subscription = focusMonitor.monitor(popupElement, true)
-                        .pipe(filter((focusOrigin) => !focusOrigin))
-                        .subscribe(() => this.close(this.result));
-                    onCleanup(() => subscription.unsubscribe());
-                });
-            });
-        }
+    /**
+     * Closes the popup on focus loss, if configured.
+     */
+    closeOnFocusLoss(popupElement) {
+        const focusMonitor = inject(FocusMonitor);
+        if (this._options.closeStrategy?.onFocusLost ?? true) {
+            effect(onCleanup => {
+                if (!this.attached() || !this._popupOrigin()) {
+                    return;
+                }
+                untracked(() => {
+                    const subscription = focusMonitor.monitor(popupElement, true)
+                        .pipe(filter((focusOrigin) => !focusOrigin))
+                        .subscribe(() => this.close(this.result));
+                    onCleanup(() => subscription.unsubscribe());
+                });
+            });
+        }
     }
     /**
      * Closes the popup on escape keystroke.
@@ -10923,6 +10486,38 @@ const LEGACY_POPUP_INPUT = new InjectionToken('LEGACY_POPUP_INPUT');
  *
  * SPDX-License-Identifier: EPL-2.0
  */
+/**
+ * Registry for {@link WorkbenchNotification} elements.
+ */
+class WorkbenchNotificationRegistry extends WorkbenchElementRegistry {
+    /**
+     * Gets the most recently opened notification.
+     */
+    top;
+    constructor() {
+        super({
+            nullElementErrorFn: notificationId => Error(`[NullNotificationError] Notification '${notificationId}' not found.`),
+            onUnregister: notification => notification.destroy(),
+        });
+        this.top = computed(() => this.elements().at(-1), { ...(ngDevMode ? { debugName: "top" } : {}) });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright (c) 2018-2026 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
+ */
 /**
  * Creates the invocation context for given element.
  *
@@ -10978,7 +10573,76 @@ function createInvocationContext(elementId, options) {
             peripheral: signal(false),
         };
     }
-    return null;
+    else if (isNotificationId(contextualElementId)) {
+        const notification = injector.get(WorkbenchNotificationRegistry).get(contextualElementId);
+        return {
+            elementId: notification.id,
+            attached: computed(() => !notification.destroyed()),
+            bounds: notification.bounds,
+            destroyed: notification.destroyed,
+            peripheral: signal(true),
+        };
+    }
+    return null;
+}
+
+/*
+ * Copyright (c) 2018-2022 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
+ */
+/** @inheritDoc */
+class ɵWorkbenchPopupService {
+    _injector = inject(Injector);
+    _rootInjector = inject(ApplicationRef).injector;
+    _popupRegistry = inject(WorkbenchPopupRegistry);
+    _zone = inject(NgZone);
+    /** @inheritDoc */
+    async open(component, options) {
+        assertNotInReactiveContext(this.open, 'Call WorkbenchPopupService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+        // Ensure to run in Angular zone to display the popup even when called from outside the Angular zone.
+        if (!NgZone.isInAngularZone()) {
+            return this._zone.run(() => this.open(component, options));
+        }
+        const popup = this.createPopup(component, options);
+        this._popupRegistry.register(popup.id, popup);
+        try {
+            return await popup.waitForClose();
+        }
+        finally {
+            this._popupRegistry.unregister(popup.id);
+        }
+    }
+    /**
+     * Creates the popup handle.
+     */
+    createPopup(component, options) {
+        // Construct the handle in an injection context that shares the popup's lifecycle, allowing for automatic cleanup of effects and RxJS interop functions.
+        const popupId = options.id ?? computePopupId();
+        const popupInjector = Injector.create({
+            parent: this._rootInjector, // use root injector to be independent of service construction context
+            providers: [],
+            name: `Workbench Popup ${popupId}`,
+        });
+        const invocationContext = createPopupInvocationContext(options, this._injector);
+        return runInInjectionContext(popupInjector, () => new ɵWorkbenchPopup(popupId, component, invocationContext, options));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Computes the popup's invocation context based on passsed options and injection context.
+ */
+function createPopupInvocationContext(options, injector) {
+    return createInvocationContext(options.context && (typeof options.context === 'object' ? options.context.viewId : options.context), { injector });
 }
 
 /*
@@ -11077,7 +10741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 
 /*
- * Copyright (c) 2018-2022 Swiss Federal Railways
+ * Copyright (c) 2018-2026 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -11085,55 +10749,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-/** @inheritDoc */
-class ɵWorkbenchPopupService {
-    _injector = inject(Injector);
-    _rootInjector = inject(ApplicationRef).injector;
-    _popupRegistry = inject(WorkbenchPopupRegistry);
-    _zone = inject(NgZone);
-    /** @inheritDoc */
-    async open(component, options) {
-        assertNotInReactiveContext(this.open, 'Call WorkbenchPopupService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
-        // Ensure to run in Angular zone to display the popup even when called from outside the Angular zone.
-        if (!NgZone.isInAngularZone()) {
-            return this._zone.run(() => this.open(component, options));
-        }
-        const popup = this.createPopup(component, options);
-        this._popupRegistry.register(popup.id, popup);
-        try {
-            return await popup.waitForClose();
-        }
-        finally {
-            this._popupRegistry.unregister(popup.id);
-        }
-    }
-    /**
-     * Creates the popup handle.
-     */
-    createPopup(component, options) {
-        // Construct the handle in an injection context that shares the popup's lifecycle, allowing for automatic cleanup of effects and RxJS interop functions.
-        const popupId = options.id ?? computePopupId();
-        const popupInjector = Injector.create({
-            parent: this._rootInjector, // use root injector to be independent of service construction context
-            providers: [],
-            name: `Workbench Popup ${popupId}`,
-        });
-        const invocationContext = createPopupInvocationContext(options, this._injector);
-        return runInInjectionContext(popupInjector, () => new ɵWorkbenchPopup(popupId, component, invocationContext, options));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-/**
- * Computes the popup's invocation context based on passsed options and injection context.
- */
-function createPopupInvocationContext(options, injector) {
-    return createInvocationContext(options.context && (typeof options.context === 'object' ? options.context.viewId : options.context), { injector });
-}
 /**
  * Provides {@link WorkbenchPopupService} for dependency injection.
  */
@@ -11175,7 +10790,7 @@ function provideWorkbenchDialogContext() {
 }
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * Copyright (c) 2018-2026 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -11210,7 +10825,7 @@ class ɵWorkbenchDialog {
     focused = computed(() => this._focusMonitor.activeElement()?.id === this.id, { ...(ngDevMode ? { debugName: "focused" } : {}) });
     attached;
     destroyed = signal(false, { ...(ngDevMode ? { debugName: "destroyed" } : {}) });
-    bounds = boundingClientRect(computed(() => this._componentRef()?.instance.dialogContent()));
+    bounds = boundingClientRect(computed(() => this._componentRef()?.instance.dialogSlotBounds()));
     modal;
     blinking$ = new BehaviorSubject(false);
     header;
@@ -11420,155 +11035,605 @@ class ɵWorkbenchDialog {
         if (this.invocationContext) {
             return this.invocationContext.attached;
         }
-        if (this._workbenchConfig.dialog?.modalityScope === 'viewport') {
-            return computed(() => true);
+        if (this._workbenchConfig.dialog?.modalityScope === 'viewport') {
+            return computed(() => true);
+        }
+        const workbenchComponentRef = inject(WORKBENCH_COMPONENT_REF);
+        return computed(() => !!workbenchComponentRef());
+    }
+    /**
+     * Binds this dialog to its workbench host element, displaying it only when the host element is attached.
+     *
+     * Dialogs opened in non-peripheral area are displayed in the center of the host.
+     */
+    bindToHostElement() {
+        if (!this.invocationContext && this._workbenchConfig.dialog?.modalityScope === 'viewport') {
+            setStyle(this._overlayRef.hostElement, { inset: '0' });
+        }
+        else {
+            const viewDragService = inject(ViewDragService);
+            const workbenchComponentBounds = inject(WORKBENCH_COMPONENT_BOUNDS);
+            const document = inject(DOCUMENT);
+            effect(() => {
+                const visible = this.attached() && !viewDragService.dragging();
+                // Maintain position and size when hidden to prevent flickering when visible again and to support for virtual scrolling in dialog content.
+                if (!visible) {
+                    setStyle(this._overlayRef.overlayElement, { visibility: 'hidden' }); // Hide via `visibility` instead of `display` property to retain the size.
+                    return;
+                }
+                // IMPORTANT: Track host bounds only if visible to prevent flickering.
+                // Align dialog relative to contextual element if opened in non-peripheral area.
+                const hostBounds = this.invocationContext?.peripheral() === false ? this.invocationContext.bounds() : workbenchComponentBounds();
+                if (!hostBounds) {
+                    setStyle(this._overlayRef.overlayElement, { visibility: 'hidden' }); // Hide via `visibility` instead of `display` property to retain the size.
+                    return;
+                }
+                setStyle(this._overlayRef.overlayElement, { visibility: null });
+                // Center the dialog horizontally within the host bounds.
+                // Shift the overlay instead of fitting it to the host bounds, so the dialog can grow beyond host bounds
+                // if not specifying dialog size via a dialog handle.
+                const { left, top, width } = hostBounds;
+                const viewportCenter = document.documentElement.offsetWidth / 2;
+                const dialogCenter = left + width / 2;
+                const xDelta = -1 * (viewportCenter - dialogCenter);
+                setStyle(this._overlayRef.hostElement, {
+                    transform: `translateX(${Math.round(xDelta)}px) translateY(${Math.round(top)}px)`, // round offset to avoid blurry dialog
+                });
+            });
+        }
+    }
+    /**
+     * Computes if this dialog is blocked by another dialog.
+     */
+    computeBlocked() {
+        const dialogRegistry = inject(WorkbenchDialogRegistry);
+        const topInThisContext = dialogRegistry.top(this.id);
+        const topInInvocationContext = dialogRegistry.top(this.invocationContext?.elementId);
+        return computed(() => {
+            // Get the top dialog in the context spawned by this dialog.
+            if (topInThisContext()) {
+                return topInThisContext();
+            }
+            // Get the top dialog in the context this dialog was opened in.
+            if (topInInvocationContext() !== this) {
+                return topInInvocationContext();
+            }
+            return null;
+        });
+    }
+    blinkOnRequest() {
+        this._blink$
+            .pipe(switchMap(() => of(true).pipe(concatWith(of(false).pipe(delay(300))))), distinctUntilChanged(), takeUntilDestroyed())
+            .subscribe(this.blinking$);
+    }
+    /**
+     * Closes the dialog when the context element is destroyed.
+     */
+    closeOnHostDestroy() {
+        if (this.invocationContext) {
+            effect(() => {
+                if (this.invocationContext.destroyed()) {
+                    untracked(() => this.close());
+                }
+            });
+        }
+    }
+    /**
+     * Destroys this dialog and associated resources.
+     */
+    destroy() {
+        if (!this.destroyed()) {
+            this.injector.destroy();
+            this._overlayRef.dispose();
+        }
+    }
+}
+/** @inheritDoc */
+class ɵWorkbenchDialogSize {
+    _height = signal(undefined, { ...(ngDevMode ? { debugName: "_height" } : {}) });
+    _width = signal(undefined, { ...(ngDevMode ? { debugName: "_width" } : {}) });
+    _minHeight = signal(undefined, { ...(ngDevMode ? { debugName: "_minHeight" } : {}) });
+    _maxHeight = signal(undefined, { ...(ngDevMode ? { debugName: "_maxHeight" } : {}) });
+    _minWidth = signal(undefined, { ...(ngDevMode ? { debugName: "_minWidth" } : {}) });
+    _maxWidth = signal(undefined, { ...(ngDevMode ? { debugName: "_maxWidth" } : {}) });
+    /** @inheritDoc */
+    get height() {
+        return this._height;
+    }
+    /** @inheritDoc */
+    set height(height) {
+        untracked(() => this._height.set(height));
+    }
+    /** @inheritDoc */
+    get width() {
+        return this._width;
+    }
+    /** @inheritDoc */
+    set width(width) {
+        untracked(() => this._width.set(width));
+    }
+    /** @inheritDoc */
+    get minHeight() {
+        return this._minHeight;
+    }
+    /** @inheritDoc */
+    set minHeight(minHeight) {
+        untracked(() => this._minHeight.set(minHeight));
+    }
+    /** @inheritDoc */
+    get maxHeight() {
+        return this._maxHeight;
+    }
+    /** @inheritDoc */
+    set maxHeight(maxHeight) {
+        untracked(() => this._maxHeight.set(maxHeight));
+    }
+    /** @inheritDoc */
+    get minWidth() {
+        return this._minWidth;
+    }
+    /** @inheritDoc */
+    set minWidth(minWidth) {
+        untracked(() => this._minWidth.set(minWidth));
+    }
+    /** @inheritDoc */
+    get maxWidth() {
+        return this._maxWidth;
+    }
+    /** @inheritDoc */
+    set maxWidth(maxWidth) {
+        untracked(() => this._maxWidth.set(maxWidth));
+    }
+}
+
+/*
+ * Copyright (c) 2018-2023 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
+ */
+/** @inheritDoc */
+class ɵWorkbenchDialogService {
+    _injector = inject(Injector);
+    _rootInjector = inject(ApplicationRef).injector;
+    _dialogRegistry = inject(WorkbenchDialogRegistry);
+    _document = inject(DOCUMENT);
+    _zone = inject(NgZone);
+    constructor() {
+        this.installServiceLifecycleLogger();
+    }
+    /** @inheritDoc */
+    async open(component, options) {
+        assertNotInReactiveContext(this.open, 'Call WorkbenchDialogService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+        // Ensure to run in Angular zone to display the dialog even when called from outside the Angular zone.
+        if (!NgZone.isInAngularZone()) {
+            return this._zone.run(() => this.open(component, options));
+        }
+        // Delay the opening of a context-modal dialog until all application-modal dialogs are closed.
+        // Otherwise, the context-modal dialog would overlap already opened application-modal dialogs.
+        const invocationContext = createDialogInvocationContext(options ?? {}, this._injector);
+        if (invocationContext) {
+            await this.waitUntilApplicationModalDialogsClosed();
+        }
+        // Create the dialog.
+        const dialog = this.createDialog(component, invocationContext, options ?? {});
+        this._dialogRegistry.register(dialog.id, dialog);
+        // Capture focused element to restore focus when closing the dialog.
+        const previouslyFocusedElement = this._document.activeElement instanceof HTMLElement ? this._document.activeElement : undefined;
+        try {
+            return await dialog.waitForClose();
+        }
+        finally {
+            this._dialogRegistry.unregister(dialog.id);
+            // Restore focus to previously focused element when closing the last dialog in the current context.
+            if (previouslyFocusedElement && !this._dialogRegistry.top(invocationContext?.elementId)()) {
+                previouslyFocusedElement.focus();
+            }
         }
-        const workbenchComponentRef = inject(WORKBENCH_COMPONENT_REF);
-        return computed(() => !!workbenchComponentRef());
     }
     /**
-     * Binds this dialog to its workbench host element, displaying it only when the host element is attached.
-     *
-     * Dialogs opened in non-peripheral area are displayed in the center of the host.
+     * Creates the dialog handle.
      */
-    bindToHostElement() {
-        if (!this.invocationContext && this._workbenchConfig.dialog?.modalityScope === 'viewport') {
-            setStyle(this._overlayRef.hostElement, { inset: '0' });
-        }
-        else {
-            const viewDragService = inject(ViewDragService);
-            const workbenchComponentBounds = inject(WORKBENCH_COMPONENT_BOUNDS);
-            const document = inject(DOCUMENT);
-            effect(() => {
-                const visible = this.attached() && !viewDragService.dragging();
-                // Maintain position and size when hidden to prevent flickering when visible again and to support for virtual scrolling in dialog content.
-                if (!visible) {
-                    setStyle(this._overlayRef.overlayElement, { visibility: 'hidden' }); // Hide via `visibility` instead of `display` property to retain the size.
-                    return;
-                }
-                // IMPORTANT: Track host bounds only if visible to prevent flickering.
-                // Align dialog relative to contextual element if opened in non-peripheral area.
-                const hostBounds = this.invocationContext?.peripheral() === false ? this.invocationContext.bounds() : workbenchComponentBounds();
-                if (!hostBounds) {
-                    setStyle(this._overlayRef.overlayElement, { visibility: 'hidden' }); // Hide via `visibility` instead of `display` property to retain the size.
-                    return;
-                }
-                setStyle(this._overlayRef.overlayElement, { visibility: null });
-                // Center the dialog horizontally within the host bounds.
-                // Shift the overlay instead of fitting it to the host bounds, so the dialog can grow beyond host bounds
-                // if not specifying dialog size via a dialog handle.
-                const { left, top, width } = hostBounds;
-                const viewportCenter = document.documentElement.offsetWidth / 2;
-                const dialogCenter = left + width / 2;
-                const xDelta = -1 * (viewportCenter - dialogCenter);
-                setStyle(this._overlayRef.hostElement, {
-                    transform: `translateX(${Math.round(xDelta)}px) translateY(${Math.round(top)}px)`, // round offset to avoid blurry dialog
-                });
-            });
-        }
+    createDialog(component, invocationContext, options) {
+        // Construct the handle in an injection context that shares the dialog's lifecycle, allowing for automatic cleanup of effects and RxJS interop functions.
+        const dialogId = computeDialogId();
+        const dialogInjector = Injector.create({
+            parent: this._rootInjector, // use root injector to be independent of service construction context
+            providers: [],
+            name: `Workbench Dialog ${dialogId}`,
+        });
+        return runInInjectionContext(dialogInjector, () => new ɵWorkbenchDialog(dialogId, component, invocationContext, options));
     }
     /**
-     * Computes if this dialog is blocked by another dialog.
+     * Returns a Promise that resolves when all application modal-dialogs are closed. If none are opened, the Promise resolves immediately.
      */
-    computeBlocked() {
-        const dialogRegistry = inject(WorkbenchDialogRegistry);
-        const topInThisContext = dialogRegistry.top(this.id);
-        const topInInvocationContext = dialogRegistry.top(this.invocationContext?.elementId);
-        return computed(() => {
-            // Get the top dialog in the context spawned by this dialog.
-            if (topInThisContext()) {
-                return topInThisContext();
-            }
-            // Get the top dialog in the context this dialog was opened in.
-            if (topInInvocationContext() !== this) {
-                return topInInvocationContext();
-            }
-            return null;
-        });
+    async waitUntilApplicationModalDialogsClosed() {
+        // Use root injector to be independent of service construction context.
+        const injector = Injector.create({ parent: this._rootInjector, providers: [] });
+        await firstValueFrom(toObservable(this._dialogRegistry.top(), { injector }).pipe(filter(top => !top)));
+        injector.destroy();
     }
-    blinkOnRequest() {
-        this._blink$
-            .pipe(switchMap(() => of(true).pipe(concatWith(of(false).pipe(delay(300))))), distinctUntilChanged(), takeUntilDestroyed())
-            .subscribe(this.blinking$);
+    installServiceLifecycleLogger() {
+        const logger = inject(Logger);
+        const workbenchElement = inject(WORKBENCH_ELEMENT, { optional: true });
+        logger.debug(() => `Constructing WorkbenchDialogService [context=${workbenchElement?.id}]`, LoggerNames.LIFECYCLE);
+        inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying WorkbenchDialogService [context=${workbenchElement?.id}]'`, LoggerNames.LIFECYCLE));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Computes the dialog's invocation context based on passsed options and injection context.
+ */
+function createDialogInvocationContext(options, injector) {
+    if (options.modality === 'application') {
+        return null;
+    }
+    return createInvocationContext(options.context && (typeof options.context === 'object' ? options.context.viewId : options.context), { injector });
+}
+
+/*
+ * Copyright (c) 2018-2023 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
+ */
+/**
+ * Enables the display of a component in a dialog.
+ *
+ * A dialog is a visual element for focused interaction with the user, such as prompting the user for input or confirming actions.
+ * The user can move and resize a dialog.
+ *
+ * Displayed on top of other content, a modal dialog blocks interaction with other parts of the application.
+ *
+ * ## Modality
+ * A dialog can be context-modal or application-modal. Context-modal blocks a specific part of the application, as specified by the context;
+ * application-modal blocks the workbench or browser viewport, based on {@link WorkbenchConfig.dialog.modalityScope}.
+ *
+ * ## Context
+ * A dialog can be bound to a context (e.g., part or view), defaulting to the calling context.
+ * The dialog is displayed only if the context is visible and closes when the context is disposed.
+ *
+ * ## Positioning
+ * A dialog is opened in the center of its context, if any, unless opened from the peripheral area.
+ *
+ * ## Stacking
+ * Dialogs are stacked per modality, with only the topmost dialog in each stack being interactive.
+ *
+ * ## Dialog Component
+ * The dialog component can inject the {@link WorkbenchDialog} handle to interact with the dialog, such as setting the title or closing the dialog.
+ * Inputs passed to the dialog are available as input properties in the dialog component.
+ *
+ * ## Dialog Header
+ * By default, the dialog displays the title and a close button in the header. Alternatively, the dialog supports the use of a custom header.
+ * To provide a custom header, add an Angular template to the HTML of the dialog component and decorate it with the `wbDialogHeader` directive.
+ *
+ * ```html
+ * <ng-template wbDialogHeader>
+ *   <app-dialog-header/>
+ * </ng-template>
+ * ```
+ *
+ * ## Dialog Footer
+ * A dialog has a default footer that displays actions defined in the HTML of the dialog component. An action is an Angular template decorated with
+ * the `wbDialogAction` directive. Multiple actions are supported, rendered in modeling order, and can be left- or right-aligned.
+ *
+ * ```html
+ * <!-- Checkbox -->
+ * <ng-template wbDialogAction align="start">
+ *   <label>
+ *     <input type="checkbox"/>
+ *     Do not ask me again
+ *   </label>
+ * </ng-template>
+ *
+ * <!-- OK Button -->
+ * <ng-template wbDialogAction align="end">
+ *   <button (click)="...">OK</button>
+ * </ng-template>
+ *
+ * <!-- Cancel Button -->
+ * <ng-template wbDialogAction align="end">
+ *   <button (click)="...">Cancel</button>
+ * </ng-template>
+ * ```
+ *
+ * Alternatively, the dialog supports the use of a custom footer. To provide a custom footer, add an Angular template to the HTML of the dialog component and
+ * decorate it with the `wbDialogFooter` directive.
+ *
+ * ```html
+ * <ng-template wbDialogFooter>
+ *   <app-dialog-footer/>
+ * </ng-template>
+ * ```
+ *
+ * ## Styling
+ * The following CSS variables can be set to customize the default look of a dialog.
+ *
+ * - `--sci-workbench-dialog-padding`
+ * - `--sci-workbench-dialog-header-height`
+ * - `--sci-workbench-dialog-header-background-color`
+ * - `--sci-workbench-dialog-title-font-family`
+ * - `--sci-workbench-dialog-title-font-weight`
+ * - `--sci-workbench-dialog-title-font-size`
+ * - `--sci-workbench-dialog-title-align`
+ */
+class WorkbenchDialogService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, providedIn: 'root', useExisting: ɵWorkbenchDialogService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useExisting: ɵWorkbenchDialogService }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2023 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
+ */
+class MessageBoxFooterComponent {
+    actions = input.required({ ...(ngDevMode ? { debugName: "actions" } : {}) });
+    severity = input.required({ ...(ngDevMode ? { debugName: "severity" } : {}) });
+    action = output();
+    preferredSizeChange = output();
+    _actionButtons = viewChildren('action_button', { ...(ngDevMode ? { debugName: "_actionButtons" } : {}) });
+    constructor() {
+        void this.emitPreferredSize();
+    }
+    insertionSortOrderFn = () => 0;
+    onAction(key) {
+        this.action.emit(key);
+    }
+    onArrowKey(index, direction) {
+        const actionButtonCount = this._actionButtons().length;
+        const newIndex = (direction === 'left' ? index - 1 : index + 1);
+        this._actionButtons()[(newIndex + actionButtonCount) % actionButtonCount].nativeElement.focus();
+    }
+    async emitPreferredSize() {
+        const host = inject(ElementRef).nativeElement;
+        host.classList.add('calculating-min-width');
+        try {
+            // Wait for the CSS class to take effect, then wait an animation frame to avoid the error: "ResizeObserver loop completed with undelivered notifications".
+            await firstValueFrom(fromResize$(host).pipe(observeOn(animationFrameScheduler)));
+            this.preferredSizeChange.emit(host.offsetWidth);
+        }
+        finally {
+            host.classList.remove('calculating-min-width');
+        }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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: "21.0.1", ngImport: i0, type: MessageBoxFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wb-message-box-footer', imports: [
+                        KeyValuePipe,
+                        TextPipe,
+                    ], host: {
+                        '[attr.data-severity]': 'severity()',
+                    }, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: true }] }], action: [{ type: i0.Output, args: ["action"] }], preferredSizeChange: [{ type: i0.Output, args: ["preferredSizeChange"] }], _actionButtons: [{ type: i0.ViewChildren, args: ['action_button', { isSignal: true }] }] } });
+
+/*
+ * Copyright (c) 2018-2023 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
+ */
+/**
+ * Use this directive to replace the default dialog footer that renders actions contributed via the {@link WorkbenchDialogActionDirective} directive.
+ *
+ * The host element of this modeling directive must be a <ng-template>. The footer shares the lifecycle of the host element.
+ *
+ * **Example:**
+ * ```html
+ * <ng-template wbDialogFooter>
+ *   <app-dialog-footer/>
+ * </ng-template>
+ * ```
+ */
+class WorkbenchDialogFooterDirective {
     /**
-     * Closes the dialog when the context element is destroyed.
+     * Specifies if to display a visual separator between the dialog content and this footer.
+     * Defaults to `true`.
      */
-    closeOnHostDestroy() {
-        if (this.invocationContext) {
-            effect(() => {
-                if (this.invocationContext.destroyed()) {
-                    untracked(() => this.close());
-                }
-            });
-        }
+    divider = input(undefined, { ...(ngDevMode ? { debugName: "divider" } : {}), transform: booleanAttribute });
+    template = inject(TemplateRef);
+    _footer;
+    constructor() {
+        const dialog = inject(ɵWorkbenchDialog);
+        // Defer registering footer to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
+        asapScheduler.schedule(() => this._footer = dialog.registerFooter(this));
+        // Defer disposing footer to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
+        inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._footer?.dispose()));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", 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: "21.0.1", ngImport: i0, type: WorkbenchDialogFooterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[wbDialogFooter]' }]
+        }], ctorParameters: () => [], propDecorators: { divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
+
+/*
+ * Copyright (c) 2018-2023 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
+ */
+/**
+ * Use this directive to replace the default dialog header that displays the title and a close button.
+ *
+ * The host element of this modeling directive must be a <ng-template>. The header shares the lifecycle of the host element.
+ *
+ * **Example:**
+ * ```html
+ * <ng-template wbDialogHeader>
+ *   <app-dialog-header/>
+ * </ng-template>
+ * ```
+ */
+class WorkbenchDialogHeaderDirective {
     /**
-     * Destroys this dialog and associated resources.
+     * Specifies if to display a visual separator between this header and the dialog content.
+     * Defaults to `true`.
      */
-    destroy() {
-        if (!this.destroyed()) {
-            this.injector.destroy();
-            this._overlayRef.dispose();
-        }
+    divider = input(undefined, { ...(ngDevMode ? { debugName: "divider" } : {}), transform: booleanAttribute });
+    template = inject(TemplateRef);
+    _header;
+    constructor() {
+        const dialog = inject(ɵWorkbenchDialog);
+        // Defer registering header to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
+        asapScheduler.schedule(() => this._header = dialog.registerHeader(this));
+        // Defer disposing header to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
+        inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._header?.dispose()));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: WorkbenchDialogHeaderDirective, isStandalone: true, selector: "ng-template[wbDialogHeader]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-/** @inheritDoc */
-class ɵWorkbenchDialogSize {
-    _height = signal(undefined, { ...(ngDevMode ? { debugName: "_height" } : {}) });
-    _width = signal(undefined, { ...(ngDevMode ? { debugName: "_width" } : {}) });
-    _minHeight = signal(undefined, { ...(ngDevMode ? { debugName: "_minHeight" } : {}) });
-    _maxHeight = signal(undefined, { ...(ngDevMode ? { debugName: "_maxHeight" } : {}) });
-    _minWidth = signal(undefined, { ...(ngDevMode ? { debugName: "_minWidth" } : {}) });
-    _maxWidth = signal(undefined, { ...(ngDevMode ? { debugName: "_maxWidth" } : {}) });
-    /** @inheritDoc */
-    get height() {
-        return this._height;
-    }
-    /** @inheritDoc */
-    set height(height) {
-        untracked(() => this._height.set(height));
-    }
-    /** @inheritDoc */
-    get width() {
-        return this._width;
-    }
-    /** @inheritDoc */
-    set width(width) {
-        untracked(() => this._width.set(width));
-    }
-    /** @inheritDoc */
-    get minHeight() {
-        return this._minHeight;
-    }
-    /** @inheritDoc */
-    set minHeight(minHeight) {
-        untracked(() => this._minHeight.set(minHeight));
-    }
-    /** @inheritDoc */
-    get maxHeight() {
-        return this._maxHeight;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[wbDialogHeader]' }]
+        }], ctorParameters: () => [], propDecorators: { divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
+
+/*
+ * Copyright (c) 2018-2023 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
+ */
+class MessageBoxHeaderComponent {
+    title = input(undefined, { ...(ngDevMode ? { debugName: "title" } : {}) });
+    severity = input.required({ ...(ngDevMode ? { debugName: "severity" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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{word-break: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: "21.0.1", ngImport: i0, type: MessageBoxHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wb-message-box-header', imports: [
+                        TextPipe,
+                    ], host: {
+                        '[attr.data-severity]': 'severity()',
+                    }, 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{word-break: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"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: true }] }] } });
+
+/*
+ * Copyright (c) 2018-2024 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
+ */
+/**
+ * Tests if the object is of the specified type.
+ */
+class TypeofPipe {
+    transform(object, type) {
+        return typeof object === type;
     }
-    /** @inheritDoc */
-    set maxHeight(maxHeight) {
-        untracked(() => this._maxHeight.set(maxHeight));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, isStandalone: true, name: "wbTypeof" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'wbTypeof' }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2023 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
+ */
+/**
+ * Renders the workbench message box.
+ *
+ * This component is designed to be opened in a workbench dialog.
+ */
+class WorkbenchMessageBoxComponent {
+    message = input.required({ ...(ngDevMode ? { debugName: "message" } : {}), transform: nullIfEmptyMessage });
+    options = input(undefined, { ...(ngDevMode ? { debugName: "options" } : {}) });
+    _dialog = inject(ɵWorkbenchDialog);
+    empty = signal(false, { ...(ngDevMode ? { debugName: "empty" } : {}) });
+    constructor() {
+        this._dialog.closable = false;
+        this._dialog.resizable = false;
+        this._dialog.padding = false;
+        // Limit the maximum messagebox width if text message to break the message.
+        effect(() => {
+            if (typeof this.message() === 'string' || this.message() === null) {
+                this._dialog.size.maxWidth = 'var(--sci-workbench-messagebox-max-width)';
+            }
+        });
     }
-    /** @inheritDoc */
-    get minWidth() {
-        return this._minWidth;
+    onAction(action) {
+        this._dialog.close(action);
     }
-    /** @inheritDoc */
-    set minWidth(minWidth) {
-        untracked(() => this._minWidth.set(minWidth));
+    onEscape() {
+        if ('cancel' in (this.options()?.actions ?? {})) {
+            this._dialog.close('cancel');
+        }
     }
-    /** @inheritDoc */
-    get maxWidth() {
-        return this._maxWidth;
+    onFooterPreferredSizeChange(preferredSize) {
+        this._dialog.size.minWidth = `${preferredSize}px`;
     }
-    /** @inheritDoc */
-    set maxWidth(maxWidth) {
-        untracked(() => this._maxWidth.set(maxWidth));
+    onContentDimensionChange(dimension) {
+        this.empty.set(!dimension.offsetHeight);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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": "-1", "class.empty": "empty()", "class.content-selectable": "options()?.contentSelectable", "class.has-title": "!!this.options()?.title" } }, 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=\"slot e2e-slot\" [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:grid;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.slot.text{word-break: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"], 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: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wb-message-box', imports: [
+                        NgComponentOutlet,
+                        SciDimensionDirective,
+                        WorkbenchDialogHeaderDirective,
+                        WorkbenchDialogFooterDirective,
+                        MessageBoxHeaderComponent,
+                        MessageBoxFooterComponent,
+                        TypeofPipe,
+                        TextPipe,
+                    ], host: {
+                        // Ensure host element to be focusable in order to close the message box on Escape keystroke.
+                        '[attr.tabindex]': '-1',
+                        '[class.empty]': 'empty()',
+                        '[class.content-selectable]': 'options()?.contentSelectable',
+                        '[class.has-title]': '!!this.options()?.title',
+                        '(keydown.escape)': 'onEscape()',
+                    }, 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=\"slot e2e-slot\" [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:grid;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.slot.text{word-break:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+function nullIfEmptyMessage(message) {
+    return message !== '' ? message : null;
 }
 
 /*
@@ -11581,95 +11646,103 @@ class ɵWorkbenchDialogSize {
  * SPDX-License-Identifier: EPL-2.0
  */
 /** @inheritDoc */
-class ɵWorkbenchDialogService {
-    _injector = inject(Injector);
-    _rootInjector = inject(ApplicationRef).injector;
-    _dialogRegistry = inject(WorkbenchDialogRegistry);
-    _document = inject(DOCUMENT);
+class ɵWorkbenchMessageBoxService {
+    _workbenchDialogService = inject(WorkbenchDialogService);
     _zone = inject(NgZone);
     constructor() {
         this.installServiceLifecycleLogger();
     }
-    /** @inheritDoc */
-    async open(component, options) {
-        assertNotInReactiveContext(this.open, 'Call WorkbenchDialogService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
-        // Ensure to run in Angular zone to display the dialog even when called from outside the Angular zone.
-        if (!NgZone.isInAngularZone()) {
-            return this._zone.run(() => this.open(component, options));
-        }
-        // Delay the opening of a context-modal dialog until all application-modal dialogs are closed.
-        // Otherwise, the context-modal dialog would overlap already opened application-modal dialogs.
-        const invocationContext = createDialogInvocationContext(options ?? {}, this._injector);
-        if (invocationContext) {
-            await this.waitUntilApplicationModalDialogsClosed();
-        }
-        // Create the dialog.
-        const dialog = this.createDialog(component, invocationContext, options ?? {});
-        this._dialogRegistry.register(dialog.id, dialog);
-        // Capture focused element to restore focus when closing the dialog.
-        const previouslyFocusedElement = this._document.activeElement instanceof HTMLElement ? this._document.activeElement : undefined;
-        try {
-            return await dialog.waitForClose();
-        }
-        finally {
-            this._dialogRegistry.unregister(dialog.id);
-            // Restore focus to previously focused element when closing the last dialog in the current context.
-            if (previouslyFocusedElement && !this._dialogRegistry.top(invocationContext?.elementId)()) {
-                previouslyFocusedElement.focus();
-            }
-        }
-    }
-    /**
-     * Creates the dialog handle.
-     */
-    createDialog(component, invocationContext, options) {
-        // Construct the handle in an injection context that shares the dialog's lifecycle, allowing for automatic cleanup of effects and RxJS interop functions.
-        const dialogId = computeDialogId();
-        const dialogInjector = Injector.create({
-            parent: this._rootInjector, // use root injector to be independent of service construction context
-            providers: [],
-            name: `Workbench Dialog ${dialogId}`,
-        });
-        return runInInjectionContext(dialogInjector, () => new ɵWorkbenchDialog(dialogId, component, invocationContext, options));
-    }
     /**
-     * Returns a Promise that resolves when all application modal-dialogs are closed. If none are opened, the Promise resolves immediately.
+     * @inheritDoc
      */
-    async waitUntilApplicationModalDialogsClosed() {
-        // Use root injector to be independent of service construction context.
-        const injector = Injector.create({ parent: this._rootInjector, providers: [] });
-        await firstValueFrom(toObservable(this._dialogRegistry.top(), { injector }).pipe(filter(top => !top)));
-        injector.destroy();
+    async open(message, options) {
+        assertNotInReactiveContext(this.open, 'Call WorkbenchMessageBoxService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+        // Ensure to run in Angular zone to display the message box even if called from outside the Angular zone, e.g. from an error handler.
+        if (!NgZone.isInAngularZone()) {
+            return this._zone.run(() => this.open(message, options));
+        }
+        return (await this._workbenchDialogService.open(WorkbenchMessageBoxComponent, {
+            inputs: { message, options },
+            modality: options?.modality,
+            injector: options?.injector,
+            providers: options?.providers,
+            cssClass: options?.cssClass,
+            context: options?.context,
+            animate: true,
+        }));
     }
     installServiceLifecycleLogger() {
         const logger = inject(Logger);
         const workbenchElement = inject(WORKBENCH_ELEMENT, { optional: true });
-        logger.debug(() => `Constructing WorkbenchDialogService [context=${workbenchElement?.id}]`, LoggerNames.LIFECYCLE);
-        inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying WorkbenchDialogService [context=${workbenchElement?.id}]'`, LoggerNames.LIFECYCLE));
+        logger.debug(() => `Constructing WorkbenchMessageBoxService [context=${workbenchElement?.id}]`, LoggerNames.LIFECYCLE);
+        inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying WorkbenchMessageBoxService [context=${workbenchElement?.id}]'`, LoggerNames.LIFECYCLE));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
+
 /**
- * Computes the dialog's invocation context based on passsed options and injection context.
+ * Provides a standardized dialog for presenting a message to the user, such as an info, warning or alert,
+ * or for prompting the user for confirmation. The message can be plain text or a component, allowing for
+ * structured content or input prompts.
+ *
+ * Displayed on top of other content, a modal message box blocks interaction with other parts of the application.
+ *
+ * ## Modality
+ * A message box can be context-modal or application-modal. Context-modal blocks a specific part of the application, as specified by the context;
+ * application-modal blocks the workbench or browser viewport, based on {@link WorkbenchConfig.dialog.modalityScope}.
+ *
+ * ## Context
+ * A message box can be bound to a context (e.g., part or view), defaulting to the calling context.
+ * The message box is displayed only if the context is visible and closes when the context is disposed.
+ *
+ * ## Positioning
+ * A message box is opened in the center of its context, if any, unless opened from the peripheral area.
+ *
+ * ## Stacking
+ * Message boxes are stacked per modality, with only the topmost message box in each stack being interactive.
+ *
+ * ## Styling
+ * The following CSS variables can be set to customize the default look of a message box.
+ *
+ * - `--sci-workbench-messagebox-max-width`
+ * - `--sci-workbench-messagebox-severity-indicator-size`
+ * - `--sci-workbench-messagebox-padding`
+ * - `--sci-workbench-messagebox-text-align`
+ * - `--sci-workbench-messagebox-title-align`
+ * - `--sci-workbench-messagebox-title-font-family`
+ * - `--sci-workbench-messagebox-title-font-weight`
+ * - `--sci-workbench-messagebox-title-font-size`
  */
-function createDialogInvocationContext(options, injector) {
-    if (options.modality === 'application') {
-        return null;
-    }
-    return createInvocationContext(options.context && (typeof options.context === 'object' ? options.context.viewId : options.context), { injector });
+class WorkbenchMessageBoxService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2026 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
+ */
 /**
- * Provides {@link WorkbenchDialogService} for dependency injection.
+ * Provides {@link WorkbenchMessageBoxService} for dependency injection.
  */
-function provideWorkbenchDialogService() {
+function provideWorkbenchMessageBoxService() {
     return [
-        ɵWorkbenchDialogService,
-        { provide: WorkbenchDialogService, useExisting: ɵWorkbenchDialogService },
+        ɵWorkbenchMessageBoxService,
+        { provide: WorkbenchMessageBoxService, useExisting: ɵWorkbenchMessageBoxService },
     ];
 }
 
@@ -12651,6 +12724,11 @@ class ViewTabComponent {
         event.stopPropagation();
         event.preventDefault();
     }
+    onMouseDown(event) {
+        if (event.button === 1) { // primary aux button
+            event.preventDefault(); // prevent middle-click scrolling; necessary for aux click to work
+        }
+    }
     onDragStart(event) {
         if (!event.dataTransfer) {
             return;
@@ -12715,7 +12793,7 @@ class ViewTabComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ViewTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ViewTabComponent, isStandalone: true, selector: "wb-view-tab", inputs: { view: { classPropertyName: "view", publicName: "viewId", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()", "auxclick": "onAuxClick($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()", "class": "view().classList.asList()", "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;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor)}: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>button.close:is(button,#sci-reset){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[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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ViewTabComponent, isStandalone: true, selector: "wb-view-tab", inputs: { view: { classPropertyName: "view", publicName: "viewId", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()", "auxclick": "onAuxClick($event)", "contextmenu": "onContextmenu($event)", "mousedown": "onMouseDown($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()", "class": "view().classList.asList()", "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;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor)}: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>button.close:is(button,#sci-reset){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[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: "21.0.1", ngImport: i0, type: ViewTabComponent, decorators: [{
             type: Component,
@@ -12736,6 +12814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         '(click)': 'onClick()',
                         '(auxclick)': 'onAuxClick($event)',
                         '(contextmenu)': 'onContextmenu($event)',
+                        '(mousedown)': 'onMouseDown($event)',
                         '(dragstart)': 'onDragStart($event)',
                         '(dragend)': 'onDragEnd()',
                     }, 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;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor)}: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>button.close:is(button,#sci-reset){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[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"] }]
@@ -13680,7 +13759,7 @@ class PartComponent {
         inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying PartComponent [partId=${this.part.id}]'`, LoggerNames.LIFECYCLE));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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", "class": "part.classList.asList()" } }, 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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", "class": "part.classList.asList()" } }, 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=\"slot e2e-slot e2e-view-slot\">\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=\"slot e2e-slot e2e-part-slot\">\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.slot{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: "21.0.1", ngImport: i0, type: PartComponent, decorators: [{
             type: Component,
@@ -13696,7 +13775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         '[attr.data-referencepart]': `part.referencePart() ? '' : null`,
                         '[attr.tabindex]': '-1',
                         '[class]': 'part.classList.asList()',
-                    }, 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"] }]
+                    }, 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=\"slot e2e-slot e2e-view-slot\">\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=\"slot e2e-slot e2e-part-slot\">\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.slot{flex:auto;display:grid;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
 /*
@@ -17770,18 +17849,209 @@ class ɵNotification {
     setCssClass(cssClass) {
         this._notification.cssClass = cssClass;
     }
-    /** @inheritDoc */
-    close() {
-        this._notification.close();
+    /** @inheritDoc */
+    close() {
+        this._notification.close();
+    }
+}
+/**
+ * TODO [Angular 22] Remove with Angular 22. Used for backward compatiblity.
+ */
+const LEGACY_NOTIFICATION_INPUT = `${UID.randomUID()}-auto-generated`;
+
+/*
+ * 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
+ */
+/**
+ * Represents a handle that a notification component can inject to interact with the notification, for example,
+ * to read input data or to configure the notification.
+ *
+ * A notification is a closable message that appears in the upper-right corner and disappears automatically after a few seconds.
+ * It informs the user of a system event, e.g., that a task has been completed or an error has occurred.
+ *
+ * @deprecated since version 21.0.0-beta.1. Replaced by `WorkbenchNotification`. Marked for removal in version 22.
+ */
+class Notification {
+    /**
+     * Input data as passed by the notification opener, or `undefined` if not passed.
+     */
+    input;
+}
+
+/*
+ * 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
+ */
+/**
+ * TODO [Angular 22] Remove with Angular 22. Used for backward compatiblity.
+ */
+class RemoveLegacyInputPipe {
+    transform(inputs) {
+        const inputsCopy = { ...inputs ?? {} };
+        delete inputsCopy[LEGACY_NOTIFICATION_INPUT]; // eslint-disable-line @typescript-eslint/no-dynamic-delete
+        return inputsCopy;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RemoveLegacyInputPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: RemoveLegacyInputPipe, isStandalone: true, name: "wbRemoveLegacyInput" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RemoveLegacyInputPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'wbRemoveLegacyInput' }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2026 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
+ */
+/**
+ * Renders the content of a workbench notification.
+ */
+class WorkbenchNotificationComponent {
+    notification = inject(ɵWorkbenchNotification);
+    hover = signal(false, { ...(ngDevMode ? { debugName: "hover" } : {}) });
+    slotAnchorName = this.notification.id.replace('.', '_'); // Anchor must not contain a dot.
+    notificationSlotBounds = viewChild('slot_bounds', { ...(ngDevMode ? { debugName: "notificationSlotBounds" } : {}), read: (ElementRef) });
+    constructor() {
+        this.installAutoCloseTimer();
+        this.closeOnEscapeIfOnTop();
+        trackFocus(inject(ElementRef).nativeElement, this.notification);
+    }
+    onClose() {
+        this.notification.close();
+    }
+    onEscape(event) {
+        if (this.notification.focused()) {
+            event.stopPropagation(); // stop propagation to prevent closing the most recently displayed notification
+            this.notification.close();
+        }
+    }
+    onAuxClick(event) {
+        if (event.button === 1) { // primary aux button
+            event.preventDefault(); // prevent user-agent default action
+            this.notification.close();
+        }
+    }
+    onMouseDown(event) {
+        if (event.button === 1) { // primary aux button
+            event.preventDefault(); // prevent middle-click scrolling; necessary for aux click to work
+        }
+    }
+    /**
+     * Closes this notification when pressing escape if it is the most recently displayed notification.
+     */
+    closeOnEscapeIfOnTop() {
+        const zone = inject(NgZone);
+        const document = inject(DOCUMENT);
+        effect(onCleanup => {
+            if (!this.notification.top()) {
+                return;
+            }
+            const subscription = fromEvent(document, 'keydown')
+                .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)), filter((event) => event.key === 'Escape'), observeIn(fn => zone.run(fn)))
+                .subscribe(() => this.notification.close());
+            onCleanup(() => subscription.unsubscribe());
+        });
+    }
+    /**
+     * Installs a timer to close the notification.
+     */
+    installAutoCloseTimer() {
+        effect(onCleanup => {
+            const duration = this.notification.duration();
+            const focus = this.notification.focused();
+            const blockedBy = this.notification.blockedBy();
+            const hover = this.hover();
+            if (hover || focus || blockedBy) {
+                return;
+            }
+            untracked(() => {
+                const subscription = fromDuration$(duration).subscribe(() => this.notification.close());
+                onCleanup(() => subscription.unsubscribe());
+            });
+        });
+        function fromDuration$(duration) {
+            switch (duration) {
+                case 'short':
+                    return timer(7000);
+                case 'medium':
+                    return timer(15000);
+                case 'long':
+                    return timer(30000);
+                default:
+                    if (typeof duration === 'number') {
+                        return timer(duration);
+                    }
+                    return NEVER;
+            }
+        }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: WorkbenchNotificationComponent, isStandalone: true, selector: "wb-notification", host: { listeners: { "mouseenter": "hover.set(true)", "mouseleave": "hover.set(false)", "auxclick": "onAuxClick($event)", "mousedown": "onMouseDown($event)", "keydown.escape": "onEscape($event)" }, properties: { "attr.data-notificationid": "notification.id", "attr.data-severity": "notification.severity()", "style.min-height": "notification.size.minHeight()", "style.height": "notification.size.height()", "style.max-height": "notification.size.maxHeight()", "style.--\u0275slot-anchor": "`--${slotAnchorName}`", "attr.tabindex": "-1", "class": "notification.cssClass()" } }, providers: [
+            configureNotificationGlassPane(),
+        ], viewQueries: [{ propertyName: "notificationSlotBounds", first: true, predicate: ["slot_bounds"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: GlassPaneDirective }], ngImport: i0, template: "<!-- Title -->\n@if (notification.title(); as title) {\n  <header class=\"e2e-title\">{{(title | wbText)()}}</header>\n}\n\n<!-- Message -->\n<div class=\"slot e2e-slot\" [class.text]=\"!!notification.slot.text?.length\">\n  @if (notification.slot.text?.length) {\n    {{(notification.slot.text | wbText)()}}\n  } @else if (notification.slot.component) {\n    <sci-viewport class=\"e2e-notification-slot\">\n      <ng-container *ngComponentOutlet=\"notification.slot.component; inputs: notification.inputs | wbRemoveLegacyInput;\"/>\n    </sci-viewport>\n\n    <!-- Extra DIV to capture bounds available to slotted content, excluding viewport content padding. May differ from the actual content size if content overflows or does not fill the slot. -->\n    <div class=\"slot-bounds e2e-notification-slot-bounds\" #slot_bounds></div>\n  }\n</div>\n\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: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:.75em;background-color:var(--sci-color-background-elevation);color:var(--sci-color-text);font-size:.9em;border:1px solid var(--sci-color-border);border-radius:var(--sci-corner);box-shadow:var(--sci-elevation) var(--sci-static-color-black);padding:1em 0;overflow:hidden;outline:none;position:relative}:host:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:var(--sci-workbench-notification-severity-indicator-size)}:host[data-severity=info]:before{background-color:var(--sci-color-accent)}:host[data-severity=warn]:before{background-color:var(--sci-color-notice)}:host[data-severity=error]:before{background-color:var(--sci-color-negative)}:host>header{flex:none;font-weight:700;padding:0 var(--sci-workbench-notification-padding);word-break:break-word;white-space:pre-line}:host>div.slot{flex:auto;overflow:hidden;display:grid}:host>div.slot.text{word-break:break-word;white-space:pre-line;padding:0 var(--sci-workbench-notification-padding)}:host>div.slot>sci-viewport{anchor-name:var(--\\275slot-anchor)}:host>div.slot>sci-viewport::part(content){padding-inline:var(--sci-workbench-notification-padding)}:host>div.slot>div.slot-bounds{position:absolute;position-anchor:var(--\\275slot-anchor);inset:anchor(top) anchor(right) anchor(bottom) anchor(left);margin-inline:var(--sci-workbench-notification-padding);visibility:hidden}:host>button.close: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)}: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>button.close:is(button,#sci-reset){position:absolute;top:.275em;right:.275em;padding:.125em;border-radius:var(--sci-corner-small);font-size:1rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "pipe", type: RemoveLegacyInputPipe, name: "wbRemoveLegacyInput" }] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wb-notification', imports: [
+                        TextPipe,
+                        IconComponent,
+                        NgComponentOutlet,
+                        RemoveLegacyInputPipe,
+                        SciViewportComponent,
+                    ], hostDirectives: [
+                        GlassPaneDirective,
+                    ], providers: [
+                        configureNotificationGlassPane(),
+                    ], host: {
+                        '[attr.data-notificationid]': 'notification.id',
+                        '[attr.data-severity]': 'notification.severity()',
+                        '[style.min-height]': 'notification.size.minHeight()',
+                        '[style.height]': 'notification.size.height()',
+                        '[style.max-height]': 'notification.size.maxHeight()',
+                        '[style.--ɵslot-anchor]': '`--${slotAnchorName}`',
+                        '[attr.tabindex]': '-1',
+                        '[class]': 'notification.cssClass()',
+                        '(mouseenter)': 'hover.set(true)',
+                        '(mouseleave)': 'hover.set(false)',
+                        '(auxclick)': 'onAuxClick($event)',
+                        '(mousedown)': 'onMouseDown($event)',
+                        '(keydown.escape)': 'onEscape($event)',
+                    }, template: "<!-- Title -->\n@if (notification.title(); as title) {\n  <header class=\"e2e-title\">{{(title | wbText)()}}</header>\n}\n\n<!-- Message -->\n<div class=\"slot e2e-slot\" [class.text]=\"!!notification.slot.text?.length\">\n  @if (notification.slot.text?.length) {\n    {{(notification.slot.text | wbText)()}}\n  } @else if (notification.slot.component) {\n    <sci-viewport class=\"e2e-notification-slot\">\n      <ng-container *ngComponentOutlet=\"notification.slot.component; inputs: notification.inputs | wbRemoveLegacyInput;\"/>\n    </sci-viewport>\n\n    <!-- Extra DIV to capture bounds available to slotted content, excluding viewport content padding. May differ from the actual content size if content overflows or does not fill the slot. -->\n    <div class=\"slot-bounds e2e-notification-slot-bounds\" #slot_bounds></div>\n  }\n</div>\n\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: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:.75em;background-color:var(--sci-color-background-elevation);color:var(--sci-color-text);font-size:.9em;border:1px solid var(--sci-color-border);border-radius:var(--sci-corner);box-shadow:var(--sci-elevation) var(--sci-static-color-black);padding:1em 0;overflow:hidden;outline:none;position:relative}:host:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:var(--sci-workbench-notification-severity-indicator-size)}:host[data-severity=info]:before{background-color:var(--sci-color-accent)}:host[data-severity=warn]:before{background-color:var(--sci-color-notice)}:host[data-severity=error]:before{background-color:var(--sci-color-negative)}:host>header{flex:none;font-weight:700;padding:0 var(--sci-workbench-notification-padding);word-break:break-word;white-space:pre-line}:host>div.slot{flex:auto;overflow:hidden;display:grid}:host>div.slot.text{word-break:break-word;white-space:pre-line;padding:0 var(--sci-workbench-notification-padding)}:host>div.slot>sci-viewport{anchor-name:var(--\\275slot-anchor)}:host>div.slot>sci-viewport::part(content){padding-inline:var(--sci-workbench-notification-padding)}:host>div.slot>div.slot-bounds{position:absolute;position-anchor:var(--\\275slot-anchor);inset:anchor(top) anchor(right) anchor(bottom) anchor(left);margin-inline:var(--sci-workbench-notification-padding);visibility:hidden}:host>button.close: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)}: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>button.close:is(button,#sci-reset){position:absolute;top:.275em;right:.275em;padding:.125em;border-radius:var(--sci-corner-small);font-size:1rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { notificationSlotBounds: [{ type: i0.ViewChild, args: ['slot_bounds', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 /**
- * TODO [Angular 22] Remove with Angular 22. Used for backward compatiblity.
+ * Blocks this notification when dialog(s) overlay it.
  */
-const LEGACY_NOTIFICATION_INPUT = `${UID.randomUID()}-auto-generated`;
+function configureNotificationGlassPane() {
+    return [
+        {
+            provide: GLASS_PANE_BLOCKABLE,
+            useFactory: () => inject(ɵWorkbenchNotification),
+        },
+        {
+            provide: GLASS_PANE_OPTIONS,
+            useFactory: () => ({ attributes: { 'data-notificationid': inject(ɵWorkbenchNotification).id } }),
+        },
+    ];
+}
 
 /*
- * Copyright (c) 2018-2025 Swiss Federal Railways
+ * Copyright (c) 2018-2026 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -17790,52 +18060,23 @@ const LEGACY_NOTIFICATION_INPUT = `${UID.randomUID()}-auto-generated`;
  * SPDX-License-Identifier: EPL-2.0
  */
 /**
- * Represents a handle that a notification component can inject to interact with the notification, for example,
- * to read input data or to configure the notification.
- *
- * A notification is a closable message that appears in the upper-right corner and disappears automatically after a few seconds.
- * It informs the user of a system event, e.g., that a task has been completed or an error has occurred.
- *
- * @deprecated since version 21.0.0-beta.1. Replaced by `WorkbenchNotification`. Marked for removal in version 22.
- */
-class Notification {
-    /**
-     * Input data as passed by the notification opener, or `undefined` if not passed.
-     */
-    input;
-}
-
-/*
- * 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
+ * DI token to register providers available for DI if in the context of a workbench notification.
  */
+const WORKBENCH_NOTIFICATION_CONTEXT = new InjectionToken('WORKBENCH_NOTIFICATION_CONTEXT');
 /**
- * Registry for {@link WorkbenchNotification} elements.
+ * Provides providers available for DI if in the context of a workbench notification.
  */
-class WorkbenchNotificationRegistry extends WorkbenchElementRegistry {
-    /**
-     * Gets the most recently opened notification.
-     */
-    top;
-    constructor() {
-        super({
-            nullElementErrorFn: notificationId => Error(`[NullNotificationError] Notification '${notificationId}' not found.`),
-            onUnregister: notification => notification.destroy(),
-        });
-        this.top = computed(() => this.elements().at(-1), { ...(ngDevMode ? { debugName: "top" } : {}) });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationRegistry, providedIn: 'root' });
+function provideWorkbenchNotificationContext() {
+    return {
+        provide: WORKBENCH_NOTIFICATION_CONTEXT,
+        useFactory: () => [
+            provideWorkbenchDialogService(),
+            provideWorkbenchMessageBoxService(),
+            provideWorkbenchPopupService(),
+        ],
+        multi: true,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationRegistry, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
 
 /** @inheritDoc */
 class ɵWorkbenchNotification {
@@ -17850,17 +18091,20 @@ class ɵWorkbenchNotification {
     _severity;
     _duration;
     _cssClass;
+    portal;
     size = new ɵWorkbenchNotificationSize();
     focused = computed(() => this._focusMonitor.activeElement()?.id === this.id, { ...(ngDevMode ? { debugName: "focused" } : {}) });
     /** Checks if this notification is the most recently displayed notification. */
     top = computed(() => this._notificationRegistry.top() === this, { ...(ngDevMode ? { debugName: "top" } : {}) });
     destroyed = signal(false, { ...(ngDevMode ? { debugName: "destroyed" } : {}) });
+    bounds;
+    blockedBy;
     group;
     constructor(id, content, _options) {
         this.id = id;
         this._options = _options;
+        this.portal = this.createPortal();
         this.slot = {
-            injector: this.createInjector(),
             component: typeof content === 'function' ? content : undefined,
             text: typeof content === 'string' ? content : undefined,
         };
@@ -17869,24 +18113,25 @@ class ɵWorkbenchNotification {
         this._duration = signal(this._options.duration ?? 'medium', { ...(ngDevMode ? { debugName: "_duration" } : {}) });
         this._cssClass = signal(Arrays.coerce(this._options.cssClass), { ...(ngDevMode ? { debugName: "_cssClass" } : {}) });
         this.group = this._options.group;
+        this.blockedBy = inject(WorkbenchDialogRegistry).top(this.id);
+        this.bounds = boundingClientRect(computed(() => this.portal.componentRef()?.instance.notificationSlotBounds()));
         inject(DestroyRef).onDestroy(() => this.destroyed.set(true));
     }
     /**
-     * Creates an injector to render content in the notification's injection context.
+     * Creates a portal to render {@link WorkbenchNotificationComponent} in the notification's injection context.
      */
-    createInjector() {
-        const injector = Injector.create({
-            parent: this._options.injector ?? inject(Injector),
+    createPortal() {
+        return new WbComponentPortal(WorkbenchNotificationComponent, {
+            injector: this._options.injector,
             providers: [
                 { provide: ɵWorkbenchNotification, useValue: this },
                 { provide: WorkbenchNotification, useExisting: ɵWorkbenchNotification },
                 { provide: Notification, useClass: ɵNotification },
                 { provide: WORKBENCH_ELEMENT, useExisting: ɵWorkbenchNotification },
+                inject(WORKBENCH_NOTIFICATION_CONTEXT, { optional: true }) ?? [],
                 ...this._options.providers ?? [],
             ],
         });
-        inject(DestroyRef).onDestroy(() => injector.destroy());
-        return injector;
     }
     /** @inheritDoc */
     get title() {
@@ -17922,6 +18167,9 @@ class ɵWorkbenchNotification {
     }
     /** @inheritDoc */
     close() {
+        if (this.blockedBy()) {
+            return;
+        }
         this.destroy();
     }
     /**
@@ -18434,6 +18682,7 @@ function provideMicrofrontendNotification() {
         MicrofrontendNotificationCapabilityValidator,
         MicrofrontendTextNotificationCapabilityProvider,
         MicrofrontendNotificationIntentHandler,
+        provideWorkbenchNotificationContext(),
         provideMicrofrontendTextNotificationRoute(),
         provideMicrofrontendPlatformInitializer(onPreStartup, { phase: MicrofrontendPlatformStartupPhase.PreStartup }),
     ]);
@@ -18445,6 +18694,20 @@ function provideMicrofrontendNotification() {
         // Register notification intent handler.
         Beans.register(IntentInterceptor, { useValue: inject(MicrofrontendNotificationIntentHandler), multi: true });
     }
+    /**
+     * Provides beans of @scion/workbench-client available for DI if in the context of a workbench notification.
+     */
+    function provideWorkbenchNotificationContext() {
+        return {
+            provide: WORKBENCH_NOTIFICATION_CONTEXT,
+            useFactory: () => [
+                { provide: WorkbenchDialogService$1, useFactory: () => new _WorkbenchDialogService(inject(WorkbenchNotification).id) },
+                { provide: WorkbenchMessageBoxService$1, useFactory: () => new _WorkbenchMessageBoxService(inject(WorkbenchNotification).id) },
+                { provide: WorkbenchPopupService$1, useFactory: () => new _WorkbenchPopupService(inject(WorkbenchNotification).id) },
+            ],
+            multi: true,
+        };
+    }
 }
 
 /*
@@ -20291,6 +20554,7 @@ function provideWorkbench(config) {
         provideWorkbenchViewContext(),
         provideWorkbenchDialogContext(),
         provideWorkbenchPopupContext(),
+        provideWorkbenchNotificationContext(),
         provideWorkbenchMicrofrontendSupport(config),
     ]);
 }
@@ -20384,32 +20648,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             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"] }]
         }] });
 
-/*
- * 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
- */
-/**
- * TODO [Angular 22] Remove with Angular 22. Used for backward compatiblity.
- */
-class RemoveLegacyInputPipe {
-    transform(inputs) {
-        const inputsCopy = { ...inputs ?? {} };
-        delete inputsCopy[LEGACY_NOTIFICATION_INPUT]; // eslint-disable-line @typescript-eslint/no-dynamic-delete
-        return inputsCopy;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RemoveLegacyInputPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: RemoveLegacyInputPipe, isStandalone: true, name: "wbRemoveLegacyInput" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RemoveLegacyInputPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'wbRemoveLegacyInput' }]
-        }] });
-
 /*
  * Copyright (c) 2018-2026 Swiss Federal Railways
  *
@@ -20419,140 +20657,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-/**
- * Renders the content of a workbench notification.
- */
-class WorkbenchNotificationComponent {
-    notification = input.required({ ...(ngDevMode ? { debugName: "notification" } : {}) });
-    hover = signal(false, { ...(ngDevMode ? { debugName: "hover" } : {}) });
-    constructor() {
-        this.installAutoCloseTimer();
-        this.installFocusTracker();
-        this.closeOnEscapeIfOnTop();
-    }
-    onClose() {
-        this.notification().close();
-    }
-    onEscape(event) {
-        if (this.notification().focused()) {
-            event.stopPropagation(); // stop propagation to prevent closing the most recently displayed notification
-            this.notification().close();
-        }
-    }
-    onAuxClick(event) {
-        if (event.button === 1) { // primary aux button
-            event.preventDefault(); // prevent user-agent default action
-            this.notification().close();
-        }
-    }
-    /**
-     * Closes this notification when pressing escape if it is the most recently displayed notification.
-     */
-    closeOnEscapeIfOnTop() {
-        const zone = inject(NgZone);
-        const document = inject(DOCUMENT);
-        effect(onCleanup => {
-            if (!this.notification().top()) {
-                return;
-            }
-            const subscription = fromEvent(document, 'keydown')
-                .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)), filter((event) => event.key === 'Escape'), observeIn(fn => zone.run(fn)))
-                .subscribe(() => this.notification().close());
-            onCleanup(() => subscription.unsubscribe());
-        });
-    }
-    /**
-     * Installs a timer to close the notification.
-     */
-    installAutoCloseTimer() {
-        effect(onCleanup => {
-            const notification = this.notification();
-            const duration = notification.duration();
-            const focus = notification.focused();
-            const hover = this.hover();
-            if (hover || focus) {
-                return;
-            }
-            untracked(() => {
-                const subscription = fromDuration$(duration).subscribe(() => this.notification().close());
-                onCleanup(() => subscription.unsubscribe());
-            });
-        });
-        function fromDuration$(duration) {
-            switch (duration) {
-                case 'short':
-                    return timer(7000);
-                case 'medium':
-                    return timer(15000);
-                case 'long':
-                    return timer(30000);
-                default:
-                    if (typeof duration === 'number') {
-                        return timer(duration);
-                    }
-                    return NEVER;
-            }
-        }
-    }
-    installFocusTracker() {
-        const host = inject(ElementRef).nativeElement;
-        const injector = inject(Injector);
-        effect(onCleanup => {
-            const notification = this.notification();
-            untracked(() => {
-                const tracker = runInInjectionContext(injector, () => trackFocus(host, notification));
-                onCleanup(() => tracker.destroy());
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: WorkbenchNotificationComponent, isStandalone: true, selector: "wb-notification", inputs: { notification: { classPropertyName: "notification", publicName: "notification", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "hover.set(true)", "mouseleave": "hover.set(false)", "auxclick": "onAuxClick($event)", "keydown.escape": "onEscape($event)" }, properties: { "attr.data-notificationid": "notification().id", "attr.data-severity": "notification().severity()", "style.min-height": "notification().size.minHeight()", "style.height": "notification().size.height()", "style.max-height": "notification().size.maxHeight()", "attr.tabindex": "-1", "class": "notification().cssClass()" } }, ngImport: i0, template: "<!-- Title -->\n@if (notification().title(); as title) {\n  <header class=\"e2e-title\">{{(title | wbText)()}}</header>\n}\n\n<!-- Message -->\n<div class=\"message e2e-message\" [class.text]=\"!!notification().slot.text?.length\">\n  @if (notification().slot.text?.length) {\n    {{(notification().slot.text | wbText)()}}\n  } @else if (notification().slot.component) {\n    <sci-viewport class=\"e2e-message-viewport\">\n      <ng-container *ngComponentOutlet=\"notification().slot.component!; inputs: notification().inputs | wbRemoveLegacyInput; injector: notification().slot.injector\"/>\n    </sci-viewport>\n  }\n</div>\n\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:flex;flex-direction:column;gap:.75em;background-color:var(--sci-color-background-elevation);color:var(--sci-color-text);font-size:.9em;border:1px solid var(--sci-color-border);border-radius:var(--sci-corner);box-shadow:var(--sci-elevation) var(--sci-static-color-black);padding:1em 0;overflow:hidden;outline:none;position:relative}:host:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:var(--sci-workbench-notification-severity-indicator-size)}:host[data-severity=info]:before{background-color:var(--sci-color-accent)}:host[data-severity=warn]:before{background-color:var(--sci-color-notice)}:host[data-severity=error]:before{background-color:var(--sci-color-negative)}:host>header{flex:none;font-weight:700;padding:0 1.5em;word-break:break-word;white-space:pre-line}:host>div.message{flex:auto;overflow:hidden}:host>div.message.text{word-break:break-word;white-space:pre-line;padding:0 1.5em}:host>div.message>sci-viewport{height:100%}:host>div.message>sci-viewport::part(content){padding:0 1.5em}:host>button.close: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)}: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>button.close:is(button,#sci-reset){position:absolute;top:.275em;right:.275em;padding:.125em;border-radius:var(--sci-corner-small);font-size:1rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "pipe", type: RemoveLegacyInputPipe, name: "wbRemoveLegacyInput" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchNotificationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wb-notification', imports: [
-                        TextPipe,
-                        IconComponent,
-                        NgComponentOutlet,
-                        RemoveLegacyInputPipe,
-                        SciViewportComponent,
-                    ], host: {
-                        '[attr.data-notificationid]': 'notification().id',
-                        '[attr.data-severity]': 'notification().severity()',
-                        '[style.min-height]': 'notification().size.minHeight()',
-                        '[style.height]': 'notification().size.height()',
-                        '[style.max-height]': 'notification().size.maxHeight()',
-                        '[attr.tabindex]': '-1',
-                        '[class]': 'notification().cssClass()',
-                        '(mouseenter)': 'hover.set(true)',
-                        '(mouseleave)': 'hover.set(false)',
-                        '(auxclick)': 'onAuxClick($event)',
-                        '(keydown.escape)': 'onEscape($event)',
-                    }, template: "<!-- Title -->\n@if (notification().title(); as title) {\n  <header class=\"e2e-title\">{{(title | wbText)()}}</header>\n}\n\n<!-- Message -->\n<div class=\"message e2e-message\" [class.text]=\"!!notification().slot.text?.length\">\n  @if (notification().slot.text?.length) {\n    {{(notification().slot.text | wbText)()}}\n  } @else if (notification().slot.component) {\n    <sci-viewport class=\"e2e-message-viewport\">\n      <ng-container *ngComponentOutlet=\"notification().slot.component!; inputs: notification().inputs | wbRemoveLegacyInput; injector: notification().slot.injector\"/>\n    </sci-viewport>\n  }\n</div>\n\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:flex;flex-direction:column;gap:.75em;background-color:var(--sci-color-background-elevation);color:var(--sci-color-text);font-size:.9em;border:1px solid var(--sci-color-border);border-radius:var(--sci-corner);box-shadow:var(--sci-elevation) var(--sci-static-color-black);padding:1em 0;overflow:hidden;outline:none;position:relative}:host:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:var(--sci-workbench-notification-severity-indicator-size)}:host[data-severity=info]:before{background-color:var(--sci-color-accent)}:host[data-severity=warn]:before{background-color:var(--sci-color-notice)}:host[data-severity=error]:before{background-color:var(--sci-color-negative)}:host>header{flex:none;font-weight:700;padding:0 1.5em;word-break:break-word;white-space:pre-line}:host>div.message{flex:auto;overflow:hidden}:host>div.message.text{word-break:break-word;white-space:pre-line;padding:0 1.5em}:host>div.message>sci-viewport{height:100%}:host>div.message>sci-viewport::part(content){padding:0 1.5em}:host>button.close: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)}: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>button.close:is(button,#sci-reset){position:absolute;top:.275em;right:.275em;padding:.125em;border-radius:var(--sci-corner-small);font-size:1rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { notification: [{ type: i0.Input, args: [{ isSignal: true, alias: "notification", required: true }] }] } });
-
-/*
- * Copyright (c) 2018-2022 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
- */
 /**
  * Displays notifications on the right side, stacked vertically.
  */
 class NotificationListComponent {
     notifications = inject(WorkbenchNotificationRegistry).elements;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: NotificationListComponent, isStandalone: true, selector: "wb-notification-list", ngImport: i0, template: "@for (notification of notifications(); track notification.group || notification.id) {\n  <wb-notification [notification]=\"notification\"/>\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;margin:.5em}:host>wb-notification{pointer-events:auto;width:var(--sci-workbench-notification-width);max-width:100%;position:relative;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;left:100%}to{opacity:1;left:0}}\n"], dependencies: [{ kind: "component", type: WorkbenchNotificationComponent, selector: "wb-notification", inputs: ["notification"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: NotificationListComponent, isStandalone: true, selector: "wb-notification-list", ngImport: i0, template: "@for (notification of notifications(); track notification.group || notification.id) {\n  <div class=\"notification\">\n    <ng-container *wbPortalOutlet=\"notification.portal; destroyOnDetach: true\"/>\n  </div>\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;margin:.5em}:host>div.notification{pointer-events:auto;width:var(--sci-workbench-notification-width);max-width:100%;position:relative;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;left:100%}to{opacity:1;left:0}}\n"], dependencies: [{ kind: "directive", type: WorkbenchPortalOutletDirective, selector: "ng-template[wbPortalOutlet]", inputs: ["wbPortalOutlet", "wbPortalOutletDestroyOnDetach"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wb-notification-list', imports: [
-                        WorkbenchNotificationComponent,
-                    ], template: "@for (notification of notifications(); track notification.group || notification.id) {\n  <wb-notification [notification]=\"notification\"/>\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;margin:.5em}:host>wb-notification{pointer-events:auto;width:var(--sci-workbench-notification-width);max-width:100%;position:relative;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;left:100%}to{opacity:1;left:0}}\n"] }]
+                        WorkbenchPortalOutletDirective,
+                    ], template: "@for (notification of notifications(); track notification.group || notification.id) {\n  <div class=\"notification\">\n    <ng-container *wbPortalOutlet=\"notification.portal; destroyOnDetach: true\"/>\n  </div>\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;margin:.5em}:host>div.notification{pointer-events:auto;width:var(--sci-workbench-notification-width);max-width:100%;position:relative;animation:slide-in .3s ease-out}@keyframes slide-in{0%{opacity:0;left:100%}to{opacity:1;left:0}}\n"] }]
         }] });
 
 /*
@@ -20963,7 +21080,7 @@ function configureWorkbenchGlassPane() {
         },
         {
             provide: GLASS_PANE_OPTIONS,
-            useValue: { cssClass: 'e2e-workbench' },
+            useFactory: () => ({ cssClass: 'e2e-workbench' }),
         },
     ];
 }
@@ -21572,7 +21689,7 @@ function migrateGroupInputReduceFn(config) {
  */
 
 /*
- * Copyright (c) 2018-2022 Swiss Federal Railways
+ * Copyright (c) 2018-2026 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0