@breadstone/mosaik-elements-angular 0.0.277 → 0.0.278

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.0.278 (2026-05-16)
+
+### 🚀 Features
+
+- **overlay:** implement backdrop configuration for overlays ([5b616ceff4](https://github.com/RueDeRennes/mosaik/commit/5b616ceff4))
+
 ## 0.0.277 (2026-05-15)
 
 This was a version bump only for mosaik-elements-angular to align it with other projects, there were no code changes.

package/fesm2022/mosaik-elements-angular.mjs

@@ -5,7 +5,7 @@ import { AbsoluteItemElement, AbsoluteElement, ActionbarGroupElement, ActionbarI
 import { AbstractControl, FormGroupDirective, NgControl, TouchedChangeEvent, NG_VALUE_ACCESSOR, FormControl, FormArray, FormGroup } from '@angular/forms';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CssLength, ThemeObserver, ThemeGeneratorServiceLocator, ThemeGenerator, ThemeObserverServiceLocator } from '@breadstone/mosaik-themes';
-import { Subscription, filter, of, isObservable, Subject, BehaviorSubject, take, takeUntil, fromEvent, timer, share, Observable } from 'rxjs';
+import { Subscription, filter, of, isObservable, Subject, BehaviorSubject, merge, fromEvent, take, takeUntil, timer, share, Observable } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FORM_FIELD, validate } from '@angular/forms/signals';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
@@ -11867,6 +11867,66 @@ class StatelessInjector {
     }
 }
 
