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

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']]
             }] } });
@@ -10246,7 +10247,7 @@ class WorkbenchMessageBoxComponent {
         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" }] });
+    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,
@@ -10266,7 +10267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         '[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"] }]
+                    }, 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;
@@ -10923,6 +10924,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,6 +11011,16 @@ function createInvocationContext(elementId, options) {
             peripheral: signal(false),
         };
     }
+    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;
 }
 
@@ -11175,7 +11218,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 +11253,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;
@@ -13680,7 +13723,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 +13739,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: () => [] });
 
 /*
@@ -17815,27 +17858,183 @@ class Notification {
  * SPDX-License-Identifier: EPL-2.0
  */
 /**
- * Registry for {@link WorkbenchNotification} elements.
+ * TODO [Angular 22] Remove with Angular 22. Used for backward compatiblity.
  */
-class WorkbenchNotificationRegistry extends WorkbenchElementRegistry {
+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();
+        }
+    }
     /**
-     * Gets the most recently opened notification.
+     * Closes this notification when pressing escape if it is the most recently displayed notification.
      */
-    top;
-    constructor() {
-        super({
-            nullElementErrorFn: notificationId => Error(`[NullNotificationError] Notification '${notificationId}' not found.`),
-            onUnregister: notification => notification.destroy(),
+    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());
         });
-        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' });
+    /**
+     * 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)", "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)',
+                        '(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 }] }] } });
+/**
+ * Blocks this notification when dialog(s) overlay it.
+ */
+function configureNotificationGlassPane() {
+    return [
+        {
+            provide: GLASS_PANE_BLOCKABLE,
+            useFactory: () => inject(ɵWorkbenchNotification),
+        },
+        {
+            provide: GLASS_PANE_OPTIONS,
+            useFactory: () => ({ attributes: { 'data-notificationid': inject(ɵWorkbenchNotification).id } }),
+        },
+    ];
+}
+
+/*
+ * 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
+ */
+/**
+ * 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');
+/**
+ * Provides providers available for DI if in the context of a workbench notification.
+ */
+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 +18049,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 +18071,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 +18125,9 @@ class ɵWorkbenchNotification {
     }
     /** @inheritDoc */
     close() {
+        if (this.blockedBy()) {
+            return;
+        }
         this.destroy();
     }
     /**
@@ -18434,6 +18640,7 @@ function provideMicrofrontendNotification() {
         MicrofrontendNotificationCapabilityValidator,
         MicrofrontendTextNotificationCapabilityProvider,
         MicrofrontendNotificationIntentHandler,
+        provideWorkbenchNotificationContext(),
         provideMicrofrontendTextNotificationRoute(),
         provideMicrofrontendPlatformInitializer(onPreStartup, { phase: MicrofrontendPlatformStartupPhase.PreStartup }),
     ]);
@@ -18445,6 +18652,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 +20512,7 @@ function provideWorkbench(config) {
         provideWorkbenchViewContext(),
         provideWorkbenchDialogContext(),
         provideWorkbenchPopupContext(),
+        provideWorkbenchNotificationContext(),
         provideWorkbenchMicrofrontendSupport(config),
     ]);
 }
@@ -20384,32 +20606,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 +20615,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 +21038,7 @@ function configureWorkbenchGlassPane() {
         },
         {
             provide: GLASS_PANE_OPTIONS,
-            useValue: { cssClass: 'e2e-workbench' },
+            useFactory: () => ({ cssClass: 'e2e-workbench' }),
         },
     ];
 }
@@ -21572,7 +21647,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