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

package/fesm2022/scion-workbench.mjs

@@ -9917,7 +9917,7 @@ function configureDialogGlassPane() {
 }
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * Copyright (c) 2018-2026 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -9926,96 +9926,17 @@ function configureDialogGlassPane() {
  * SPDX-License-Identifier: EPL-2.0
  */
 /**
- * Enables the display of a component in a dialog.
- *
- * A dialog is a visual element for focused interaction with the user, such as prompting the user for input or confirming actions.
- * The user can move and resize a dialog.
- *
- * Displayed on top of other content, a modal dialog blocks interaction with other parts of the application.
- *
- * ## Modality
- * A dialog can be context-modal or application-modal. Context-modal blocks a specific part of the application, as specified by the context;
- * application-modal blocks the workbench or browser viewport, based on {@link WorkbenchConfig.dialog.modalityScope}.
- *
- * ## Context
- * A dialog can be bound to a context (e.g., part or view), defaulting to the calling context.
- * The dialog is displayed only if the context is visible and closes when the context is disposed.
- *
- * ## Positioning
- * A dialog is opened in the center of its context, if any, unless opened from the peripheral area.
- *
- * ## Stacking
- * Dialogs are stacked per modality, with only the topmost dialog in each stack being interactive.
- *
- * ## Dialog Component
- * The dialog component can inject the {@link WorkbenchDialog} handle to interact with the dialog, such as setting the title or closing the dialog.
- * Inputs passed to the dialog are available as input properties in the dialog component.
- *
- * ## Dialog Header
- * By default, the dialog displays the title and a close button in the header. Alternatively, the dialog supports the use of a custom header.
- * To provide a custom header, add an Angular template to the HTML of the dialog component and decorate it with the `wbDialogHeader` directive.
- *
- * ```html
- * <ng-template wbDialogHeader>
- *   <app-dialog-header/>
- * </ng-template>
- * ```
- *
- * ## Dialog Footer
- * A dialog has a default footer that displays actions defined in the HTML of the dialog component. An action is an Angular template decorated with
- * the `wbDialogAction` directive. Multiple actions are supported, rendered in modeling order, and can be left- or right-aligned.
- *
- * ```html
- * <!-- Checkbox -->
- * <ng-template wbDialogAction align="start">
- *   <label>
- *     <input type="checkbox"/>
- *     Do not ask me again
- *   </label>
- * </ng-template>
- *
- * <!-- OK Button -->
- * <ng-template wbDialogAction align="end">
- *   <button (click)="...">OK</button>
- * </ng-template>
- *
- * <!-- Cancel Button -->
- * <ng-template wbDialogAction align="end">
- *   <button (click)="...">Cancel</button>
- * </ng-template>
- * ```
- *
- * Alternatively, the dialog supports the use of a custom footer. To provide a custom footer, add an Angular template to the HTML of the dialog component and
- * decorate it with the `wbDialogFooter` directive.
- *
- * ```html
- * <ng-template wbDialogFooter>
- *   <app-dialog-footer/>
- * </ng-template>
- * ```
- *
- * ## Styling
- * The following CSS variables can be set to customize the default look of a dialog.
- *
- * - `--sci-workbench-dialog-padding`
- * - `--sci-workbench-dialog-header-height`
- * - `--sci-workbench-dialog-header-background-color`
- * - `--sci-workbench-dialog-title-font-family`
- * - `--sci-workbench-dialog-title-font-weight`
- * - `--sci-workbench-dialog-title-font-size`
- * - `--sci-workbench-dialog-title-align`
+ * Provides {@link WorkbenchDialogService} for dependency injection.
  */
-class WorkbenchDialogService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, providedIn: 'root', useExisting: ɵWorkbenchDialogService });
+function provideWorkbenchDialogService() {
+    return [
+        ɵWorkbenchDialogService,
+        { provide: WorkbenchDialogService, useExisting: ɵWorkbenchDialogService },
+    ];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root', useExisting: ɵWorkbenchDialogService }]
-        }] });
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * Copyright (c) 2018-2022 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -10023,51 +9944,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-class MessageBoxFooterComponent {
-    actions = input.required({ ...(ngDevMode ? { debugName: "actions" } : {}) });
-    severity = input.required({ ...(ngDevMode ? { debugName: "severity" } : {}) });
-    action = output();
-    preferredSizeChange = output();
-    _actionButtons = viewChildren('action_button', { ...(ngDevMode ? { debugName: "_actionButtons" } : {}) });
+/**
+ * Renders the content of a workbench popup.
+ */
+class WorkbenchPopupComponent {
+    _host = inject(ElementRef).nativeElement;
+    _cdkTrapFocus = viewChild.required('focus_trap', { read: CdkTrapFocus });
+    popup = inject(ɵWorkbenchPopup);
     constructor() {
-        void this.emitPreferredSize();
-    }
-    insertionSortOrderFn = () => 0;
-    onAction(key) {
-        this.action.emit(key);
-    }
-    onArrowKey(index, direction) {
-        const actionButtonCount = this._actionButtons().length;
-        const newIndex = (direction === 'left' ? index - 1 : index + 1);
-        this._actionButtons()[(newIndex + actionButtonCount) % actionButtonCount].nativeElement.focus();
+        trackFocus(this._host, this.popup);
+        this.focusInitialElement();
     }
-    async emitPreferredSize() {
-        const host = inject(ElementRef).nativeElement;
-        host.classList.add('calculating-min-width');
-        try {
-            // Wait for the CSS class to take effect, then wait an animation frame to avoid the error: "ResizeObserver loop completed with undelivered notifications".
-            await firstValueFrom(fromResize$(host).pipe(observeOn(animationFrameScheduler)));
-            this.preferredSizeChange.emit(host.offsetWidth);
-        }
-        finally {
-            host.classList.remove('calculating-min-width');
-        }
+    focusInitialElement() {
+        const effectRef = effect(() => {
+            // [Angular 14] The initial focus must not be requested via `cdkTrapFocusAutoCapture` as this would restore
+            // focus to the previously focused element when the `FocusTrap` is destroyed. This behavior is unwanted if the
+            // popup is closed by losing focus. Otherwise, the newly focused element that caused the loss of focus and thus
+            // the closing of the popup would immediately become unfocused again. This behavior could only be observed when
+            // the popup loses focus by clicking on an element in a microfrontend.
+            void this._cdkTrapFocus().focusTrap.focusInitialElementWhenReady();
+            effectRef.destroy();
+        }, { ...(ngDevMode ? { debugName: "effectRef" } : {}) });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MessageBoxFooterComponent, isStandalone: true, selector: "wb-message-box-footer", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action", preferredSizeChange: "preferredSizeChange" }, host: { properties: { "attr.data-severity": "severity()" } }, viewQueries: [{ propertyName: "_actionButtons", predicate: ["action_button"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (action of actions() | keyvalue:insertionSortOrderFn; track action.key) {\n  <button #action_button\n          (click)=\"onAction(action.key)\"\n          (keydown.arrowLeft)=\"onArrowKey($index, 'left')\"\n          (keydown.arrowRight)=\"onArrowKey($index, 'right')\"\n          [attr.data-action]=\"action.key\"\n          class=\"action e2e-action\">\n    {{(action.value | wbText)()}}\n  </button>\n\n  @if (!$last) {\n    <span class=\"divider\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:flex;height:3em;background-color:var(--sci-color-background-secondary);color:var(--sci-color-text)}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host.calculating-min-width{position:absolute}:host>button.action:is(button,#sci-reset){all:unset;flex:1;margin:2px;border:1px solid transparent;border-radius:var(--sci-corner-small);transition:border-color ease-in-out .15s;cursor:var(--sci-workbench-messagebox-action-cursor);-webkit-user-select:none;user-select:none;text-align:center;min-width:7.5em;padding-inline:.5em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button.action:is(button,#sci-reset):focus,:host>button.action:is(button,#sci-reset):active{outline:none;color:var(--\\275message-box-severity-color);border-color:var(--\\275message-box-severity-color)}:host>button.action:is(button,#sci-reset):hover{background-color:var(--sci-workbench-messagebox-action-background-color-hover)}:host>span.divider{width:1px;background-color:var(--sci-color-border)}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: WorkbenchPopupComponent, isStandalone: true, selector: "wb-popup", host: { properties: { "attr.data-popupid": "popup.id", "style.width": "popup.size.width()", "style.min-width": "popup.size.minWidth()", "style.max-width": "popup.size.maxWidth()", "style.height": "popup.size.height()", "style.min-height": "popup.size.minHeight()", "style.max-height": "popup.size.maxHeight()", "class": "popup.cssClass()" } }, providers: [
+            configurePopupGlassPane(),
+        ], viewQueries: [{ propertyName: "_cdkTrapFocus", first: true, predicate: ["focus_trap"], descendants: true, read: CdkTrapFocus, isSignal: true }], hostDirectives: [{ directive: GlassPaneDirective }], ngImport: i0, template: "<sci-viewport cdkTrapFocus class=\"e2e-popup-viewport\" #focus_trap>\n  <ng-container *ngComponentOutlet=\"popup.component; inputs: popup.inputs\"/>\n</sci-viewport>\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;outline:none;border-radius:var(--sci-corner);overflow:hidden}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wb-message-box-footer', imports: [
-                        KeyValuePipe,
-                        TextPipe,
+            args: [{ selector: 'wb-popup', imports: [
+                        CdkTrapFocus,
+                        SciViewportComponent,
+                        NgComponentOutlet,
+                    ], hostDirectives: [
+                        GlassPaneDirective,
+                    ], providers: [
+                        configurePopupGlassPane(),
                     ], host: {
-                        '[attr.data-severity]': 'severity()',
-                    }, template: "@for (action of actions() | keyvalue:insertionSortOrderFn; track action.key) {\n  <button #action_button\n          (click)=\"onAction(action.key)\"\n          (keydown.arrowLeft)=\"onArrowKey($index, 'left')\"\n          (keydown.arrowRight)=\"onArrowKey($index, 'right')\"\n          [attr.data-action]=\"action.key\"\n          class=\"action e2e-action\">\n    {{(action.value | wbText)()}}\n  </button>\n\n  @if (!$last) {\n    <span class=\"divider\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:flex;height:3em;background-color:var(--sci-color-background-secondary);color:var(--sci-color-text)}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host.calculating-min-width{position:absolute}:host>button.action:is(button,#sci-reset){all:unset;flex:1;margin:2px;border:1px solid transparent;border-radius:var(--sci-corner-small);transition:border-color ease-in-out .15s;cursor:var(--sci-workbench-messagebox-action-cursor);-webkit-user-select:none;user-select:none;text-align:center;min-width:7.5em;padding-inline:.5em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button.action:is(button,#sci-reset):focus,:host>button.action:is(button,#sci-reset):active{outline:none;color:var(--\\275message-box-severity-color);border-color:var(--\\275message-box-severity-color)}:host>button.action:is(button,#sci-reset):hover{background-color:var(--sci-workbench-messagebox-action-background-color-hover)}:host>span.divider{width:1px;background-color:var(--sci-color-border)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: true }] }], action: [{ type: i0.Output, args: ["action"] }], preferredSizeChange: [{ type: i0.Output, args: ["preferredSizeChange"] }], _actionButtons: [{ type: i0.ViewChildren, args: ['action_button', { isSignal: true }] }] } });
+                        '[attr.data-popupid]': 'popup.id',
+                        '[style.width]': 'popup.size.width()',
+                        '[style.min-width]': 'popup.size.minWidth()',
+                        '[style.max-width]': 'popup.size.maxWidth()',
+                        '[style.height]': 'popup.size.height()',
+                        '[style.min-height]': 'popup.size.minHeight()',
+                        '[style.max-height]': 'popup.size.maxHeight()',
+                        '[class]': 'popup.cssClass()',
+                    }, template: "<sci-viewport cdkTrapFocus class=\"e2e-popup-viewport\" #focus_trap>\n  <ng-container *ngComponentOutlet=\"popup.component; inputs: popup.inputs\"/>\n</sci-viewport>\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;outline:none;border-radius:var(--sci-corner);overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _cdkTrapFocus: [{ type: i0.ViewChild, args: ['focus_trap', { ...{ read: CdkTrapFocus }, isSignal: true }] }] } });
+/**
+ * Blocks this popup when dialog(s) overlay it.
+ */
+function configurePopupGlassPane() {
+    return [
+        {
+            provide: GLASS_PANE_BLOCKABLE,
+            useFactory: () => inject(ɵWorkbenchPopup),
+        },
+        {
+            provide: GLASS_PANE_OPTIONS,
+            useFactory: () => ({ attributes: { 'data-popupid': inject(ɵWorkbenchPopup).id } }),
+        },
+    ];
+}
+
+/**
+ * A popup is a visual workbench element for displaying content above other content. The popup is positioned relative
+ * to an anchor based on its preferred alignment. The anchor can be an element or a coordinate.
+ *
+ * The popup component can inject this handle to interact with the popup.
+ *
+ * Popup inputs are available as input properties in the popup component.
+ *
+ * @see WorkbenchPopupService
+ *
+ * @deprecated since version 21.0.0-beta.1. Replaced by `WorkbenchPopup`. Marked for removal in version 22.
+ */
+class Popup extends WorkbenchPopup {
+}
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * Copyright (c) 2018-2025 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -10076,421 +10033,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  * SPDX-License-Identifier: EPL-2.0
  */
 /**
- * Use this directive to replace the default dialog footer that renders actions contributed via the {@link WorkbenchDialogActionDirective} directive.
- *
- * The host element of this modeling directive must be a <ng-template>. The footer shares the lifecycle of the host element.
- *
- * **Example:**
- * ```html
- * <ng-template wbDialogFooter>
- *   <app-dialog-footer/>
- * </ng-template>
- * ```
+ * DI token to register providers available for DI if in the context of a workbench popup.
  */
-class WorkbenchDialogFooterDirective {
-    /**
-     * Specifies if to display a visual separator between the dialog content and this footer.
-     * Defaults to `true`.
-     */
-    divider = input(undefined, { ...(ngDevMode ? { debugName: "divider" } : {}), transform: booleanAttribute });
-    template = inject(TemplateRef);
-    _footer;
-    constructor() {
-        const dialog = inject(ɵWorkbenchDialog);
-        // Defer registering footer to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
-        asapScheduler.schedule(() => this._footer = dialog.registerFooter(this));
-        // Defer disposing footer to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
-        inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._footer?.dispose()));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: WorkbenchDialogFooterDirective, isStandalone: true, selector: "ng-template[wbDialogFooter]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+const WORKBENCH_POPUP_CONTEXT = new InjectionToken('WORKBENCH_POPUP_CONTEXT');
+/**
+ * Provides providers available for DI if in the context of a workbench popup.
+ */
+function provideWorkbenchPopupContext() {
+    return {
+        provide: WORKBENCH_POPUP_CONTEXT,
+        useFactory: () => [
+            provideWorkbenchDialogService(),
+            provideWorkbenchMessageBoxService(),
+            provideWorkbenchPopupService(),
+        ],
+        multi: true,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogFooterDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[wbDialogFooter]' }]
-        }], ctorParameters: () => [], propDecorators: { divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
 
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/**
- * Use this directive to replace the default dialog header that displays the title and a close button.
- *
- * The host element of this modeling directive must be a <ng-template>. The header shares the lifecycle of the host element.
- *
- * **Example:**
- * ```html
- * <ng-template wbDialogHeader>
- *   <app-dialog-header/>
- * </ng-template>
- * ```
- */
-class WorkbenchDialogHeaderDirective {
-    /**
-     * Specifies if to display a visual separator between this header and the dialog content.
-     * Defaults to `true`.
-     */
-    divider = input(undefined, { ...(ngDevMode ? { debugName: "divider" } : {}), transform: booleanAttribute });
-    template = inject(TemplateRef);
-    _header;
-    constructor() {
-        const dialog = inject(ɵWorkbenchDialog);
-        // Defer registering header to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
-        asapScheduler.schedule(() => this._header = dialog.registerHeader(this));
-        // Defer disposing header to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
-        inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._header?.dispose()));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: WorkbenchDialogHeaderDirective, isStandalone: true, selector: "ng-template[wbDialogHeader]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[wbDialogHeader]' }]
-        }], ctorParameters: () => [], propDecorators: { divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
-
-/*
- * Copyright (c) 2018-2023 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-class MessageBoxHeaderComponent {
-    title = input(undefined, { ...(ngDevMode ? { debugName: "title" } : {}) });
-    severity = input.required({ ...(ngDevMode ? { debugName: "severity" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MessageBoxHeaderComponent, isStandalone: true, selector: "wb-message-box-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-severity": "severity()" } }, ngImport: i0, template: "@if (title()) {\n  <span class=\"title e2e-title\">{{(title() | wbText)()}}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:grid;border-top:var(--sci-workbench-messagebox-severity-indicator-size) solid var(--\\275message-box-severity-color);padding-inline:var(--sci-workbench-messagebox-padding);padding-top:var(--sci-workbench-messagebox-padding);-webkit-user-select:none;user-select:none}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host>span.title{word-break:break-word;white-space:pre-line;font-family:var(--sci-workbench-messagebox-title-font-family),sans-serif;font-size:var(--sci-workbench-messagebox-title-font-size);font-weight:var(--sci-workbench-messagebox-title-font-weight);text-align:var(--sci-workbench-messagebox-title-align)}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wb-message-box-header', imports: [
-                        TextPipe,
-                    ], host: {
-                        '[attr.data-severity]': 'severity()',
-                    }, template: "@if (title()) {\n  <span class=\"title e2e-title\">{{(title() | wbText)()}}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:grid;border-top:var(--sci-workbench-messagebox-severity-indicator-size) solid var(--\\275message-box-severity-color);padding-inline:var(--sci-workbench-messagebox-padding);padding-top:var(--sci-workbench-messagebox-padding);-webkit-user-select:none;user-select:none}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host>span.title{word-break:break-word;white-space:pre-line;font-family:var(--sci-workbench-messagebox-title-font-family),sans-serif;font-size:var(--sci-workbench-messagebox-title-font-size);font-weight:var(--sci-workbench-messagebox-title-font-weight);text-align:var(--sci-workbench-messagebox-title-align)}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: true }] }] } });
-
-/*
- * Copyright (c) 2018-2024 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/**
- * Tests if the object is of the specified type.
- */
-class TypeofPipe {
-    transform(object, type) {
-        return typeof object === type;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, isStandalone: true, name: "wbTypeof" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'wbTypeof' }]
-        }] });
-
-/*
- * Copyright (c) 2018-2023 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/**
- * Renders the workbench message box.
- *
- * This component is designed to be opened in a workbench dialog.
- */
-class WorkbenchMessageBoxComponent {
-    message = input.required({ ...(ngDevMode ? { debugName: "message" } : {}), transform: nullIfEmptyMessage });
-    options = input(undefined, { ...(ngDevMode ? { debugName: "options" } : {}) });
-    _dialog = inject(ɵWorkbenchDialog);
-    empty = signal(false, { ...(ngDevMode ? { debugName: "empty" } : {}) });
-    constructor() {
-        this._dialog.closable = false;
-        this._dialog.resizable = false;
-        this._dialog.padding = false;
-        // Limit the maximum messagebox width if text message to break the message.
-        effect(() => {
-            if (typeof this.message() === 'string' || this.message() === null) {
-                this._dialog.size.maxWidth = 'var(--sci-workbench-messagebox-max-width)';
-            }
-        });
-    }
-    onAction(action) {
-        this._dialog.close(action);
-    }
-    onEscape() {
-        if ('cancel' in (this.options()?.actions ?? {})) {
-            this._dialog.close('cancel');
-        }
-    }
-    onFooterPreferredSizeChange(preferredSize) {
-        this._dialog.size.minWidth = `${preferredSize}px`;
-    }
-    onContentDimensionChange(dimension) {
-        this.empty.set(!dimension.offsetHeight);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: WorkbenchMessageBoxComponent, isStandalone: true, selector: "wb-message-box", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "attr.tabindex": "-1", "class.empty": "empty()", "class.content-selectable": "options()?.contentSelectable", "class.has-title": "!!this.options()?.title" } }, ngImport: i0, template: "@let options = this.options() ?? {};\n<ng-template wbDialogHeader [divider]=\"false\">\n  <wb-message-box-header [title]=\"options.title\" [severity]=\"options.severity ?? 'info'\"/>\n</ng-template>\n\n@let message = this.message();\n<div class=\"slot e2e-slot\" [class.text]=\"message | wbTypeof:'string'\" sciDimension (sciDimensionChange)=\"onContentDimensionChange($event)\">\n  @if (message | wbTypeof:'string') {\n    {{($any(message) | wbText)()}}\n  } @else {\n    <ng-container *ngComponentOutlet=\"message; inputs: options.inputs\"/>\n  }\n</div>\n\n<ng-template wbDialogFooter>\n  <wb-message-box-footer [actions]=\"options.actions ?? {ok: '%workbench.ok.action'}\"\n                         [severity]=\"options.severity ?? 'info'\"\n                         (action)=\"onAction($event)\"\n                         (keydown.escape)=\"onEscape()\"\n                         (preferredSizeChange)=\"onFooterPreferredSizeChange($event)\"/>\n</ng-template>\n", styles: [":host{display:grid;outline:none;padding-inline:var(--sci-workbench-messagebox-padding);padding-bottom:var(--sci-workbench-messagebox-padding)}:host.has-title:not(.empty){padding-top:var(--sci-workbench-messagebox-padding)}:host:not(.content-selectable){-webkit-user-select:none;user-select:none}:host>div.slot.text{word-break:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: SciDimensionDirective, selector: "[sciDimension]", inputs: ["emitOutsideAngular"], outputs: ["sciDimensionChange"] }, { kind: "directive", type: WorkbenchDialogHeaderDirective, selector: "ng-template[wbDialogHeader]", inputs: ["divider"] }, { kind: "directive", type: WorkbenchDialogFooterDirective, selector: "ng-template[wbDialogFooter]", inputs: ["divider"] }, { kind: "component", type: MessageBoxHeaderComponent, selector: "wb-message-box-header", inputs: ["title", "severity"] }, { kind: "component", type: MessageBoxFooterComponent, selector: "wb-message-box-footer", inputs: ["actions", "severity"], outputs: ["action", "preferredSizeChange"] }, { kind: "pipe", type: TypeofPipe, name: "wbTypeof" }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wb-message-box', imports: [
-                        NgComponentOutlet,
-                        SciDimensionDirective,
-                        WorkbenchDialogHeaderDirective,
-                        WorkbenchDialogFooterDirective,
-                        MessageBoxHeaderComponent,
-                        MessageBoxFooterComponent,
-                        TypeofPipe,
-                        TextPipe,
-                    ], host: {
-                        // Ensure host element to be focusable in order to close the message box on Escape keystroke.
-                        '[attr.tabindex]': '-1',
-                        '[class.empty]': 'empty()',
-                        '[class.content-selectable]': 'options()?.contentSelectable',
-                        '[class.has-title]': '!!this.options()?.title',
-                        '(keydown.escape)': 'onEscape()',
-                    }, template: "@let options = this.options() ?? {};\n<ng-template wbDialogHeader [divider]=\"false\">\n  <wb-message-box-header [title]=\"options.title\" [severity]=\"options.severity ?? 'info'\"/>\n</ng-template>\n\n@let message = this.message();\n<div class=\"slot e2e-slot\" [class.text]=\"message | wbTypeof:'string'\" sciDimension (sciDimensionChange)=\"onContentDimensionChange($event)\">\n  @if (message | wbTypeof:'string') {\n    {{($any(message) | wbText)()}}\n  } @else {\n    <ng-container *ngComponentOutlet=\"message; inputs: options.inputs\"/>\n  }\n</div>\n\n<ng-template wbDialogFooter>\n  <wb-message-box-footer [actions]=\"options.actions ?? {ok: '%workbench.ok.action'}\"\n                         [severity]=\"options.severity ?? 'info'\"\n                         (action)=\"onAction($event)\"\n                         (keydown.escape)=\"onEscape()\"\n                         (preferredSizeChange)=\"onFooterPreferredSizeChange($event)\"/>\n</ng-template>\n", styles: [":host{display:grid;outline:none;padding-inline:var(--sci-workbench-messagebox-padding);padding-bottom:var(--sci-workbench-messagebox-padding)}:host.has-title:not(.empty){padding-top:var(--sci-workbench-messagebox-padding)}:host:not(.content-selectable){-webkit-user-select:none;user-select:none}:host>div.slot.text{word-break:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
-function nullIfEmptyMessage(message) {
-    return message !== '' ? message : null;
-}
-
-/**
- * Provides a standardized dialog for presenting a message to the user, such as an info, warning or alert,
- * or for prompting the user for confirmation. The message can be plain text or a component, allowing for
- * structured content or input prompts.
- *
- * Displayed on top of other content, a modal message box blocks interaction with other parts of the application.
- *
- * ## Modality
- * A message box can be context-modal or application-modal. Context-modal blocks a specific part of the application, as specified by the context;
- * application-modal blocks the workbench or browser viewport, based on {@link WorkbenchConfig.dialog.modalityScope}.
- *
- * ## Context
- * A message box can be bound to a context (e.g., part or view), defaulting to the calling context.
- * The message box is displayed only if the context is visible and closes when the context is disposed.
- *
- * ## Positioning
- * A message box is opened in the center of its context, if any, unless opened from the peripheral area.
- *
- * ## Stacking
- * Message boxes are stacked per modality, with only the topmost message box in each stack being interactive.
- *
- * ## Styling
- * The following CSS variables can be set to customize the default look of a message box.
- *
- * - `--sci-workbench-messagebox-max-width`
- * - `--sci-workbench-messagebox-severity-indicator-size`
- * - `--sci-workbench-messagebox-padding`
- * - `--sci-workbench-messagebox-text-align`
- * - `--sci-workbench-messagebox-title-align`
- * - `--sci-workbench-messagebox-title-font-family`
- * - `--sci-workbench-messagebox-title-font-weight`
- * - `--sci-workbench-messagebox-title-font-size`
- */
-class WorkbenchMessageBoxService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService }]
-        }] });
-
-/*
- * Copyright (c) 2018-2023 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/** @inheritDoc */
-class ɵWorkbenchMessageBoxService {
-    _workbenchDialogService = inject(WorkbenchDialogService);
-    _zone = inject(NgZone);
-    constructor() {
-        this.installServiceLifecycleLogger();
-    }
-    /**
-     * @inheritDoc
-     */
-    async open(message, options) {
-        assertNotInReactiveContext(this.open, 'Call WorkbenchMessageBoxService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
-        // Ensure to run in Angular zone to display the message box even if called from outside the Angular zone, e.g. from an error handler.
-        if (!NgZone.isInAngularZone()) {
-            return this._zone.run(() => this.open(message, options));
-        }
-        return (await this._workbenchDialogService.open(WorkbenchMessageBoxComponent, {
-            inputs: { message, options },
-            modality: options?.modality,
-            injector: options?.injector,
-            providers: options?.providers,
-            cssClass: options?.cssClass,
-            context: options?.context,
-            animate: true,
-        }));
-    }
-    installServiceLifecycleLogger() {
-        const logger = inject(Logger);
-        const workbenchElement = inject(WORKBENCH_ELEMENT, { optional: true });
-        logger.debug(() => `Constructing WorkbenchMessageBoxService [context=${workbenchElement?.id}]`, LoggerNames.LIFECYCLE);
-        inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying WorkbenchMessageBoxService [context=${workbenchElement?.id}]'`, LoggerNames.LIFECYCLE));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-/**
- * Provides {@link WorkbenchDialogService} for dependency injection.
- */
-function provideWorkbenchMessageBoxService() {
-    return [
-        ɵWorkbenchMessageBoxService,
-        { provide: WorkbenchMessageBoxService, useExisting: ɵWorkbenchMessageBoxService },
-    ];
-}
-
-/*
- * Copyright (c) 2018-2022 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/**
- * Renders the content of a workbench popup.
- */
-class WorkbenchPopupComponent {
-    _host = inject(ElementRef).nativeElement;
-    _cdkTrapFocus = viewChild.required('focus_trap', { read: CdkTrapFocus });
-    popup = inject(ɵWorkbenchPopup);
-    constructor() {
-        trackFocus(this._host, this.popup);
-        this.focusInitialElement();
-    }
-    focusInitialElement() {
-        const effectRef = effect(() => {
-            // [Angular 14] The initial focus must not be requested via `cdkTrapFocusAutoCapture` as this would restore
-            // focus to the previously focused element when the `FocusTrap` is destroyed. This behavior is unwanted if the
-            // popup is closed by losing focus. Otherwise, the newly focused element that caused the loss of focus and thus
-            // the closing of the popup would immediately become unfocused again. This behavior could only be observed when
-            // the popup loses focus by clicking on an element in a microfrontend.
-            void this._cdkTrapFocus().focusTrap.focusInitialElementWhenReady();
-            effectRef.destroy();
-        }, { ...(ngDevMode ? { debugName: "effectRef" } : {}) });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: WorkbenchPopupComponent, isStandalone: true, selector: "wb-popup", host: { properties: { "attr.data-popupid": "popup.id", "style.width": "popup.size.width()", "style.min-width": "popup.size.minWidth()", "style.max-width": "popup.size.maxWidth()", "style.height": "popup.size.height()", "style.min-height": "popup.size.minHeight()", "style.max-height": "popup.size.maxHeight()", "class": "popup.cssClass()" } }, providers: [
-            configurePopupGlassPane(),
-        ], viewQueries: [{ propertyName: "_cdkTrapFocus", first: true, predicate: ["focus_trap"], descendants: true, read: CdkTrapFocus, isSignal: true }], hostDirectives: [{ directive: GlassPaneDirective }], ngImport: i0, template: "<sci-viewport cdkTrapFocus class=\"e2e-popup-viewport\" #focus_trap>\n  <ng-container *ngComponentOutlet=\"popup.component; inputs: popup.inputs\"/>\n</sci-viewport>\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;outline:none;border-radius:var(--sci-corner);overflow:hidden}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchPopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wb-popup', imports: [
-                        CdkTrapFocus,
-                        SciViewportComponent,
-                        NgComponentOutlet,
-                    ], hostDirectives: [
-                        GlassPaneDirective,
-                    ], providers: [
-                        configurePopupGlassPane(),
-                    ], host: {
-                        '[attr.data-popupid]': 'popup.id',
-                        '[style.width]': 'popup.size.width()',
-                        '[style.min-width]': 'popup.size.minWidth()',
-                        '[style.max-width]': 'popup.size.maxWidth()',
-                        '[style.height]': 'popup.size.height()',
-                        '[style.min-height]': 'popup.size.minHeight()',
-                        '[style.max-height]': 'popup.size.maxHeight()',
-                        '[class]': 'popup.cssClass()',
-                    }, template: "<sci-viewport cdkTrapFocus class=\"e2e-popup-viewport\" #focus_trap>\n  <ng-container *ngComponentOutlet=\"popup.component; inputs: popup.inputs\"/>\n</sci-viewport>\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;outline:none;border-radius:var(--sci-corner);overflow:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _cdkTrapFocus: [{ type: i0.ViewChild, args: ['focus_trap', { ...{ read: CdkTrapFocus }, isSignal: true }] }] } });
-/**
- * Blocks this popup when dialog(s) overlay it.
- */
-function configurePopupGlassPane() {
-    return [
-        {
-            provide: GLASS_PANE_BLOCKABLE,
-            useFactory: () => inject(ɵWorkbenchPopup),
-        },
-        {
-            provide: GLASS_PANE_OPTIONS,
-            useFactory: () => ({ attributes: { 'data-popupid': inject(ɵWorkbenchPopup).id } }),
-        },
-    ];
-}
-
-/**
- * A popup is a visual workbench element for displaying content above other content. The popup is positioned relative
- * to an anchor based on its preferred alignment. The anchor can be an element or a coordinate.
- *
- * The popup component can inject this handle to interact with the popup.
- *
- * Popup inputs are available as input properties in the popup component.
- *
- * @see WorkbenchPopupService
- *
- * @deprecated since version 21.0.0-beta.1. Replaced by `WorkbenchPopup`. Marked for removal in version 22.
- */
-class Popup extends WorkbenchPopup {
-}
-
-/*
- * Copyright (c) 2018-2025 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/**
- * DI token to register providers available for DI if in the context of a workbench popup.
- */
-const WORKBENCH_POPUP_CONTEXT = new InjectionToken('WORKBENCH_POPUP_CONTEXT');
-/**
- * Provides providers available for DI if in the context of a workbench popup.
- */
-function provideWorkbenchPopupContext() {
-    return {
-        provide: WORKBENCH_POPUP_CONTEXT,
-        useFactory: () => [
-            provideWorkbenchDialogService(),
-            provideWorkbenchMessageBoxService(),
-            provideWorkbenchPopupService(),
-        ],
-        multi: true,
-    };
-}
-
-/*
- * Copyright (c) 2018-2025 Swiss Federal Railways
+ * 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
@@ -11024,6 +10586,65 @@ function createInvocationContext(elementId, options) {
     return null;
 }
 
+/*
+ * Copyright (c) 2018-2022 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/** @inheritDoc */
+class ɵWorkbenchPopupService {
+    _injector = inject(Injector);
+    _rootInjector = inject(ApplicationRef).injector;
+    _popupRegistry = inject(WorkbenchPopupRegistry);
+    _zone = inject(NgZone);
+    /** @inheritDoc */
+    async open(component, options) {
+        assertNotInReactiveContext(this.open, 'Call WorkbenchPopupService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+        // Ensure to run in Angular zone to display the popup even when called from outside the Angular zone.
+        if (!NgZone.isInAngularZone()) {
+            return this._zone.run(() => this.open(component, options));
+        }
+        const popup = this.createPopup(component, options);
+        this._popupRegistry.register(popup.id, popup);
+        try {
+            return await popup.waitForClose();
+        }
+        finally {
+            this._popupRegistry.unregister(popup.id);
+        }
+    }
+    /**
+     * Creates the popup handle.
+     */
+    createPopup(component, options) {
+        // Construct the handle in an injection context that shares the popup's lifecycle, allowing for automatic cleanup of effects and RxJS interop functions.
+        const popupId = options.id ?? computePopupId();
+        const popupInjector = Injector.create({
+            parent: this._rootInjector, // use root injector to be independent of service construction context
+            providers: [],
+            name: `Workbench Popup ${popupId}`,
+        });
+        const invocationContext = createPopupInvocationContext(options, this._injector);
+        return runInInjectionContext(popupInjector, () => new ɵWorkbenchPopup(popupId, component, invocationContext, options));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Computes the popup's invocation context based on passsed options and injection context.
+ */
+function createPopupInvocationContext(options, injector) {
+    return createInvocationContext(options.context && (typeof options.context === 'object' ? options.context.viewId : options.context), { injector });
+}
+
 /*
  * Copyright (c) 2018-2022 Swiss Federal Railways
  *
@@ -11080,103 +10701,54 @@ class ɵPopupService {
                 { provide: LEGACY_POPUP_INPUT, useValue: config.input },
             ],
         });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵPopupService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵPopupService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/*
- * 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
- */
-/**
- * Enables the display of a component in a popup.
- *
- * A popup is a visual workbench element for displaying content above other content. It is positioned relative to an anchor,
- * which can be an element or a coordinate. The popup moves with the anchor. By default, the popup closes on focus loss or
- * when pressing the escape key.
- *
- * A popup can be bound to a context (e.g., part or view), displaying the popup only if the context is visible and closing
- * it when the context is disposed. Defaults to the calling context.
- *
- * @deprecated since version 21.0.0-beta.1. Use `WorkbenchPopupService` to open popups. Marked for removal in version 22.
- */
-class PopupService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopupService, providedIn: 'root', useExisting: ɵPopupService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopupService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root', useExisting: ɵPopupService }]
-        }] });
-
-/*
- * Copyright (c) 2018-2022 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/** @inheritDoc */
-class ɵWorkbenchPopupService {
-    _injector = inject(Injector);
-    _rootInjector = inject(ApplicationRef).injector;
-    _popupRegistry = inject(WorkbenchPopupRegistry);
-    _zone = inject(NgZone);
-    /** @inheritDoc */
-    async open(component, options) {
-        assertNotInReactiveContext(this.open, 'Call WorkbenchPopupService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
-        // Ensure to run in Angular zone to display the popup even when called from outside the Angular zone.
-        if (!NgZone.isInAngularZone()) {
-            return this._zone.run(() => this.open(component, options));
-        }
-        const popup = this.createPopup(component, options);
-        this._popupRegistry.register(popup.id, popup);
-        try {
-            return await popup.waitForClose();
-        }
-        finally {
-            this._popupRegistry.unregister(popup.id);
-        }
-    }
-    /**
-     * Creates the popup handle.
-     */
-    createPopup(component, options) {
-        // Construct the handle in an injection context that shares the popup's lifecycle, allowing for automatic cleanup of effects and RxJS interop functions.
-        const popupId = options.id ?? computePopupId();
-        const popupInjector = Injector.create({
-            parent: this._rootInjector, // use root injector to be independent of service construction context
-            providers: [],
-            name: `Workbench Popup ${popupId}`,
-        });
-        const invocationContext = createPopupInvocationContext(options, this._injector);
-        return runInInjectionContext(popupInjector, () => new ɵWorkbenchPopup(popupId, component, invocationContext, options));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, providedIn: 'root' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵPopupService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchPopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵPopupService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
+
+/*
+ * 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
+ */
 /**
- * Computes the popup's invocation context based on passsed options and injection context.
+ * Enables the display of a component in a popup.
+ *
+ * A popup is a visual workbench element for displaying content above other content. It is positioned relative to an anchor,
+ * which can be an element or a coordinate. The popup moves with the anchor. By default, the popup closes on focus loss or
+ * when pressing the escape key.
+ *
+ * A popup can be bound to a context (e.g., part or view), displaying the popup only if the context is visible and closing
+ * it when the context is disposed. Defaults to the calling context.
+ *
+ * @deprecated since version 21.0.0-beta.1. Use `WorkbenchPopupService` to open popups. Marked for removal in version 22.
  */
-function createPopupInvocationContext(options, injector) {
-    return createInvocationContext(options.context && (typeof options.context === 'object' ? options.context.viewId : options.context), { injector });
+class PopupService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopupService, providedIn: 'root', useExisting: ɵPopupService });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PopupService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useExisting: ɵPopupService }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
 /**
  * Provides {@link WorkbenchPopupService} for dependency injection.
  */
@@ -11388,230 +10960,680 @@ class ɵWorkbenchDialog {
         return this._padding;
     }
     /** @inheritDoc */
-    set padding(padding) {
-        untracked(() => this._padding.set(padding));
+    set padding(padding) {
+        untracked(() => this._padding.set(padding));
+    }
+    /** @inheritDoc */
+    get cssClass() {
+        return this._cssClass;
+    }
+    /** @inheritDoc */
+    set cssClass(cssClass) {
+        untracked(() => this._cssClass.set(new Array().concat(this._options.cssClass ?? []).concat(cssClass)));
+    }
+    /**
+     * Returns the position of the dialog in the dialog stack.
+     */
+    getPositionInDialogStack() {
+        return this._workbenchDialogRegistry.indexOf(this);
+    }
+    /** @inheritDoc */
+    blink() {
+        this._blink$.next();
+    }
+    /**
+     * Creates a portal to render {@link WorkbenchDialogComponent} in the dialog's injection context.
+     */
+    createPortal() {
+        const injector = Injector.create({
+            parent: this._options.injector ?? inject(Injector),
+            providers: [
+                { provide: ɵWorkbenchDialog, useValue: this },
+                { provide: WorkbenchDialog, useExisting: ɵWorkbenchDialog },
+                { provide: WORKBENCH_ELEMENT, useExisting: ɵWorkbenchDialog },
+                inject(WORKBENCH_DIALOG_CONTEXT, { optional: true }) ?? [],
+                this._options.providers ?? [],
+            ],
+        });
+        inject(DestroyRef).onDestroy(() => injector.destroy());
+        return new ComponentPortal(WorkbenchDialogComponent, null, injector);
+    }
+    /**
+     * Creates a dedicated overlay per dialog to place it on top of previously created overlays, such as dialogs, popups, dropdowns, etc.
+     */
+    createOverlay() {
+        const overlay = inject(Overlay);
+        return overlay.create({
+            disposeOnNavigation: true, // dispose dialog on browser back/forward navigation
+            panelClass: ['wb-dialog-modality-context'],
+            positionStrategy: overlay.position().global(),
+            scrollStrategy: overlay.scrollStrategies.noop(),
+        });
+    }
+    /**
+     * Restores focus when re-attaching this dialog.
+     */
+    restoreFocusOnAttach() {
+        effect(() => {
+            const attached = this.attached();
+            untracked(() => attached && this.focus());
+        });
+    }
+    /**
+     * Restores focus when unblocking this dialog.
+     */
+    restoreFocusOnUnblock() {
+        effect(() => {
+            const blocked = this.blockedBy();
+            untracked(() => !blocked && this.focus());
+        });
+    }
+    /**
+     * Monitors attachment of the host element.
+     */
+    monitorHostElementAttached() {
+        if (this.invocationContext) {
+            return this.invocationContext.attached;
+        }
+        if (this._workbenchConfig.dialog?.modalityScope === 'viewport') {
+            return computed(() => true);
+        }
+        const workbenchComponentRef = inject(WORKBENCH_COMPONENT_REF);
+        return computed(() => !!workbenchComponentRef());
+    }
+    /**
+     * Binds this dialog to its workbench host element, displaying it only when the host element is attached.
+     *
+     * Dialogs opened in non-peripheral area are displayed in the center of the host.
+     */
+    bindToHostElement() {
+        if (!this.invocationContext && this._workbenchConfig.dialog?.modalityScope === 'viewport') {
+            setStyle(this._overlayRef.hostElement, { inset: '0' });
+        }
+        else {
+            const viewDragService = inject(ViewDragService);
+            const workbenchComponentBounds = inject(WORKBENCH_COMPONENT_BOUNDS);
+            const document = inject(DOCUMENT);
+            effect(() => {
+                const visible = this.attached() && !viewDragService.dragging();
+                // Maintain position and size when hidden to prevent flickering when visible again and to support for virtual scrolling in dialog content.
+                if (!visible) {
+                    setStyle(this._overlayRef.overlayElement, { visibility: 'hidden' }); // Hide via `visibility` instead of `display` property to retain the size.
+                    return;
+                }
+                // IMPORTANT: Track host bounds only if visible to prevent flickering.
+                // Align dialog relative to contextual element if opened in non-peripheral area.
+                const hostBounds = this.invocationContext?.peripheral() === false ? this.invocationContext.bounds() : workbenchComponentBounds();
+                if (!hostBounds) {
+                    setStyle(this._overlayRef.overlayElement, { visibility: 'hidden' }); // Hide via `visibility` instead of `display` property to retain the size.
+                    return;
+                }
+                setStyle(this._overlayRef.overlayElement, { visibility: null });
+                // Center the dialog horizontally within the host bounds.
+                // Shift the overlay instead of fitting it to the host bounds, so the dialog can grow beyond host bounds
+                // if not specifying dialog size via a dialog handle.
+                const { left, top, width } = hostBounds;
+                const viewportCenter = document.documentElement.offsetWidth / 2;
+                const dialogCenter = left + width / 2;
+                const xDelta = -1 * (viewportCenter - dialogCenter);
+                setStyle(this._overlayRef.hostElement, {
+                    transform: `translateX(${Math.round(xDelta)}px) translateY(${Math.round(top)}px)`, // round offset to avoid blurry dialog
+                });
+            });
+        }
+    }
+    /**
+     * Computes if this dialog is blocked by another dialog.
+     */
+    computeBlocked() {
+        const dialogRegistry = inject(WorkbenchDialogRegistry);
+        const topInThisContext = dialogRegistry.top(this.id);
+        const topInInvocationContext = dialogRegistry.top(this.invocationContext?.elementId);
+        return computed(() => {
+            // Get the top dialog in the context spawned by this dialog.
+            if (topInThisContext()) {
+                return topInThisContext();
+            }
+            // Get the top dialog in the context this dialog was opened in.
+            if (topInInvocationContext() !== this) {
+                return topInInvocationContext();
+            }
+            return null;
+        });
+    }
+    blinkOnRequest() {
+        this._blink$
+            .pipe(switchMap(() => of(true).pipe(concatWith(of(false).pipe(delay(300))))), distinctUntilChanged(), takeUntilDestroyed())
+            .subscribe(this.blinking$);
+    }
+    /**
+     * Closes the dialog when the context element is destroyed.
+     */
+    closeOnHostDestroy() {
+        if (this.invocationContext) {
+            effect(() => {
+                if (this.invocationContext.destroyed()) {
+                    untracked(() => this.close());
+                }
+            });
+        }
+    }
+    /**
+     * Destroys this dialog and associated resources.
+     */
+    destroy() {
+        if (!this.destroyed()) {
+            this.injector.destroy();
+            this._overlayRef.dispose();
+        }
+    }
+}
+/** @inheritDoc */
+class ɵWorkbenchDialogSize {
+    _height = signal(undefined, { ...(ngDevMode ? { debugName: "_height" } : {}) });
+    _width = signal(undefined, { ...(ngDevMode ? { debugName: "_width" } : {}) });
+    _minHeight = signal(undefined, { ...(ngDevMode ? { debugName: "_minHeight" } : {}) });
+    _maxHeight = signal(undefined, { ...(ngDevMode ? { debugName: "_maxHeight" } : {}) });
+    _minWidth = signal(undefined, { ...(ngDevMode ? { debugName: "_minWidth" } : {}) });
+    _maxWidth = signal(undefined, { ...(ngDevMode ? { debugName: "_maxWidth" } : {}) });
+    /** @inheritDoc */
+    get height() {
+        return this._height;
+    }
+    /** @inheritDoc */
+    set height(height) {
+        untracked(() => this._height.set(height));
+    }
+    /** @inheritDoc */
+    get width() {
+        return this._width;
+    }
+    /** @inheritDoc */
+    set width(width) {
+        untracked(() => this._width.set(width));
+    }
+    /** @inheritDoc */
+    get minHeight() {
+        return this._minHeight;
+    }
+    /** @inheritDoc */
+    set minHeight(minHeight) {
+        untracked(() => this._minHeight.set(minHeight));
+    }
+    /** @inheritDoc */
+    get maxHeight() {
+        return this._maxHeight;
+    }
+    /** @inheritDoc */
+    set maxHeight(maxHeight) {
+        untracked(() => this._maxHeight.set(maxHeight));
+    }
+    /** @inheritDoc */
+    get minWidth() {
+        return this._minWidth;
+    }
+    /** @inheritDoc */
+    set minWidth(minWidth) {
+        untracked(() => this._minWidth.set(minWidth));
     }
     /** @inheritDoc */
-    get cssClass() {
-        return this._cssClass;
+    get maxWidth() {
+        return this._maxWidth;
     }
     /** @inheritDoc */
-    set cssClass(cssClass) {
-        untracked(() => this._cssClass.set(new Array().concat(this._options.cssClass ?? []).concat(cssClass)));
+    set maxWidth(maxWidth) {
+        untracked(() => this._maxWidth.set(maxWidth));
     }
-    /**
-     * Returns the position of the dialog in the dialog stack.
-     */
-    getPositionInDialogStack() {
-        return this._workbenchDialogRegistry.indexOf(this);
+}
+
+/*
+ * Copyright (c) 2018-2023 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/** @inheritDoc */
+class ɵWorkbenchDialogService {
+    _injector = inject(Injector);
+    _rootInjector = inject(ApplicationRef).injector;
+    _dialogRegistry = inject(WorkbenchDialogRegistry);
+    _document = inject(DOCUMENT);
+    _zone = inject(NgZone);
+    constructor() {
+        this.installServiceLifecycleLogger();
     }
     /** @inheritDoc */
-    blink() {
-        this._blink$.next();
+    async open(component, options) {
+        assertNotInReactiveContext(this.open, 'Call WorkbenchDialogService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+        // Ensure to run in Angular zone to display the dialog even when called from outside the Angular zone.
+        if (!NgZone.isInAngularZone()) {
+            return this._zone.run(() => this.open(component, options));
+        }
+        // Delay the opening of a context-modal dialog until all application-modal dialogs are closed.
+        // Otherwise, the context-modal dialog would overlap already opened application-modal dialogs.
+        const invocationContext = createDialogInvocationContext(options ?? {}, this._injector);
+        if (invocationContext) {
+            await this.waitUntilApplicationModalDialogsClosed();
+        }
+        // Create the dialog.
+        const dialog = this.createDialog(component, invocationContext, options ?? {});
+        this._dialogRegistry.register(dialog.id, dialog);
+        // Capture focused element to restore focus when closing the dialog.
+        const previouslyFocusedElement = this._document.activeElement instanceof HTMLElement ? this._document.activeElement : undefined;
+        try {
+            return await dialog.waitForClose();
+        }
+        finally {
+            this._dialogRegistry.unregister(dialog.id);
+            // Restore focus to previously focused element when closing the last dialog in the current context.
+            if (previouslyFocusedElement && !this._dialogRegistry.top(invocationContext?.elementId)()) {
+                previouslyFocusedElement.focus();
+            }
+        }
     }
     /**
-     * Creates a portal to render {@link WorkbenchDialogComponent} in the dialog's injection context.
+     * Creates the dialog handle.
      */
-    createPortal() {
-        const injector = Injector.create({
-            parent: this._options.injector ?? inject(Injector),
-            providers: [
-                { provide: ɵWorkbenchDialog, useValue: this },
-                { provide: WorkbenchDialog, useExisting: ɵWorkbenchDialog },
-                { provide: WORKBENCH_ELEMENT, useExisting: ɵWorkbenchDialog },
-                inject(WORKBENCH_DIALOG_CONTEXT, { optional: true }) ?? [],
-                this._options.providers ?? [],
-            ],
+    createDialog(component, invocationContext, options) {
+        // Construct the handle in an injection context that shares the dialog's lifecycle, allowing for automatic cleanup of effects and RxJS interop functions.
+        const dialogId = computeDialogId();
+        const dialogInjector = Injector.create({
+            parent: this._rootInjector, // use root injector to be independent of service construction context
+            providers: [],
+            name: `Workbench Dialog ${dialogId}`,
         });
-        inject(DestroyRef).onDestroy(() => injector.destroy());
-        return new ComponentPortal(WorkbenchDialogComponent, null, injector);
+        return runInInjectionContext(dialogInjector, () => new ɵWorkbenchDialog(dialogId, component, invocationContext, options));
     }
     /**
-     * Creates a dedicated overlay per dialog to place it on top of previously created overlays, such as dialogs, popups, dropdowns, etc.
+     * Returns a Promise that resolves when all application modal-dialogs are closed. If none are opened, the Promise resolves immediately.
      */
-    createOverlay() {
-        const overlay = inject(Overlay);
-        return overlay.create({
-            disposeOnNavigation: true, // dispose dialog on browser back/forward navigation
-            panelClass: ['wb-dialog-modality-context'],
-            positionStrategy: overlay.position().global(),
-            scrollStrategy: overlay.scrollStrategies.noop(),
-        });
+    async waitUntilApplicationModalDialogsClosed() {
+        // Use root injector to be independent of service construction context.
+        const injector = Injector.create({ parent: this._rootInjector, providers: [] });
+        await firstValueFrom(toObservable(this._dialogRegistry.top(), { injector }).pipe(filter(top => !top)));
+        injector.destroy();
     }
-    /**
-     * Restores focus when re-attaching this dialog.
-     */
-    restoreFocusOnAttach() {
-        effect(() => {
-            const attached = this.attached();
-            untracked(() => attached && this.focus());
-        });
+    installServiceLifecycleLogger() {
+        const logger = inject(Logger);
+        const workbenchElement = inject(WORKBENCH_ELEMENT, { optional: true });
+        logger.debug(() => `Constructing WorkbenchDialogService [context=${workbenchElement?.id}]`, LoggerNames.LIFECYCLE);
+        inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying WorkbenchDialogService [context=${workbenchElement?.id}]'`, LoggerNames.LIFECYCLE));
     }
-    /**
-     * Restores focus when unblocking this dialog.
-     */
-    restoreFocusOnUnblock() {
-        effect(() => {
-            const blocked = this.blockedBy();
-            untracked(() => !blocked && this.focus());
-        });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Computes the dialog's invocation context based on passsed options and injection context.
+ */
+function createDialogInvocationContext(options, injector) {
+    if (options.modality === 'application') {
+        return null;
+    }
+    return createInvocationContext(options.context && (typeof options.context === 'object' ? options.context.viewId : options.context), { injector });
+}
+
+/*
+ * Copyright (c) 2018-2023 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Enables the display of a component in a dialog.
+ *
+ * A dialog is a visual element for focused interaction with the user, such as prompting the user for input or confirming actions.
+ * The user can move and resize a dialog.
+ *
+ * Displayed on top of other content, a modal dialog blocks interaction with other parts of the application.
+ *
+ * ## Modality
+ * A dialog can be context-modal or application-modal. Context-modal blocks a specific part of the application, as specified by the context;
+ * application-modal blocks the workbench or browser viewport, based on {@link WorkbenchConfig.dialog.modalityScope}.
+ *
+ * ## Context
+ * A dialog can be bound to a context (e.g., part or view), defaulting to the calling context.
+ * The dialog is displayed only if the context is visible and closes when the context is disposed.
+ *
+ * ## Positioning
+ * A dialog is opened in the center of its context, if any, unless opened from the peripheral area.
+ *
+ * ## Stacking
+ * Dialogs are stacked per modality, with only the topmost dialog in each stack being interactive.
+ *
+ * ## Dialog Component
+ * The dialog component can inject the {@link WorkbenchDialog} handle to interact with the dialog, such as setting the title or closing the dialog.
+ * Inputs passed to the dialog are available as input properties in the dialog component.
+ *
+ * ## Dialog Header
+ * By default, the dialog displays the title and a close button in the header. Alternatively, the dialog supports the use of a custom header.
+ * To provide a custom header, add an Angular template to the HTML of the dialog component and decorate it with the `wbDialogHeader` directive.
+ *
+ * ```html
+ * <ng-template wbDialogHeader>
+ *   <app-dialog-header/>
+ * </ng-template>
+ * ```
+ *
+ * ## Dialog Footer
+ * A dialog has a default footer that displays actions defined in the HTML of the dialog component. An action is an Angular template decorated with
+ * the `wbDialogAction` directive. Multiple actions are supported, rendered in modeling order, and can be left- or right-aligned.
+ *
+ * ```html
+ * <!-- Checkbox -->
+ * <ng-template wbDialogAction align="start">
+ *   <label>
+ *     <input type="checkbox"/>
+ *     Do not ask me again
+ *   </label>
+ * </ng-template>
+ *
+ * <!-- OK Button -->
+ * <ng-template wbDialogAction align="end">
+ *   <button (click)="...">OK</button>
+ * </ng-template>
+ *
+ * <!-- Cancel Button -->
+ * <ng-template wbDialogAction align="end">
+ *   <button (click)="...">Cancel</button>
+ * </ng-template>
+ * ```
+ *
+ * Alternatively, the dialog supports the use of a custom footer. To provide a custom footer, add an Angular template to the HTML of the dialog component and
+ * decorate it with the `wbDialogFooter` directive.
+ *
+ * ```html
+ * <ng-template wbDialogFooter>
+ *   <app-dialog-footer/>
+ * </ng-template>
+ * ```
+ *
+ * ## Styling
+ * The following CSS variables can be set to customize the default look of a dialog.
+ *
+ * - `--sci-workbench-dialog-padding`
+ * - `--sci-workbench-dialog-header-height`
+ * - `--sci-workbench-dialog-header-background-color`
+ * - `--sci-workbench-dialog-title-font-family`
+ * - `--sci-workbench-dialog-title-font-weight`
+ * - `--sci-workbench-dialog-title-font-size`
+ * - `--sci-workbench-dialog-title-align`
+ */
+class WorkbenchDialogService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, providedIn: 'root', useExisting: ɵWorkbenchDialogService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useExisting: ɵWorkbenchDialogService }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2023 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+class MessageBoxFooterComponent {
+    actions = input.required({ ...(ngDevMode ? { debugName: "actions" } : {}) });
+    severity = input.required({ ...(ngDevMode ? { debugName: "severity" } : {}) });
+    action = output();
+    preferredSizeChange = output();
+    _actionButtons = viewChildren('action_button', { ...(ngDevMode ? { debugName: "_actionButtons" } : {}) });
+    constructor() {
+        void this.emitPreferredSize();
     }
-    /**
-     * Monitors attachment of the host element.
-     */
-    monitorHostElementAttached() {
-        if (this.invocationContext) {
-            return this.invocationContext.attached;
-        }
-        if (this._workbenchConfig.dialog?.modalityScope === 'viewport') {
-            return computed(() => true);
-        }
-        const workbenchComponentRef = inject(WORKBENCH_COMPONENT_REF);
-        return computed(() => !!workbenchComponentRef());
+    insertionSortOrderFn = () => 0;
+    onAction(key) {
+        this.action.emit(key);
     }
-    /**
-     * Binds this dialog to its workbench host element, displaying it only when the host element is attached.
-     *
-     * Dialogs opened in non-peripheral area are displayed in the center of the host.
-     */
-    bindToHostElement() {
-        if (!this.invocationContext && this._workbenchConfig.dialog?.modalityScope === 'viewport') {
-            setStyle(this._overlayRef.hostElement, { inset: '0' });
+    onArrowKey(index, direction) {
+        const actionButtonCount = this._actionButtons().length;
+        const newIndex = (direction === 'left' ? index - 1 : index + 1);
+        this._actionButtons()[(newIndex + actionButtonCount) % actionButtonCount].nativeElement.focus();
+    }
+    async emitPreferredSize() {
+        const host = inject(ElementRef).nativeElement;
+        host.classList.add('calculating-min-width');
+        try {
+            // Wait for the CSS class to take effect, then wait an animation frame to avoid the error: "ResizeObserver loop completed with undelivered notifications".
+            await firstValueFrom(fromResize$(host).pipe(observeOn(animationFrameScheduler)));
+            this.preferredSizeChange.emit(host.offsetWidth);
         }
-        else {
-            const viewDragService = inject(ViewDragService);
-            const workbenchComponentBounds = inject(WORKBENCH_COMPONENT_BOUNDS);
-            const document = inject(DOCUMENT);
-            effect(() => {
-                const visible = this.attached() && !viewDragService.dragging();
-                // Maintain position and size when hidden to prevent flickering when visible again and to support for virtual scrolling in dialog content.
-                if (!visible) {
-                    setStyle(this._overlayRef.overlayElement, { visibility: 'hidden' }); // Hide via `visibility` instead of `display` property to retain the size.
-                    return;
-                }
-                // IMPORTANT: Track host bounds only if visible to prevent flickering.
-                // Align dialog relative to contextual element if opened in non-peripheral area.
-                const hostBounds = this.invocationContext?.peripheral() === false ? this.invocationContext.bounds() : workbenchComponentBounds();
-                if (!hostBounds) {
-                    setStyle(this._overlayRef.overlayElement, { visibility: 'hidden' }); // Hide via `visibility` instead of `display` property to retain the size.
-                    return;
-                }
-                setStyle(this._overlayRef.overlayElement, { visibility: null });
-                // Center the dialog horizontally within the host bounds.
-                // Shift the overlay instead of fitting it to the host bounds, so the dialog can grow beyond host bounds
-                // if not specifying dialog size via a dialog handle.
-                const { left, top, width } = hostBounds;
-                const viewportCenter = document.documentElement.offsetWidth / 2;
-                const dialogCenter = left + width / 2;
-                const xDelta = -1 * (viewportCenter - dialogCenter);
-                setStyle(this._overlayRef.hostElement, {
-                    transform: `translateX(${Math.round(xDelta)}px) translateY(${Math.round(top)}px)`, // round offset to avoid blurry dialog
-                });
-            });
+        finally {
+            host.classList.remove('calculating-min-width');
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MessageBoxFooterComponent, isStandalone: true, selector: "wb-message-box-footer", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action", preferredSizeChange: "preferredSizeChange" }, host: { properties: { "attr.data-severity": "severity()" } }, viewQueries: [{ propertyName: "_actionButtons", predicate: ["action_button"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (action of actions() | keyvalue:insertionSortOrderFn; track action.key) {\n  <button #action_button\n          (click)=\"onAction(action.key)\"\n          (keydown.arrowLeft)=\"onArrowKey($index, 'left')\"\n          (keydown.arrowRight)=\"onArrowKey($index, 'right')\"\n          [attr.data-action]=\"action.key\"\n          class=\"action e2e-action\">\n    {{(action.value | wbText)()}}\n  </button>\n\n  @if (!$last) {\n    <span class=\"divider\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:flex;height:3em;background-color:var(--sci-color-background-secondary);color:var(--sci-color-text)}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host.calculating-min-width{position:absolute}:host>button.action:is(button,#sci-reset){all:unset;flex:1;margin:2px;border:1px solid transparent;border-radius:var(--sci-corner-small);transition:border-color ease-in-out .15s;cursor:var(--sci-workbench-messagebox-action-cursor);-webkit-user-select:none;user-select:none;text-align:center;min-width:7.5em;padding-inline:.5em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button.action:is(button,#sci-reset):focus,:host>button.action:is(button,#sci-reset):active{outline:none;color:var(--\\275message-box-severity-color);border-color:var(--\\275message-box-severity-color)}:host>button.action:is(button,#sci-reset):hover{background-color:var(--sci-workbench-messagebox-action-background-color-hover)}:host>span.divider{width:1px;background-color:var(--sci-color-border)}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wb-message-box-footer', imports: [
+                        KeyValuePipe,
+                        TextPipe,
+                    ], host: {
+                        '[attr.data-severity]': 'severity()',
+                    }, template: "@for (action of actions() | keyvalue:insertionSortOrderFn; track action.key) {\n  <button #action_button\n          (click)=\"onAction(action.key)\"\n          (keydown.arrowLeft)=\"onArrowKey($index, 'left')\"\n          (keydown.arrowRight)=\"onArrowKey($index, 'right')\"\n          [attr.data-action]=\"action.key\"\n          class=\"action e2e-action\">\n    {{(action.value | wbText)()}}\n  </button>\n\n  @if (!$last) {\n    <span class=\"divider\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:flex;height:3em;background-color:var(--sci-color-background-secondary);color:var(--sci-color-text)}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host.calculating-min-width{position:absolute}:host>button.action:is(button,#sci-reset){all:unset;flex:1;margin:2px;border:1px solid transparent;border-radius:var(--sci-corner-small);transition:border-color ease-in-out .15s;cursor:var(--sci-workbench-messagebox-action-cursor);-webkit-user-select:none;user-select:none;text-align:center;min-width:7.5em;padding-inline:.5em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button.action:is(button,#sci-reset):focus,:host>button.action:is(button,#sci-reset):active{outline:none;color:var(--\\275message-box-severity-color);border-color:var(--\\275message-box-severity-color)}:host>button.action:is(button,#sci-reset):hover{background-color:var(--sci-workbench-messagebox-action-background-color-hover)}:host>span.divider{width:1px;background-color:var(--sci-color-border)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: true }] }], action: [{ type: i0.Output, args: ["action"] }], preferredSizeChange: [{ type: i0.Output, args: ["preferredSizeChange"] }], _actionButtons: [{ type: i0.ViewChildren, args: ['action_button', { isSignal: true }] }] } });
+
+/*
+ * Copyright (c) 2018-2023 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Use this directive to replace the default dialog footer that renders actions contributed via the {@link WorkbenchDialogActionDirective} directive.
+ *
+ * The host element of this modeling directive must be a <ng-template>. The footer shares the lifecycle of the host element.
+ *
+ * **Example:**
+ * ```html
+ * <ng-template wbDialogFooter>
+ *   <app-dialog-footer/>
+ * </ng-template>
+ * ```
+ */
+class WorkbenchDialogFooterDirective {
     /**
-     * Computes if this dialog is blocked by another dialog.
-     */
-    computeBlocked() {
-        const dialogRegistry = inject(WorkbenchDialogRegistry);
-        const topInThisContext = dialogRegistry.top(this.id);
-        const topInInvocationContext = dialogRegistry.top(this.invocationContext?.elementId);
-        return computed(() => {
-            // Get the top dialog in the context spawned by this dialog.
-            if (topInThisContext()) {
-                return topInThisContext();
-            }
-            // Get the top dialog in the context this dialog was opened in.
-            if (topInInvocationContext() !== this) {
-                return topInInvocationContext();
-            }
-            return null;
-        });
-    }
-    blinkOnRequest() {
-        this._blink$
-            .pipe(switchMap(() => of(true).pipe(concatWith(of(false).pipe(delay(300))))), distinctUntilChanged(), takeUntilDestroyed())
-            .subscribe(this.blinking$);
-    }
-    /**
-     * Closes the dialog when the context element is destroyed.
+     * Specifies if to display a visual separator between the dialog content and this footer.
+     * Defaults to `true`.
      */
-    closeOnHostDestroy() {
-        if (this.invocationContext) {
-            effect(() => {
-                if (this.invocationContext.destroyed()) {
-                    untracked(() => this.close());
-                }
-            });
-        }
+    divider = input(undefined, { ...(ngDevMode ? { debugName: "divider" } : {}), transform: booleanAttribute });
+    template = inject(TemplateRef);
+    _footer;
+    constructor() {
+        const dialog = inject(ɵWorkbenchDialog);
+        // Defer registering footer to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
+        asapScheduler.schedule(() => this._footer = dialog.registerFooter(this));
+        // Defer disposing footer to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
+        inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._footer?.dispose()));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: WorkbenchDialogFooterDirective, isStandalone: true, selector: "ng-template[wbDialogFooter]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogFooterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[wbDialogFooter]' }]
+        }], ctorParameters: () => [], propDecorators: { divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
+
+/*
+ * Copyright (c) 2018-2023 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Use this directive to replace the default dialog header that displays the title and a close button.
+ *
+ * The host element of this modeling directive must be a <ng-template>. The header shares the lifecycle of the host element.
+ *
+ * **Example:**
+ * ```html
+ * <ng-template wbDialogHeader>
+ *   <app-dialog-header/>
+ * </ng-template>
+ * ```
+ */
+class WorkbenchDialogHeaderDirective {
     /**
-     * Destroys this dialog and associated resources.
+     * Specifies if to display a visual separator between this header and the dialog content.
+     * Defaults to `true`.
      */
-    destroy() {
-        if (!this.destroyed()) {
-            this.injector.destroy();
-            this._overlayRef.dispose();
-        }
+    divider = input(undefined, { ...(ngDevMode ? { debugName: "divider" } : {}), transform: booleanAttribute });
+    template = inject(TemplateRef);
+    _header;
+    constructor() {
+        const dialog = inject(ɵWorkbenchDialog);
+        // Defer registering header to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
+        asapScheduler.schedule(() => this._header = dialog.registerHeader(this));
+        // Defer disposing header to avoid `ExpressionChangedAfterItHasBeenCheckedError`.
+        inject(DestroyRef).onDestroy(() => asapScheduler.schedule(() => this._header?.dispose()));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: WorkbenchDialogHeaderDirective, isStandalone: true, selector: "ng-template[wbDialogHeader]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-/** @inheritDoc */
-class ɵWorkbenchDialogSize {
-    _height = signal(undefined, { ...(ngDevMode ? { debugName: "_height" } : {}) });
-    _width = signal(undefined, { ...(ngDevMode ? { debugName: "_width" } : {}) });
-    _minHeight = signal(undefined, { ...(ngDevMode ? { debugName: "_minHeight" } : {}) });
-    _maxHeight = signal(undefined, { ...(ngDevMode ? { debugName: "_maxHeight" } : {}) });
-    _minWidth = signal(undefined, { ...(ngDevMode ? { debugName: "_minWidth" } : {}) });
-    _maxWidth = signal(undefined, { ...(ngDevMode ? { debugName: "_maxWidth" } : {}) });
-    /** @inheritDoc */
-    get height() {
-        return this._height;
-    }
-    /** @inheritDoc */
-    set height(height) {
-        untracked(() => this._height.set(height));
-    }
-    /** @inheritDoc */
-    get width() {
-        return this._width;
-    }
-    /** @inheritDoc */
-    set width(width) {
-        untracked(() => this._width.set(width));
-    }
-    /** @inheritDoc */
-    get minHeight() {
-        return this._minHeight;
-    }
-    /** @inheritDoc */
-    set minHeight(minHeight) {
-        untracked(() => this._minHeight.set(minHeight));
-    }
-    /** @inheritDoc */
-    get maxHeight() {
-        return this._maxHeight;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchDialogHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[wbDialogHeader]' }]
+        }], ctorParameters: () => [], propDecorators: { divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
+
+/*
+ * Copyright (c) 2018-2023 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+class MessageBoxHeaderComponent {
+    title = input(undefined, { ...(ngDevMode ? { debugName: "title" } : {}) });
+    severity = input.required({ ...(ngDevMode ? { debugName: "severity" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MessageBoxHeaderComponent, isStandalone: true, selector: "wb-message-box-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-severity": "severity()" } }, ngImport: i0, template: "@if (title()) {\n  <span class=\"title e2e-title\">{{(title() | wbText)()}}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:grid;border-top:var(--sci-workbench-messagebox-severity-indicator-size) solid var(--\\275message-box-severity-color);padding-inline:var(--sci-workbench-messagebox-padding);padding-top:var(--sci-workbench-messagebox-padding);-webkit-user-select:none;user-select:none}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host>span.title{word-break:break-word;white-space:pre-line;font-family:var(--sci-workbench-messagebox-title-font-family),sans-serif;font-size:var(--sci-workbench-messagebox-title-font-size);font-weight:var(--sci-workbench-messagebox-title-font-weight);text-align:var(--sci-workbench-messagebox-title-align)}\n"], dependencies: [{ kind: "pipe", type: TextPipe, name: "wbText" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MessageBoxHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wb-message-box-header', imports: [
+                        TextPipe,
+                    ], host: {
+                        '[attr.data-severity]': 'severity()',
+                    }, template: "@if (title()) {\n  <span class=\"title e2e-title\">{{(title() | wbText)()}}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--\\275message-box-severity-color: initial;display:grid;border-top:var(--sci-workbench-messagebox-severity-indicator-size) solid var(--\\275message-box-severity-color);padding-inline:var(--sci-workbench-messagebox-padding);padding-top:var(--sci-workbench-messagebox-padding);-webkit-user-select:none;user-select:none}:host[data-severity=info]{--\\275message-box-severity-color: var(--sci-color-accent)}:host[data-severity=warn]{--\\275message-box-severity-color: var(--sci-color-notice)}:host[data-severity=error]{--\\275message-box-severity-color: var(--sci-color-negative)}:host>span.title{word-break:break-word;white-space:pre-line;font-family:var(--sci-workbench-messagebox-title-font-family),sans-serif;font-size:var(--sci-workbench-messagebox-title-font-size);font-weight:var(--sci-workbench-messagebox-title-font-weight);text-align:var(--sci-workbench-messagebox-title-align)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: true }] }] } });
+
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Tests if the object is of the specified type.
+ */
+class TypeofPipe {
+    transform(object, type) {
+        return typeof object === type;
     }
-    /** @inheritDoc */
-    set maxHeight(maxHeight) {
-        untracked(() => this._maxHeight.set(maxHeight));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, isStandalone: true, name: "wbTypeof" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TypeofPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'wbTypeof' }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2023 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Renders the workbench message box.
+ *
+ * This component is designed to be opened in a workbench dialog.
+ */
+class WorkbenchMessageBoxComponent {
+    message = input.required({ ...(ngDevMode ? { debugName: "message" } : {}), transform: nullIfEmptyMessage });
+    options = input(undefined, { ...(ngDevMode ? { debugName: "options" } : {}) });
+    _dialog = inject(ɵWorkbenchDialog);
+    empty = signal(false, { ...(ngDevMode ? { debugName: "empty" } : {}) });
+    constructor() {
+        this._dialog.closable = false;
+        this._dialog.resizable = false;
+        this._dialog.padding = false;
+        // Limit the maximum messagebox width if text message to break the message.
+        effect(() => {
+            if (typeof this.message() === 'string' || this.message() === null) {
+                this._dialog.size.maxWidth = 'var(--sci-workbench-messagebox-max-width)';
+            }
+        });
     }
-    /** @inheritDoc */
-    get minWidth() {
-        return this._minWidth;
+    onAction(action) {
+        this._dialog.close(action);
     }
-    /** @inheritDoc */
-    set minWidth(minWidth) {
-        untracked(() => this._minWidth.set(minWidth));
+    onEscape() {
+        if ('cancel' in (this.options()?.actions ?? {})) {
+            this._dialog.close('cancel');
+        }
     }
-    /** @inheritDoc */
-    get maxWidth() {
-        return this._maxWidth;
+    onFooterPreferredSizeChange(preferredSize) {
+        this._dialog.size.minWidth = `${preferredSize}px`;
     }
-    /** @inheritDoc */
-    set maxWidth(maxWidth) {
-        untracked(() => this._maxWidth.set(maxWidth));
+    onContentDimensionChange(dimension) {
+        this.empty.set(!dimension.offsetHeight);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: WorkbenchMessageBoxComponent, isStandalone: true, selector: "wb-message-box", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "attr.tabindex": "-1", "class.empty": "empty()", "class.content-selectable": "options()?.contentSelectable", "class.has-title": "!!this.options()?.title" } }, ngImport: i0, template: "@let options = this.options() ?? {};\n<ng-template wbDialogHeader [divider]=\"false\">\n  <wb-message-box-header [title]=\"options.title\" [severity]=\"options.severity ?? 'info'\"/>\n</ng-template>\n\n@let message = this.message();\n<div class=\"slot e2e-slot\" [class.text]=\"message | wbTypeof:'string'\" sciDimension (sciDimensionChange)=\"onContentDimensionChange($event)\">\n  @if (message | wbTypeof:'string') {\n    {{($any(message) | wbText)()}}\n  } @else {\n    <ng-container *ngComponentOutlet=\"message; inputs: options.inputs\"/>\n  }\n</div>\n\n<ng-template wbDialogFooter>\n  <wb-message-box-footer [actions]=\"options.actions ?? {ok: '%workbench.ok.action'}\"\n                         [severity]=\"options.severity ?? 'info'\"\n                         (action)=\"onAction($event)\"\n                         (keydown.escape)=\"onEscape()\"\n                         (preferredSizeChange)=\"onFooterPreferredSizeChange($event)\"/>\n</ng-template>\n", styles: [":host{display:grid;outline:none;padding-inline:var(--sci-workbench-messagebox-padding);padding-bottom:var(--sci-workbench-messagebox-padding)}:host.has-title:not(.empty){padding-top:var(--sci-workbench-messagebox-padding)}:host:not(.content-selectable){-webkit-user-select:none;user-select:none}:host>div.slot.text{word-break:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: SciDimensionDirective, selector: "[sciDimension]", inputs: ["emitOutsideAngular"], outputs: ["sciDimensionChange"] }, { kind: "directive", type: WorkbenchDialogHeaderDirective, selector: "ng-template[wbDialogHeader]", inputs: ["divider"] }, { kind: "directive", type: WorkbenchDialogFooterDirective, selector: "ng-template[wbDialogFooter]", inputs: ["divider"] }, { kind: "component", type: MessageBoxHeaderComponent, selector: "wb-message-box-header", inputs: ["title", "severity"] }, { kind: "component", type: MessageBoxFooterComponent, selector: "wb-message-box-footer", inputs: ["actions", "severity"], outputs: ["action", "preferredSizeChange"] }, { kind: "pipe", type: TypeofPipe, name: "wbTypeof" }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wb-message-box', imports: [
+                        NgComponentOutlet,
+                        SciDimensionDirective,
+                        WorkbenchDialogHeaderDirective,
+                        WorkbenchDialogFooterDirective,
+                        MessageBoxHeaderComponent,
+                        MessageBoxFooterComponent,
+                        TypeofPipe,
+                        TextPipe,
+                    ], host: {
+                        // Ensure host element to be focusable in order to close the message box on Escape keystroke.
+                        '[attr.tabindex]': '-1',
+                        '[class.empty]': 'empty()',
+                        '[class.content-selectable]': 'options()?.contentSelectable',
+                        '[class.has-title]': '!!this.options()?.title',
+                        '(keydown.escape)': 'onEscape()',
+                    }, template: "@let options = this.options() ?? {};\n<ng-template wbDialogHeader [divider]=\"false\">\n  <wb-message-box-header [title]=\"options.title\" [severity]=\"options.severity ?? 'info'\"/>\n</ng-template>\n\n@let message = this.message();\n<div class=\"slot e2e-slot\" [class.text]=\"message | wbTypeof:'string'\" sciDimension (sciDimensionChange)=\"onContentDimensionChange($event)\">\n  @if (message | wbTypeof:'string') {\n    {{($any(message) | wbText)()}}\n  } @else {\n    <ng-container *ngComponentOutlet=\"message; inputs: options.inputs\"/>\n  }\n</div>\n\n<ng-template wbDialogFooter>\n  <wb-message-box-footer [actions]=\"options.actions ?? {ok: '%workbench.ok.action'}\"\n                         [severity]=\"options.severity ?? 'info'\"\n                         (action)=\"onAction($event)\"\n                         (keydown.escape)=\"onEscape()\"\n                         (preferredSizeChange)=\"onFooterPreferredSizeChange($event)\"/>\n</ng-template>\n", styles: [":host{display:grid;outline:none;padding-inline:var(--sci-workbench-messagebox-padding);padding-bottom:var(--sci-workbench-messagebox-padding)}:host.has-title:not(.empty){padding-top:var(--sci-workbench-messagebox-padding)}:host:not(.content-selectable){-webkit-user-select:none;user-select:none}:host>div.slot.text{word-break:break-word;white-space:pre-line;text-align:var(--sci-workbench-messagebox-text-align)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+function nullIfEmptyMessage(message) {
+    return message !== '' ? message : null;
 }
 
 /*
@@ -11624,95 +11646,103 @@ class ɵWorkbenchDialogSize {
  * SPDX-License-Identifier: EPL-2.0
  */
 /** @inheritDoc */
-class ɵWorkbenchDialogService {
-    _injector = inject(Injector);
-    _rootInjector = inject(ApplicationRef).injector;
-    _dialogRegistry = inject(WorkbenchDialogRegistry);
-    _document = inject(DOCUMENT);
+class ɵWorkbenchMessageBoxService {
+    _workbenchDialogService = inject(WorkbenchDialogService);
     _zone = inject(NgZone);
     constructor() {
         this.installServiceLifecycleLogger();
     }
-    /** @inheritDoc */
-    async open(component, options) {
-        assertNotInReactiveContext(this.open, 'Call WorkbenchDialogService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
-        // Ensure to run in Angular zone to display the dialog even when called from outside the Angular zone.
-        if (!NgZone.isInAngularZone()) {
-            return this._zone.run(() => this.open(component, options));
-        }
-        // Delay the opening of a context-modal dialog until all application-modal dialogs are closed.
-        // Otherwise, the context-modal dialog would overlap already opened application-modal dialogs.
-        const invocationContext = createDialogInvocationContext(options ?? {}, this._injector);
-        if (invocationContext) {
-            await this.waitUntilApplicationModalDialogsClosed();
-        }
-        // Create the dialog.
-        const dialog = this.createDialog(component, invocationContext, options ?? {});
-        this._dialogRegistry.register(dialog.id, dialog);
-        // Capture focused element to restore focus when closing the dialog.
-        const previouslyFocusedElement = this._document.activeElement instanceof HTMLElement ? this._document.activeElement : undefined;
-        try {
-            return await dialog.waitForClose();
-        }
-        finally {
-            this._dialogRegistry.unregister(dialog.id);
-            // Restore focus to previously focused element when closing the last dialog in the current context.
-            if (previouslyFocusedElement && !this._dialogRegistry.top(invocationContext?.elementId)()) {
-                previouslyFocusedElement.focus();
-            }
-        }
-    }
-    /**
-     * Creates the dialog handle.
-     */
-    createDialog(component, invocationContext, options) {
-        // Construct the handle in an injection context that shares the dialog's lifecycle, allowing for automatic cleanup of effects and RxJS interop functions.
-        const dialogId = computeDialogId();
-        const dialogInjector = Injector.create({
-            parent: this._rootInjector, // use root injector to be independent of service construction context
-            providers: [],
-            name: `Workbench Dialog ${dialogId}`,
-        });
-        return runInInjectionContext(dialogInjector, () => new ɵWorkbenchDialog(dialogId, component, invocationContext, options));
-    }
     /**
-     * Returns a Promise that resolves when all application modal-dialogs are closed. If none are opened, the Promise resolves immediately.
+     * @inheritDoc
      */
-    async waitUntilApplicationModalDialogsClosed() {
-        // Use root injector to be independent of service construction context.
-        const injector = Injector.create({ parent: this._rootInjector, providers: [] });
-        await firstValueFrom(toObservable(this._dialogRegistry.top(), { injector }).pipe(filter(top => !top)));
-        injector.destroy();
+    async open(message, options) {
+        assertNotInReactiveContext(this.open, 'Call WorkbenchMessageBoxService.open() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+        // Ensure to run in Angular zone to display the message box even if called from outside the Angular zone, e.g. from an error handler.
+        if (!NgZone.isInAngularZone()) {
+            return this._zone.run(() => this.open(message, options));
+        }
+        return (await this._workbenchDialogService.open(WorkbenchMessageBoxComponent, {
+            inputs: { message, options },
+            modality: options?.modality,
+            injector: options?.injector,
+            providers: options?.providers,
+            cssClass: options?.cssClass,
+            context: options?.context,
+            animate: true,
+        }));
     }
     installServiceLifecycleLogger() {
         const logger = inject(Logger);
         const workbenchElement = inject(WORKBENCH_ELEMENT, { optional: true });
-        logger.debug(() => `Constructing WorkbenchDialogService [context=${workbenchElement?.id}]`, LoggerNames.LIFECYCLE);
-        inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying WorkbenchDialogService [context=${workbenchElement?.id}]'`, LoggerNames.LIFECYCLE));
+        logger.debug(() => `Constructing WorkbenchMessageBoxService [context=${workbenchElement?.id}]`, LoggerNames.LIFECYCLE);
+        inject(DestroyRef).onDestroy(() => logger.debug(() => `Destroying WorkbenchMessageBoxService [context=${workbenchElement?.id}]'`, LoggerNames.LIFECYCLE));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ɵWorkbenchMessageBoxService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
+
 /**
- * Computes the dialog's invocation context based on passsed options and injection context.
+ * Provides a standardized dialog for presenting a message to the user, such as an info, warning or alert,
+ * or for prompting the user for confirmation. The message can be plain text or a component, allowing for
+ * structured content or input prompts.
+ *
+ * Displayed on top of other content, a modal message box blocks interaction with other parts of the application.
+ *
+ * ## Modality
+ * A message box can be context-modal or application-modal. Context-modal blocks a specific part of the application, as specified by the context;
+ * application-modal blocks the workbench or browser viewport, based on {@link WorkbenchConfig.dialog.modalityScope}.
+ *
+ * ## Context
+ * A message box can be bound to a context (e.g., part or view), defaulting to the calling context.
+ * The message box is displayed only if the context is visible and closes when the context is disposed.
+ *
+ * ## Positioning
+ * A message box is opened in the center of its context, if any, unless opened from the peripheral area.
+ *
+ * ## Stacking
+ * Message boxes are stacked per modality, with only the topmost message box in each stack being interactive.
+ *
+ * ## Styling
+ * The following CSS variables can be set to customize the default look of a message box.
+ *
+ * - `--sci-workbench-messagebox-max-width`
+ * - `--sci-workbench-messagebox-severity-indicator-size`
+ * - `--sci-workbench-messagebox-padding`
+ * - `--sci-workbench-messagebox-text-align`
+ * - `--sci-workbench-messagebox-title-align`
+ * - `--sci-workbench-messagebox-title-font-family`
+ * - `--sci-workbench-messagebox-title-font-weight`
+ * - `--sci-workbench-messagebox-title-font-size`
  */
-function createDialogInvocationContext(options, injector) {
-    if (options.modality === 'application') {
-        return null;
-    }
-    return createInvocationContext(options.context && (typeof options.context === 'object' ? options.context.viewId : options.context), { injector });
+class WorkbenchMessageBoxService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: WorkbenchMessageBoxService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useExisting: ɵWorkbenchMessageBoxService }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
 /**
- * Provides {@link WorkbenchDialogService} for dependency injection.
+ * Provides {@link WorkbenchMessageBoxService} for dependency injection.
  */
-function provideWorkbenchDialogService() {
+function provideWorkbenchMessageBoxService() {
     return [
-        ɵWorkbenchDialogService,
-        { provide: WorkbenchDialogService, useExisting: ɵWorkbenchDialogService },
+        ɵWorkbenchMessageBoxService,
+        { provide: WorkbenchMessageBoxService, useExisting: ɵWorkbenchMessageBoxService },
     ];
 }
 
@@ -12694,6 +12724,11 @@ class ViewTabComponent {
         event.stopPropagation();
         event.preventDefault();
     }
+    onMouseDown(event) {
+        if (event.button === 1) { // primary aux button
+            event.preventDefault(); // prevent middle-click scrolling; necessary for aux click to work
+        }
+    }
     onDragStart(event) {
         if (!event.dataTransfer) {
             return;
@@ -12758,7 +12793,7 @@ class ViewTabComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ViewTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ViewTabComponent, isStandalone: true, selector: "wb-view-tab", inputs: { view: { classPropertyName: "view", publicName: "viewId", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()", "auxclick": "onAuxClick($event)", "contextmenu": "onContextmenu($event)", "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" }, properties: { "attr.data-viewid": "view().id", "attr.data-active": "view().active() ? '' : null", "attr.data-dirty": "view().dirty() ? '' : null", "attr.data-focus-within-view": "view().focused() ? '' : null", "attr.draggable": "true", "attr.tabindex": "-1", "class.view-drag": "viewDragService.dragging()", "class": "view().classList.asList()", "style.--sci-workbench-tab-title-offset-right": "viewTitleOffsetRight()" } }, ngImport: i0, template: "<!-- IMPORTANT: THIS HTML FILE IS ALSO USED BY `ViewTabDragImageComponent` -->\n\n@if (view().active()) {\n  <div class=\"corner-radius start\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n<div class=\"content\">\n  <ng-container *cdkPortalOutlet=\"viewTabContentPortal()\"/>\n</div>\n\n@if (view().active()) {\n  <div class=\"corner-radius end\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n@if (view().closable()) {\n  <button (click)=\"onClose($event)\"\n          [title]=\"('%workbench.close_tab.tooltip;close_others_modifier=Alt' | wbText)()\"\n          [disabled]=\"!view().isClosable()\"\n          class=\"close e2e-close\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:grid;align-items:center;padding-left:var(--sci-workbench-tab-padding-inline);padding-right:var(--sci-workbench-tab-padding-inline);position:relative;-webkit-user-select:none;user-select:none;cursor:var(--sci-workbench-tab-cursor);box-sizing:border-box;outline:none;border-top:var(--sci-workbench-tab-border-top-width) solid transparent;border-left:var(--sci-workbench-tab-border-width) solid transparent;border-right:var(--sci-workbench-tab-border-width) solid transparent;border-top-left-radius:var(--sci-workbench-tab-border-radius);border-top-right-radius:var(--sci-workbench-tab-border-radius)}:host[data-active]{cursor:default;border-left-color:var(--sci-workbench-tab-border-color);border-right-color:var(--sci-workbench-tab-border-color);border-top-color:var(--sci-workbench-tab-border-color);background-color:var(--sci-workbench-view-background-color)}wb-part[data-peripheral] :host[data-active]{background-color:var(--sci-workbench-view-peripheral-background-color)}:host[data-active]>div.content{color:var(--sci-workbench-tab-text-color-active)}:host[data-active][data-focus-within-view]>div.content{color:var(--sci-workbench-part-active-tab-text-color-active)}:host>div.content{display:inline-grid;font-family:var(--sci-workbench-tab-font-family),sans-serif;font-size:var(--sci-workbench-tab-font-size);font-weight:var(--sci-workbench-tab-font-weight);min-width:var(--sci-workbench-tab-min-width);max-width:var(--sci-workbench-tab-max-width);isolation:isolate;transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor)}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host>button.close:is(button,#sci-reset){position:absolute;right:calc(var(--sci-workbench-tab-padding-inline) - .125em);visibility:hidden;padding:.125em;border-radius:var(--sci-corner-small);transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host[data-active]>button.close:is(button,#sci-reset),:host:hover:not(.view-drag)>button.close:is(button,#sci-reset){visibility:visible}@container style(--sci-workbench-tab-background-color-hover){:host:hover:not([data-active]):not(.view-drag):before{content:\"\";position:absolute;place-self:start center;box-sizing:border-box;height:calc(100% - var(--sci-workbench-tab-padding-block-hover) - var(--sci-workbench-part-bar-border-bottom-width));width:calc(100% - var(--sci-workbench-tab-padding-inline-hover) + 2 * var(--sci-workbench-tab-border-width));background-color:var(--sci-workbench-tab-background-color-hover);border:var(--sci-workbench-tab-border-width) solid var(--sci-workbench-tab-background-color-hover);border-radius:var(--sci-workbench-tab-border-radius);pointer-events:none}:host:hover:not([data-active]):not(.view-drag)>button.close:is(button,#sci-reset):not(:disabled):hover{background-color:color-mix(in srgb,var(--sci-workbench-tab-background-color-hover) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}}:host>div.corner-radius{height:var(--sci-workbench-tab-border-radius);width:var(--sci-workbench-tab-border-radius);overflow:hidden;position:absolute;bottom:0}:host>div.corner-radius>div.circle{position:absolute;top:calc(-2 * var(--sci-workbench-tab-border-radius));width:calc(2 * var(--sci-workbench-tab-border-radius));height:calc(2 * var(--sci-workbench-tab-border-radius));border:var(--sci-workbench-tab-border-radius) solid var(--sci-workbench-view-background-color);border-radius:50%;box-shadow:inset 0 0 0 var(--sci-workbench-tab-border-width) var(--sci-workbench-tab-border-color);box-sizing:content-box}wb-part[data-peripheral] :host>div.corner-radius>div.circle{border-color:var(--sci-workbench-view-peripheral-background-color)}:host>div.corner-radius.start{left:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.start>div.circle{left:calc(-2 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end{right:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end>div.circle{right:calc(-2 * var(--sci-workbench-tab-border-radius))}@container viewtab (height >= 3.5rem){:host>button.close:is(button,#sci-reset){top:5px;right:5px}}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ViewTabComponent, isStandalone: true, selector: "wb-view-tab", inputs: { view: { classPropertyName: "view", publicName: "viewId", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()", "auxclick": "onAuxClick($event)", "contextmenu": "onContextmenu($event)", "mousedown": "onMouseDown($event)", "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" }, properties: { "attr.data-viewid": "view().id", "attr.data-active": "view().active() ? '' : null", "attr.data-dirty": "view().dirty() ? '' : null", "attr.data-focus-within-view": "view().focused() ? '' : null", "attr.draggable": "true", "attr.tabindex": "-1", "class.view-drag": "viewDragService.dragging()", "class": "view().classList.asList()", "style.--sci-workbench-tab-title-offset-right": "viewTitleOffsetRight()" } }, ngImport: i0, template: "<!-- IMPORTANT: THIS HTML FILE IS ALSO USED BY `ViewTabDragImageComponent` -->\n\n@if (view().active()) {\n  <div class=\"corner-radius start\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n<div class=\"content\">\n  <ng-container *cdkPortalOutlet=\"viewTabContentPortal()\"/>\n</div>\n\n@if (view().active()) {\n  <div class=\"corner-radius end\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n@if (view().closable()) {\n  <button (click)=\"onClose($event)\"\n          [title]=\"('%workbench.close_tab.tooltip;close_others_modifier=Alt' | wbText)()\"\n          [disabled]=\"!view().isClosable()\"\n          class=\"close e2e-close\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:grid;align-items:center;padding-left:var(--sci-workbench-tab-padding-inline);padding-right:var(--sci-workbench-tab-padding-inline);position:relative;-webkit-user-select:none;user-select:none;cursor:var(--sci-workbench-tab-cursor);box-sizing:border-box;outline:none;border-top:var(--sci-workbench-tab-border-top-width) solid transparent;border-left:var(--sci-workbench-tab-border-width) solid transparent;border-right:var(--sci-workbench-tab-border-width) solid transparent;border-top-left-radius:var(--sci-workbench-tab-border-radius);border-top-right-radius:var(--sci-workbench-tab-border-radius)}:host[data-active]{cursor:default;border-left-color:var(--sci-workbench-tab-border-color);border-right-color:var(--sci-workbench-tab-border-color);border-top-color:var(--sci-workbench-tab-border-color);background-color:var(--sci-workbench-view-background-color)}wb-part[data-peripheral] :host[data-active]{background-color:var(--sci-workbench-view-peripheral-background-color)}:host[data-active]>div.content{color:var(--sci-workbench-tab-text-color-active)}:host[data-active][data-focus-within-view]>div.content{color:var(--sci-workbench-part-active-tab-text-color-active)}:host>div.content{display:inline-grid;font-family:var(--sci-workbench-tab-font-family),sans-serif;font-size:var(--sci-workbench-tab-font-size);font-weight:var(--sci-workbench-tab-font-weight);min-width:var(--sci-workbench-tab-min-width);max-width:var(--sci-workbench-tab-max-width);isolation:isolate;transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor)}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host>button.close:is(button,#sci-reset){position:absolute;right:calc(var(--sci-workbench-tab-padding-inline) - .125em);visibility:hidden;padding:.125em;border-radius:var(--sci-corner-small);transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host[data-active]>button.close:is(button,#sci-reset),:host:hover:not(.view-drag)>button.close:is(button,#sci-reset){visibility:visible}@container style(--sci-workbench-tab-background-color-hover){:host:hover:not([data-active]):not(.view-drag):before{content:\"\";position:absolute;place-self:start center;box-sizing:border-box;height:calc(100% - var(--sci-workbench-tab-padding-block-hover) - var(--sci-workbench-part-bar-border-bottom-width));width:calc(100% - var(--sci-workbench-tab-padding-inline-hover) + 2 * var(--sci-workbench-tab-border-width));background-color:var(--sci-workbench-tab-background-color-hover);border:var(--sci-workbench-tab-border-width) solid var(--sci-workbench-tab-background-color-hover);border-radius:var(--sci-workbench-tab-border-radius);pointer-events:none}:host:hover:not([data-active]):not(.view-drag)>button.close:is(button,#sci-reset):not(:disabled):hover{background-color:color-mix(in srgb,var(--sci-workbench-tab-background-color-hover) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}}:host>div.corner-radius{height:var(--sci-workbench-tab-border-radius);width:var(--sci-workbench-tab-border-radius);overflow:hidden;position:absolute;bottom:0}:host>div.corner-radius>div.circle{position:absolute;top:calc(-2 * var(--sci-workbench-tab-border-radius));width:calc(2 * var(--sci-workbench-tab-border-radius));height:calc(2 * var(--sci-workbench-tab-border-radius));border:var(--sci-workbench-tab-border-radius) solid var(--sci-workbench-view-background-color);border-radius:50%;box-shadow:inset 0 0 0 var(--sci-workbench-tab-border-width) var(--sci-workbench-tab-border-color);box-sizing:content-box}wb-part[data-peripheral] :host>div.corner-radius>div.circle{border-color:var(--sci-workbench-view-peripheral-background-color)}:host>div.corner-radius.start{left:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.start>div.circle{left:calc(-2 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end{right:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end>div.circle{right:calc(-2 * var(--sci-workbench-tab-border-radius))}@container viewtab (height >= 3.5rem){:host>button.close:is(button,#sci-reset){top:5px;right:5px}}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "pipe", type: TextPipe, name: "wbText" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ViewTabComponent, decorators: [{
             type: Component,
@@ -12779,6 +12814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         '(click)': 'onClick()',
                         '(auxclick)': 'onAuxClick($event)',
                         '(contextmenu)': 'onContextmenu($event)',
+                        '(mousedown)': 'onMouseDown($event)',
                         '(dragstart)': 'onDragStart($event)',
                         '(dragend)': 'onDragEnd()',
                     }, template: "<!-- IMPORTANT: THIS HTML FILE IS ALSO USED BY `ViewTabDragImageComponent` -->\n\n@if (view().active()) {\n  <div class=\"corner-radius start\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n<div class=\"content\">\n  <ng-container *cdkPortalOutlet=\"viewTabContentPortal()\"/>\n</div>\n\n@if (view().active()) {\n  <div class=\"corner-radius end\">\n    <div class=\"circle\"></div>\n  </div>\n}\n\n@if (view().closable()) {\n  <button (click)=\"onClose($event)\"\n          [title]=\"('%workbench.close_tab.tooltip;close_others_modifier=Alt' | wbText)()\"\n          [disabled]=\"!view().isClosable()\"\n          class=\"close e2e-close\">\n    <wb-icon icon=\"workbench.close\"/>\n  </button>\n}\n", styles: [":host{display:grid;align-items:center;padding-left:var(--sci-workbench-tab-padding-inline);padding-right:var(--sci-workbench-tab-padding-inline);position:relative;-webkit-user-select:none;user-select:none;cursor:var(--sci-workbench-tab-cursor);box-sizing:border-box;outline:none;border-top:var(--sci-workbench-tab-border-top-width) solid transparent;border-left:var(--sci-workbench-tab-border-width) solid transparent;border-right:var(--sci-workbench-tab-border-width) solid transparent;border-top-left-radius:var(--sci-workbench-tab-border-radius);border-top-right-radius:var(--sci-workbench-tab-border-radius)}:host[data-active]{cursor:default;border-left-color:var(--sci-workbench-tab-border-color);border-right-color:var(--sci-workbench-tab-border-color);border-top-color:var(--sci-workbench-tab-border-color);background-color:var(--sci-workbench-view-background-color)}wb-part[data-peripheral] :host[data-active]{background-color:var(--sci-workbench-view-peripheral-background-color)}:host[data-active]>div.content{color:var(--sci-workbench-tab-text-color-active)}:host[data-active][data-focus-within-view]>div.content{color:var(--sci-workbench-part-active-tab-text-color-active)}:host>div.content{display:inline-grid;font-family:var(--sci-workbench-tab-font-family),sans-serif;font-size:var(--sci-workbench-tab-font-size);font-weight:var(--sci-workbench-tab-font-weight);min-width:var(--sci-workbench-tab-min-width);max-width:var(--sci-workbench-tab-max-width);isolation:isolate;transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor)}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host>button.close:is(button,#sci-reset){position:absolute;right:calc(var(--sci-workbench-tab-padding-inline) - .125em);visibility:hidden;padding:.125em;border-radius:var(--sci-corner-small);transform:translateY(calc(-1 * var(--sci-workbench-tab-border-top-width)))}:host[data-active]>button.close:is(button,#sci-reset),:host:hover:not(.view-drag)>button.close:is(button,#sci-reset){visibility:visible}@container style(--sci-workbench-tab-background-color-hover){:host:hover:not([data-active]):not(.view-drag):before{content:\"\";position:absolute;place-self:start center;box-sizing:border-box;height:calc(100% - var(--sci-workbench-tab-padding-block-hover) - var(--sci-workbench-part-bar-border-bottom-width));width:calc(100% - var(--sci-workbench-tab-padding-inline-hover) + 2 * var(--sci-workbench-tab-border-width));background-color:var(--sci-workbench-tab-background-color-hover);border:var(--sci-workbench-tab-border-width) solid var(--sci-workbench-tab-background-color-hover);border-radius:var(--sci-workbench-tab-border-radius);pointer-events:none}:host:hover:not([data-active]):not(.view-drag)>button.close:is(button,#sci-reset):not(:disabled):hover{background-color:color-mix(in srgb,var(--sci-workbench-tab-background-color-hover) 90%,light-dark(var(--sci-static-color-black),var(--sci-static-color-white)))}}:host>div.corner-radius{height:var(--sci-workbench-tab-border-radius);width:var(--sci-workbench-tab-border-radius);overflow:hidden;position:absolute;bottom:0}:host>div.corner-radius>div.circle{position:absolute;top:calc(-2 * var(--sci-workbench-tab-border-radius));width:calc(2 * var(--sci-workbench-tab-border-radius));height:calc(2 * var(--sci-workbench-tab-border-radius));border:var(--sci-workbench-tab-border-radius) solid var(--sci-workbench-view-background-color);border-radius:50%;box-shadow:inset 0 0 0 var(--sci-workbench-tab-border-width) var(--sci-workbench-tab-border-color);box-sizing:content-box}wb-part[data-peripheral] :host>div.corner-radius>div.circle{border-color:var(--sci-workbench-view-peripheral-background-color)}:host>div.corner-radius.start{left:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.start>div.circle{left:calc(-2 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end{right:calc(-1 * var(--sci-workbench-tab-border-radius))}:host>div.corner-radius.end>div.circle{right:calc(-2 * var(--sci-workbench-tab-border-radius))}@container viewtab (height >= 3.5rem){:host>button.close:is(button,#sci-reset){top:5px;right:5px}}\n"] }]
@@ -17911,6 +17947,11 @@ class WorkbenchNotificationComponent {
             this.notification.close();
         }
     }
+    onMouseDown(event) {
+        if (event.button === 1) { // primary aux button
+            event.preventDefault(); // prevent middle-click scrolling; necessary for aux click to work
+        }
+    }
     /**
      * Closes this notification when pressing escape if it is the most recently displayed notification.
      */
@@ -17961,7 +18002,7 @@ class WorkbenchNotificationComponent {
         }
     }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: WorkbenchNotificationComponent, isStandalone: true, selector: "wb-notification", host: { listeners: { "mouseenter": "hover.set(true)", "mouseleave": "hover.set(false)", "auxclick": "onAuxClick($event)", "mousedown": "onMouseDown($event)", "keydown.escape": "onEscape($event)" }, properties: { "attr.data-notificationid": "notification.id", "attr.data-severity": "notification.severity()", "style.min-height": "notification.size.minHeight()", "style.height": "notification.size.height()", "style.max-height": "notification.size.maxHeight()", "style.--\u0275slot-anchor": "`--${slotAnchorName}`", "attr.tabindex": "-1", "class": "notification.cssClass()" } }, providers: [
             configureNotificationGlassPane(),
         ], viewQueries: [{ propertyName: "notificationSlotBounds", first: true, predicate: ["slot_bounds"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: GlassPaneDirective }], ngImport: i0, template: "<!-- Title -->\n@if (notification.title(); as title) {\n  <header class=\"e2e-title\">{{(title | wbText)()}}</header>\n}\n\n<!-- Message -->\n<div class=\"slot e2e-slot\" [class.text]=\"!!notification.slot.text?.length\">\n  @if (notification.slot.text?.length) {\n    {{(notification.slot.text | wbText)()}}\n  } @else if (notification.slot.component) {\n    <sci-viewport class=\"e2e-notification-slot\">\n      <ng-container *ngComponentOutlet=\"notification.slot.component; inputs: notification.inputs | wbRemoveLegacyInput;\"/>\n    </sci-viewport>\n\n    <!-- Extra DIV to capture bounds available to slotted content, excluding viewport content padding. May differ from the actual content size if content overflows or does not fill the slot. -->\n    <div class=\"slot-bounds e2e-notification-slot-bounds\" #slot_bounds></div>\n  }\n</div>\n\n<button (click)=\"onClose()\"\n        [title]=\"('%workbench.close.tooltip' | wbText)()\"\n        class=\"close e2e-close\">\n  <wb-icon icon=\"workbench.close\"/>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:.75em;background-color:var(--sci-color-background-elevation);color:var(--sci-color-text);font-size:.9em;border:1px solid var(--sci-color-border);border-radius:var(--sci-corner);box-shadow:var(--sci-elevation) var(--sci-static-color-black);padding:1em 0;overflow:hidden;outline:none;position:relative}:host:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:var(--sci-workbench-notification-severity-indicator-size)}:host[data-severity=info]:before{background-color:var(--sci-color-accent)}:host[data-severity=warn]:before{background-color:var(--sci-color-notice)}:host[data-severity=error]:before{background-color:var(--sci-color-negative)}:host>header{flex:none;font-weight:700;padding:0 var(--sci-workbench-notification-padding);word-break:break-word;white-space:pre-line}:host>div.slot{flex:auto;overflow:hidden;display:grid}:host>div.slot.text{word-break:break-word;white-space:pre-line;padding:0 var(--sci-workbench-notification-padding)}:host>div.slot>sci-viewport{anchor-name:var(--\\275slot-anchor)}:host>div.slot>sci-viewport::part(content){padding-inline:var(--sci-workbench-notification-padding)}:host>div.slot>div.slot-bounds{position:absolute;position-anchor:var(--\\275slot-anchor);inset:anchor(top) anchor(right) anchor(bottom) anchor(left);margin-inline:var(--sci-workbench-notification-padding);visibility:hidden}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor)}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host>button.close:is(button,#sci-reset){position:absolute;top:.275em;right:.275em;padding:.125em;border-radius:var(--sci-corner-small);font-size:1rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "wb-icon", inputs: ["icon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "pipe", type: TextPipe, name: "wbText" }, { kind: "pipe", type: RemoveLegacyInputPipe, name: "wbRemoveLegacyInput" }] });
 }
@@ -17989,6 +18030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         '(mouseenter)': 'hover.set(true)',
                         '(mouseleave)': 'hover.set(false)',
                         '(auxclick)': 'onAuxClick($event)',
+                        '(mousedown)': 'onMouseDown($event)',
                         '(keydown.escape)': 'onEscape($event)',
                     }, template: "<!-- Title -->\n@if (notification.title(); as title) {\n  <header class=\"e2e-title\">{{(title | wbText)()}}</header>\n}\n\n<!-- Message -->\n<div class=\"slot e2e-slot\" [class.text]=\"!!notification.slot.text?.length\">\n  @if (notification.slot.text?.length) {\n    {{(notification.slot.text | wbText)()}}\n  } @else if (notification.slot.component) {\n    <sci-viewport class=\"e2e-notification-slot\">\n      <ng-container *ngComponentOutlet=\"notification.slot.component; inputs: notification.inputs | wbRemoveLegacyInput;\"/>\n    </sci-viewport>\n\n    <!-- Extra DIV to capture bounds available to slotted content, excluding viewport content padding. May differ from the actual content size if content overflows or does not fill the slot. -->\n    <div class=\"slot-bounds e2e-notification-slot-bounds\" #slot_bounds></div>\n  }\n</div>\n\n<button (click)=\"onClose()\"\n        [title]=\"('%workbench.close.tooltip' | wbText)()\"\n        class=\"close e2e-close\">\n  <wb-icon icon=\"workbench.close\"/>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:.75em;background-color:var(--sci-color-background-elevation);color:var(--sci-color-text);font-size:.9em;border:1px solid var(--sci-color-border);border-radius:var(--sci-corner);box-shadow:var(--sci-elevation) var(--sci-static-color-black);padding:1em 0;overflow:hidden;outline:none;position:relative}:host:before{content:\"\";position:absolute;top:0;left:0;bottom:0;width:var(--sci-workbench-notification-severity-indicator-size)}:host[data-severity=info]:before{background-color:var(--sci-color-accent)}:host[data-severity=warn]:before{background-color:var(--sci-color-notice)}:host[data-severity=error]:before{background-color:var(--sci-color-negative)}:host>header{flex:none;font-weight:700;padding:0 var(--sci-workbench-notification-padding);word-break:break-word;white-space:pre-line}:host>div.slot{flex:auto;overflow:hidden;display:grid}:host>div.slot.text{word-break:break-word;white-space:pre-line;padding:0 var(--sci-workbench-notification-padding)}:host>div.slot>sci-viewport{anchor-name:var(--\\275slot-anchor)}:host>div.slot>sci-viewport::part(content){padding-inline:var(--sci-workbench-notification-padding)}:host>div.slot>div.slot-bounds{position:absolute;position-anchor:var(--\\275slot-anchor);inset:anchor(top) anchor(right) anchor(bottom) anchor(left);margin-inline:var(--sci-workbench-notification-padding);visibility:hidden}:host>button.close:is(button,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-corner);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-workbench-button-cursor)}:host>button.close:is(button,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-hover)}:host>button.close:is(button,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-workbench-button-background-color-active)}:host>button.close:is(button,#sci-reset):focus:not(:focus-visible){outline:none}:host>button.close:is(button,#sci-reset):focus-visible{outline:var(--sci-workbench-button-outline-width-focus) solid var(--sci-color-accent)}:host>button.close:is(button,#sci-reset):disabled{color:var(--sci-color-gray-500)}:host>button.close:is(button,#sci-reset){position:absolute;top:.275em;right:.275em;padding:.125em;border-radius:var(--sci-corner-small);font-size:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { notificationSlotBounds: [{ type: i0.ViewChild, args: ['slot_bounds', { ...{ read: (ElementRef) }, isSignal: true }] }] } });