+// #region Imports
+/**
+ * Coordinates CDK backdrop ownership across consecutive overlay stack segments.
+ *
+ * @internal
+ */
+class OverlayBackdropStackCoordinator {
+    // #region Fields
+    static _entries = new Array();
+    // #endregion
+    // #region Methods
+    /**
+     * Resolves the effective CDK `hasBackdrop` value for a new overlay.
+     *
+     * @internal
+     */
+    static resolveHasBackdrop(hasBackdrop, options) {
+        const backdropStackKey = options?.backdropStackKey;
+        if (hasBackdrop !== true || options?.backdropStrategy === 'own' || !backdropStackKey) {
+            return hasBackdrop;
+        }
+        return !OverlayBackdropStackCoordinator.hasBackdropInCurrentStack(backdropStackKey);
+    }
+    /**
+     * Registers an overlay with its effective backdrop ownership.
+     *
+     * @internal
+     */
+    static register(overlayRef, hasBackdrop, options) {
+        OverlayBackdropStackCoordinator._entries.push({
+            overlayRef: overlayRef,
+            backdropStackKey: options?.backdropStackKey,
+            hasBackdrop: hasBackdrop === true
+        });
+    }
+    /**
+     * Unregisters an overlay from backdrop stack tracking.
+     *
+     * @internal
+     */
+    static unregister(overlayRef) {
+        const index = OverlayBackdropStackCoordinator._entries.findIndex((entry) => entry.overlayRef === overlayRef);
+        if (index >= 0) {
+            OverlayBackdropStackCoordinator._entries.splice(index, 1);
+        }
+    }
+    static hasBackdropInCurrentStack(backdropStackKey) {
+        for (let index = OverlayBackdropStackCoordinator._entries.length - 1; index >= 0; index--) {
+            const entry = OverlayBackdropStackCoordinator._entries[index];
+            if (entry.backdropStackKey !== backdropStackKey) {
+                return false;
+            }
+            if (entry.hasBackdrop) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+
 // #region Imports
 const OVERLAY_INTERACTION_STATE = getOverlayInteractionState();
 /**
@@ -12020,12 +12080,17 @@ class PortalProvider {
     /**
      * @protected
      */
-    createOverlay(config) {
-        config.positionStrategy = this.createPositionStrategy();
-        config.scrollStrategy = this.createScrollStrategy();
-        config.panelClass = withOverlayClass(config.panelClass, MOSAIK_CDK_OVERLAY_PANE_CLASS);
-        config.backdropClass = withOverlayClass(config.backdropClass, MOSAIK_CDK_BACKDROP_CLASS);
-        const overlayRef = this._overlay.create(config);
+    createOverlay(config, options) {
+        const overlayConfig = {
+            ...config,
+            hasBackdrop: OverlayBackdropStackCoordinator.resolveHasBackdrop(config.hasBackdrop, options),
+            positionStrategy: this.createPositionStrategy(),
+            scrollStrategy: this.createScrollStrategy(),
+            panelClass: withOverlayClass(config.panelClass, MOSAIK_CDK_OVERLAY_PANE_CLASS),
+            backdropClass: withOverlayClass(config.backdropClass, MOSAIK_CDK_BACKDROP_CLASS)
+        };
+        const overlayRef = this._overlay.create(overlayConfig);
+        OverlayBackdropStackCoordinator.register(overlayRef, overlayConfig.hasBackdrop, options);
         useBackdropPointerEvents(overlayRef);
         overlayRef.attachments().subscribe(() => useBackdropPointerEvents(overlayRef));
         return overlayRef;
@@ -12075,6 +12140,7 @@ class PortalProvider {
         if (overlayRef.hasAttached()) {
             overlayRef.detach();
         }
+        OverlayBackdropStackCoordinator.unregister(overlayRef);
         OverlayInteractionCoordinator.unregister(overlayRef);
         const index = this._cache.findIndex((x) => x.overlay === overlayRef);
         if (index >= 0) {
@@ -12109,9 +12175,8 @@ function withOverlayClass(value, className) {
  * @internal
  */
 function connectOverlayOutsideClose(overlayRef, closed, close) {
-    overlayRef.backdropClick().pipe(filter((event) => OverlayInteractionCoordinator.isTopMostForInteraction(overlayRef, event)), take(1), takeUntil(closed))
-        .subscribe(() => close());
-    overlayRef.outsidePointerEvents().pipe(filter((event) => OverlayInteractionCoordinator.isTopMostForInteraction(overlayRef, event)), filter((event) => !isOwnedMosaikPortalProjectionEvent(overlayRef, event)), take(1), takeUntil(closed))
+    const ownerDocument = overlayRef.overlayElement.ownerDocument;
+    merge(overlayRef.backdropClick(), overlayRef.outsidePointerEvents(), fromEvent(ownerDocument, 'pointerdown', { capture: true })).pipe(filter((event) => OverlayInteractionCoordinator.isTopMostForInteraction(overlayRef, event)), filter((event) => !isOverlayInteractionEvent(overlayRef, event)), filter((event) => !isOwnedMosaikPortalProjectionEvent(overlayRef, event)), take(1), takeUntil(closed))
         .subscribe(() => close());
 }
 /**
@@ -12147,6 +12212,13 @@ function isOwnedMosaikPortalProjectionEvent(overlayRef, event) {
     return event.composedPath()
         .some((target) => isMosaikPortalProjectionElement(target) && isProjectionOwnedByOverlay(overlayRef, target));
 }
+function isOverlayInteractionEvent(overlayRef, event) {
+    return event.composedPath()
+        .some((target) => isNode(target) && isComposedDescendantOf(overlayRef.overlayElement, target));
+}
+function isNode(target) {
+    return typeof Node !== 'undefined' && target instanceof Node;
+}
 function isMosaikPortalProjectionElement(target) {
     return typeof HTMLElement !== 'undefined' && target instanceof HTMLElement && target.localName === 'mosaik-portal-projection';
 }
@@ -12234,6 +12306,9 @@ class DialogService extends PortalProvider {
             maxWidth: config?.maxSize?.width,
             maxHeight: config?.maxSize?.height,
             disposeOnNavigation: config?.closeOnNavigation
+        }, {
+            backdropStackKey: 'dialog',
+            backdropStrategy: config?.backdropStrategy
         });
         const portal = this.createPortal(DialogPortalComponent, config);
         const componentRef = this.createComponent(portal, overlayRef, DialogPortalComponent, config);
@@ -15085,6 +15160,9 @@ class DrawerService extends PortalProvider {
             // maxWidth: config?.maxSize?.width,
             // maxHeight: config?.maxSize?.height,
             // disposeOnNavigation: config?.closeOnNavigation
+        }, {
+            backdropStackKey: 'drawer',
+            backdropStrategy: config?.backdropStrategy
         });
         const portal = this.createPortal(DrawerPortalComponent, config);
         const componentRef = this.createComponent(portal, overlayRef, DrawerPortalComponent, config);
@@ -16041,6 +16119,9 @@ class MessageBoxService extends PortalProvider {
         const overlayRef = this.createOverlay({
             hasBackdrop: config?.hasBackdrop ?? true,
             disposeOnNavigation: config?.closeOnNavigation
+        }, {
+            backdropStackKey: 'message-box',
+            backdropStrategy: config?.backdropStrategy
         });
         const portal = this.createPortal(MessageBoxPortalComponent, config);
         const componentRef = this.createComponent(portal, overlayRef, MessageBoxPortalComponent, config);
@@ -17697,6 +17778,9 @@ class SheetService extends PortalProvider {
         const overlayRef = this.createOverlay({
             hasBackdrop: config?.hasBackdrop,
             disposeOnNavigation: config?.closeOnNavigation
+        }, {
+            backdropStackKey: 'sheet',
+            backdropStrategy: config?.backdropStrategy
         });
         const portal = this.createPortal(SheetPortalComponent, config);
         const componentRef = this.createComponent(portal, overlayRef, SheetPortalComponent, config);
@@ -18456,6 +18540,9 @@ class ToastService extends PortalProvider {
         const overlayRef = this.createOverlay({
             hasBackdrop: resolvedConfig?.hasBackdrop,
             disposeOnNavigation: resolvedConfig?.closeOnNavigation
+        }, {
+            backdropStackKey: 'toast',
+            backdropStrategy: resolvedConfig?.backdropStrategy
         });
         const portal = this.createPortal(ToastPortalComponent, resolvedConfig);
         const componentRef = this.createComponent(portal, overlayRef, ToastPortalComponent, resolvedConfig);