ng-primitives 0.112.3 → 0.114.0

package/dialog/index.d.ts

@@ -1,6 +1,6 @@
-import { ScrollStrategy, OverlayRef } from '@angular/cdk/overlay';
 import * as _angular_core from '@angular/core';
 import { ViewContainerRef, Injector, Provider, OnDestroy, TemplateRef, Type } from '@angular/core';
+import { ScrollStrategy, NgpOverlayRef } from 'ng-primitives/portal';
 import * as i1 from 'ng-primitives/internal';
 import { Subject, Observable } from 'rxjs';
 import { FocusOrigin } from '@angular/cdk/a11y';
@@ -21,8 +21,6 @@ interface NgpDialogConfig<T = any> {
     role?: NgpDialogRole;
     /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */
     modal?: boolean;
-    /** Scroll strategy to be used for the dialog. This determines how the dialog responds to scrolling underneath the panel element. */
-    scrollStrategy?: ScrollStrategy;
     /**
      * Whether the dialog should close when the user navigates. This includes both browser history
      * navigation (back/forward) and programmatic route changes (e.g. router.navigate()).
@@ -30,8 +28,10 @@ interface NgpDialogConfig<T = any> {
     closeOnNavigation?: boolean;
     /** Whether the dialog should close when the user presses the escape key. */
     closeOnEscape?: boolean;
-    /** Whether the dialog should close when the user click the overlay. */
+    /** Whether the dialog should close when the user clicks the overlay. */
     closeOnClick?: boolean;
+    /** Scroll strategy to be used for the dialog. */
+    scrollStrategy?: ScrollStrategy;
     data?: T;
 }
 /**
@@ -75,12 +75,17 @@ declare class NgpDialogTitle implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpDialogTitle, "[ngpDialogTitle]", ["ngpDialogTitle"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** Minimal portal interface needed by the dialog ref. */
+interface NgpDialogPortalRef {
+    getElements(): HTMLElement[];
+    detach(immediate?: boolean): Promise<void>;
+}
 /**
  * Reference to a dialog opened via the Dialog service.
  */
-declare class NgpDialogRef<T = unknown, R = unknown> {
-    readonly overlayRef: OverlayRef;
+declare class NgpDialogRef<T = unknown, R = unknown> implements NgpOverlayRef {
     readonly config: NgpDialogConfig<T>;
+    private readonly document;
     /** Whether the user is allowed to close the dialog. */
     disableClose: boolean | undefined;
     /** Whether the escape key is allowed to close the dialog. */
@@ -90,51 +95,97 @@ declare class NgpDialogRef<T = unknown, R = unknown> {
         focusOrigin?: FocusOrigin;
         result?: R;
     }>;
-    /** Emits when on keyboard events within the dialog. */
-    readonly keydownEvents: Observable<KeyboardEvent>;
-    /** Emits on pointer events that happen outside of the dialog. */
-    readonly outsidePointerEvents: Observable<MouseEvent>;
+    /**
+     * Observable that emits the dialog result when closed.
+     */
+    readonly afterClosed: Observable<R | undefined>;
     /** Data passed from the dialog opener. */
     readonly data: T;
     /** Unique ID for the dialog. */
     readonly id: string;
-    /** Subscription to external detachments of the dialog. */
-    private detachSubscription;
     /** @internal Store the injector */
     injector: Injector | undefined;
     /** Whether the dialog is closing. */
     private closing;
-    constructor(overlayRef: OverlayRef, config: NgpDialogConfig<T>);
+    /** @internal Portal reference for element access and detach. */
+    portal: NgpDialogPortalRef | null;
+    /** Emits on keyboard events within the dialog. */
+    readonly keydownEvents: Observable<KeyboardEvent>;
+    /**
+     * Emits pointer events (click, auxclick, contextmenu) that happen outside of the dialog.
+     * Fed by the NgpOverlayRegistry with CDK-compatible stacking awareness.
+     * @internal
+     */
+    readonly outsidePointerEvents$: Subject<MouseEvent>;
+    /** Emits on pointer events that happen outside of the dialog. */
+    readonly outsidePointerEvents: Observable<MouseEvent>;
+    constructor(config: NgpDialogConfig<T>, document: Document);
+    /**
+     * Updates the position of the dialog. No-op since dialogs are CSS-centered.
+     */
+    updatePosition(): this;
+    /**
+     * NgpOverlayRef implementation — called by the registry for escape-key dismiss.
+     */
+    hide(options?: {
+        immediate?: boolean;
+        origin?: FocusOrigin;
+    }): void;
+    /**
+     * NgpOverlayRef implementation — called by the registry for descendant cascade.
+     * Skips exit animations and tears down immediately.
+     */
+    hideImmediate(): Promise<void>;
     /**
      * Close the dialog.
      * @param result Optional result to return to the dialog opener.
-     * @param options Additional options to customize the closing behavior.
+     * @param focusOrigin The origin of the focus event that triggered the close.
      */
     close(result?: R, focusOrigin?: FocusOrigin): Promise<void>;
-    /** Updates the position of the dialog based on the current position strategy. */
-    updatePosition(): this;
+    /**
+     * @deprecated Access dialog methods directly instead (keydownEvents, outsidePointerEvents,
+     * updatePosition, close). This shim will be removed in the next major version.
+     */
+    get overlayRef(): {
+        keydownEvents: () => Observable<KeyboardEvent>;
+        outsidePointerEvents: () => Observable<MouseEvent>;
+        updatePosition: () => NgpDialogRef<T, R>;
+        dispose: () => Promise<void>;
+        detachments: () => Observable<{
+            focusOrigin?: FocusOrigin;
+            result?: R;
+        }>;
+        overlayElement: HTMLElement | undefined;
+    };
+    /**
+     * Get the portal elements.
+     * @internal
+     */
+    getElements(): HTMLElement[];
 }
 declare function injectDialogRef<T = unknown, R = unknown>(): NgpDialogRef<T, R>;
 
 /**
- * This is based on the Angular CDK Dialog service.
- * https://github.com/angular/components/blob/main/src/cdk/dialog/dialog.ts
+ * Originally based on Angular CDK Dialog service.
+ * Re-implemented to use ng-primitives/portal instead of @angular/cdk/overlay.
  */
 declare class NgpDialogManager implements OnDestroy {
     private readonly applicationRef;
+    private readonly injector;
     private readonly document;
-    private readonly overlay;
     private readonly focusMonitor;
+    private readonly viewportRuler;
+    private readonly registry;
     private readonly defaultOptions;
     private readonly parentDialogManager;
-    private readonly overlayContainer;
     private readonly router;
-    private readonly scrollStrategy;
     private openDialogsAtThisLevel;
     private readonly afterAllClosedAtThisLevel;
     private readonly afterOpenedAtThisLevel;
     private ariaHiddenElements;
     private routerSubscription;
+    /** Scroll blocking strategy — shared across all dialogs. */
+    private scrollStrategy;
     /** Keeps track of the currently-open dialogs. */
     get openDialogs(): readonly NgpDialogRef[];
     /** Stream that emits when a dialog has been opened. */
@@ -169,15 +220,11 @@ declare class NgpDialogManager implements OnDestroy {
     getDialogById(id: string): NgpDialogRef | undefined;
     /**
      * Subscribe to router navigation events so that dialogs with `closeOnNavigation`
-     * are closed when the user navigates programmatically (e.g. router.navigate()).
-     * CDK's `disposeOnNavigation` only handles browser popstate events.
+     * are closed when the user navigates. This handles both browser popstate events
+     * and programmatic route changes (e.g. router.navigate()).
      */
     private subscribeToRouterEvents;
     ngOnDestroy(): void;
-    /**
-     * Creates an overlay config from a dialog config.
-     */
-    private getOverlayConfig;
     /**
      * Creates a custom injector to be used inside the dialog. This allows a component loaded inside
      * of a dialog to close itself and, optionally, to return a value.
@@ -187,7 +234,17 @@ declare class NgpDialogManager implements OnDestroy {
      * Removes a dialog from the array of open dialogs.
      */
     private removeOpenDialog;
-    /** Hides all of the content that isn't an overlay from assistive technology. */
+    /**
+     * Enable scroll blocking when the first dialog opens.
+     */
+    private enableScrollBlocking;
+    /**
+     * Disable scroll blocking when the last dialog closes.
+     */
+    private disableScrollBlocking;
+    /**
+     * Hides all of the content that isn't a dialog portal from assistive technology.
+     */
     private hideNonDialogContentFromAssistiveTechnology;
     private getAfterAllClosed;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpDialogManager, never>;

package/fesm2022/ng-primitives-dialog.mjs

@@ -1,17 +1,16 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, Directive, booleanAttribute, HostListener, ApplicationRef, ViewContainerRef, isDevMode, TemplateRef, Injector, Injectable, output, signal } from '@angular/core';
+import { InjectionToken, inject, input, Directive, booleanAttribute, HostListener, ApplicationRef, Injector, ViewContainerRef, isDevMode, Injectable, output, signal } from '@angular/core';
 import { uniqueId, onChange } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import * as i1 from 'ng-primitives/internal';
 import { NgpExitAnimationManager, NgpExitAnimation } from 'ng-primitives/internal';
-import { hasModifierKey } from '@angular/cdk/keycodes';
-import { Subject, defer } from 'rxjs';
+import { Subject, defer, EMPTY, fromEvent } from 'rxjs';
+import { map, filter, takeUntil, startWith } from 'rxjs/operators';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
-import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { ViewportRuler } from '@angular/cdk/scrolling';
 import { DOCUMENT } from '@angular/common';
 import { Router, NavigationStart } from '@angular/router';
-import { startWith } from 'rxjs/operators';
+import { NgpOverlayRegistry, createPortal, BlockScrollStrategy } from 'ng-primitives/portal';
 import * as i1$1 from 'ng-primitives/focus-trap';
 import { NgpFocusTrap } from 'ng-primitives/focus-trap';
 
@@ -97,33 +96,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Reference to a dialog opened via the Dialog service.
  */
 class NgpDialogRef {
-    constructor(overlayRef, config) {
-        this.overlayRef = overlayRef;
+    constructor(config, document) {
         this.config = config;
+        this.document = document;
         /** Emits when the dialog has been closed. */
         this.closed = new Subject();
+        /**
+         * Observable that emits the dialog result when closed.
+         */
+        this.afterClosed = this.closed.pipe(map(event => event.result));
         /** Whether the dialog is closing. */
         this.closing = false;
+        /** @internal Portal reference for element access and detach. */
+        this.portal = null;
+        /**
+         * Emits pointer events (click, auxclick, contextmenu) that happen outside of the dialog.
+         * Fed by the NgpOverlayRegistry with CDK-compatible stacking awareness.
+         * @internal
+         */
+        this.outsidePointerEvents$ = new Subject();
+        /** Emits on pointer events that happen outside of the dialog. */
+        this.outsidePointerEvents = this.outsidePointerEvents$.asObservable();
         this.data = config.data;
-        this.keydownEvents = overlayRef.keydownEvents();
-        this.outsidePointerEvents = overlayRef.outsidePointerEvents();
         this.id = config.id; // By the time the dialog is created we are guaranteed to have an ID.
         this.closeOnEscape = config.closeOnEscape ?? true;
-        this.keydownEvents.subscribe(event => {
-            if (event.key === 'Escape' &&
-                !this.disableClose &&
-                this.closeOnEscape !== false &&
-                !hasModifierKey(event)) {
-                event.preventDefault();
-                this.close(undefined, 'keyboard');
-            }
+        // Use defer() so the observable is created on subscribe — by then the portal will be set.
+        this.keydownEvents = defer(() => {
+            const elements = this.getElements();
+            if (!elements.length)
+                return EMPTY;
+            return fromEvent(this.document, 'keydown').pipe(filter(event => elements.some(el => el.contains(event.target))), takeUntil(this.closed));
         });
-        this.detachSubscription = overlayRef.detachments().subscribe(() => this.close());
+    }
+    /**
+     * Updates the position of the dialog. No-op since dialogs are CSS-centered.
+     */
+    updatePosition() {
+        return this;
+    }
+    /**
+     * NgpOverlayRef implementation — called by the registry for escape-key dismiss.
+     */
+    hide(options) {
+        if (this.disableClose) {
+            return;
+        }
+        this.close(undefined, options?.origin);
+    }
+    /**
+     * NgpOverlayRef implementation — called by the registry for descendant cascade.
+     * Skips exit animations and tears down immediately.
+     */
+    async hideImmediate() {
+        if (this.closing) {
+            return;
+        }
+        this.closing = true;
+        // Detach the portal immediately — no exit animation
+        if (this.portal) {
+            await this.portal.detach(true);
+            this.portal = null;
+        }
+        this.closed.next({});
+        this.closed.complete();
     }
     /**
      * Close the dialog.
      * @param result Optional result to return to the dialog opener.
-     * @param options Additional options to customize the closing behavior.
+     * @param focusOrigin The origin of the focus event that triggered the close.
      */
     async close(result, focusOrigin) {
         // If the dialog is already closed, do nothing.
@@ -137,15 +177,34 @@ class NgpDialogRef {
         if (exitAnimationManager) {
             await exitAnimationManager.exit();
         }
-        this.overlayRef.dispose();
-        this.detachSubscription.unsubscribe();
+        // Detach the portal (immediate since exit animation already ran)
+        if (this.portal) {
+            await this.portal.detach(true);
+            this.portal = null;
+        }
         this.closed.next({ focusOrigin, result });
         this.closed.complete();
     }
-    /** Updates the position of the dialog based on the current position strategy. */
-    updatePosition() {
-        this.overlayRef.updatePosition();
-        return this;
+    /**
+     * @deprecated Access dialog methods directly instead (keydownEvents, outsidePointerEvents,
+     * updatePosition, close). This shim will be removed in the next major version.
+     */
+    get overlayRef() {
+        return {
+            keydownEvents: () => this.keydownEvents,
+            outsidePointerEvents: () => this.outsidePointerEvents,
+            updatePosition: () => this.updatePosition(),
+            dispose: () => this.close(),
+            detachments: () => this.closed.asObservable(),
+            overlayElement: this.getElements()[0],
+        };
+    }
+    /**
+     * Get the portal elements.
+     * @internal
+     */
+    getElements() {
+        return this.portal?.getElements() ?? [];
     }
 }
 function injectDialogRef() {
@@ -218,27 +277,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
- * This is based on the Angular CDK Dialog service.
- * https://github.com/angular/components/blob/main/src/cdk/dialog/dialog.ts
+ * Originally based on Angular CDK Dialog service.
+ * Re-implemented to use ng-primitives/portal instead of @angular/cdk/overlay.
  */
 class NgpDialogManager {
     constructor() {
         this.applicationRef = inject(ApplicationRef);
+        this.injector = inject(Injector);
         this.document = inject(DOCUMENT);
-        this.overlay = inject(Overlay);
         this.focusMonitor = inject(FocusMonitor);
+        this.viewportRuler = inject(ViewportRuler);
+        this.registry = inject(NgpOverlayRegistry);
         this.defaultOptions = injectDialogConfig();
         this.parentDialogManager = inject(NgpDialogManager, {
             optional: true,
             skipSelf: true,
         });
-        this.overlayContainer = inject(OverlayContainer);
         this.router = inject(Router, { optional: true });
-        this.scrollStrategy = this.defaultOptions.scrollStrategy ?? this.overlay.scrollStrategies.block();
         this.openDialogsAtThisLevel = [];
         this.afterAllClosedAtThisLevel = new Subject();
         this.afterOpenedAtThisLevel = new Subject();
         this.ariaHiddenElements = new Map();
+        /** Scroll blocking strategy — shared across all dialogs. */
+        this.scrollStrategy = null;
         /**
          * Stream that emits when all open dialog have finished closing.
          * Will emit on subscribe if there are no open dialogs to begin with.
@@ -275,30 +336,52 @@ class NgpDialogManager {
         if (config.id && this.getDialogById(config.id) && isDevMode()) {
             throw Error(`Dialog with id "${config.id}" exists already. The dialog id must be unique.`);
         }
-        const overlayConfig = this.getOverlayConfig(config);
-        const overlayRef = this.overlay.create(overlayConfig);
-        const dialogRef = new NgpDialogRef(overlayRef, config);
-        const injector = this.createInjector(config, dialogRef, undefined);
+        const dialogRef = new NgpDialogRef(config, this.document);
+        const injector = this.createInjector(config, dialogRef);
         // store the injector in the dialog ref - this is so we can access the exit animation manager
         dialogRef.injector = injector;
         const context = {
             $implicit: dialogRef,
             close: dialogRef.close.bind(dialogRef),
         };
-        if (templateRefOrComponentType instanceof TemplateRef) {
-            overlayRef.attach(new TemplatePortal(templateRefOrComponentType, config.viewContainerRef, context, injector));
-        }
-        else {
-            overlayRef.attach(new ComponentPortal(templateRefOrComponentType, config.viewContainerRef, injector));
-        }
-        // If this is the first dialog that we're opening, hide all the non-overlay content.
+        // Create the portal using our portal system
+        const portal = createPortal(templateRefOrComponentType, config.viewContainerRef, injector, context);
+        // Attach the portal to document.body
+        portal.attach(this.document.body);
+        // Store the portal reference on the dialog ref for element access and cleanup
+        dialogRef.portal = portal;
+        // If this is the first dialog that we're opening, hide all the non-overlay content
+        // and enable scroll blocking.
         if (!this.openDialogs.length) {
-            this.hideNonDialogContentFromAssistiveTechnology();
+            this.hideNonDialogContentFromAssistiveTechnology(portal.getElements());
+            this.enableScrollBlocking(config);
         }
+        // Auto-detect parent overlay: if the trigger element lives inside an existing overlay
+        // (e.g. a dialog opened from a popover), register as its child so that clicks inside
+        // the dialog don't dismiss the parent overlay.
+        const parentId = activeElement instanceof HTMLElement
+            ? this.registry.findContainingOverlay(activeElement)
+            : null;
+        // Register with the overlay registry for centralized escape-key routing.
+        // outsidePress is false because the NgpDialogOverlay directive handles its own backdrop clicks.
+        this.registry.register({
+            id: dialogRef.id,
+            parentId,
+            overlay: dialogRef,
+            getElements: () => dialogRef.getElements(),
+            triggerElement: activeElement ?? this.document.body,
+            dismissPolicy: {
+                outsidePress: false,
+                escapeKey: config.closeOnEscape ?? true,
+            },
+            outsidePointerEvents$: dialogRef.outsidePointerEvents$,
+        });
         this.openDialogs.push(dialogRef);
         this.afterOpened.next(dialogRef);
         this.subscribeToRouterEvents();
         dialogRef.closed.subscribe(closeResult => {
+            // Deregister from the overlay registry
+            this.registry.deregister(dialogRef.id);
             this.removeOpenDialog(dialogRef, true);
             // Focus the trigger element after the dialog closes.
             if (activeElement instanceof HTMLElement && this.document.body.contains(activeElement)) {
@@ -324,8 +407,8 @@ class NgpDialogManager {
     }
     /**
      * Subscribe to router navigation events so that dialogs with `closeOnNavigation`
-     * are closed when the user navigates programmatically (e.g. router.navigate()).
-     * CDK's `disposeOnNavigation` only handles browser popstate events.
+     * are closed when the user navigates. This handles both browser popstate events
+     * and programmatic route changes (e.g. router.navigate()).
      */
     subscribeToRouterEvents() {
         if (this.routerSubscription || !this.router) {
@@ -361,33 +444,19 @@ class NgpDialogManager {
         this.openDialogsAtThisLevel = [];
         this.routerSubscription?.unsubscribe();
     }
-    /**
-     * Creates an overlay config from a dialog config.
-     */
-    getOverlayConfig(config) {
-        const state = new OverlayConfig({
-            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
-            scrollStrategy: config.scrollStrategy || this.scrollStrategy,
-            hasBackdrop: false,
-            disposeOnNavigation: config.closeOnNavigation,
-            // required for v21 - the CDK launches overlays using the popover api which means any other overlays
-            // such as select dropdowns, or tooltips will appear behind the dialog, regardless of z-index
-            // this disables the use of popovers
-            usePopover: false,
-        });
-        return state;
-    }
     /**
      * Creates a custom injector to be used inside the dialog. This allows a component loaded inside
      * of a dialog to close itself and, optionally, to return a value.
      */
-    createInjector(config, dialogRef, fallbackInjector) {
+    createInjector(config, dialogRef) {
         const userInjector = config.injector || config.viewContainerRef?.injector;
         const providers = [
             { provide: NgpDialogRef, useValue: dialogRef },
             { provide: NgpExitAnimationManager, useClass: NgpExitAnimationManager },
         ];
-        return Injector.create({ parent: userInjector || fallbackInjector, providers });
+        // Fall back to the service's own injector (root injector) to ensure
+        // ApplicationRef and other platform providers are available.
+        return Injector.create({ parent: userInjector || this.injector, providers });
     }
     /**
      * Removes a dialog from the array of open dialogs.
@@ -408,27 +477,44 @@ class NgpDialogManager {
                     }
                 });
                 this.ariaHiddenElements.clear();
+                this.disableScrollBlocking();
                 if (emitEvent) {
                     this.getAfterAllClosed().next();
                 }
             }
         }
     }
-    /** Hides all of the content that isn't an overlay from assistive technology. */
-    hideNonDialogContentFromAssistiveTechnology() {
-        const overlayContainer = this.overlayContainer.getContainerElement();
-        // Ensure that the overlay container is attached to the DOM.
-        if (overlayContainer.parentElement) {
-            const siblings = overlayContainer.parentElement.children;
-            for (let i = siblings.length - 1; i > -1; i--) {
-                const sibling = siblings[i];
-                if (sibling !== overlayContainer &&
-                    sibling.nodeName !== 'SCRIPT' &&
-                    sibling.nodeName !== 'STYLE' &&
-                    !sibling.hasAttribute('aria-live')) {
-                    this.ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
-                    sibling.setAttribute('aria-hidden', 'true');
-                }
+    /**
+     * Enable scroll blocking when the first dialog opens.
+     */
+    enableScrollBlocking(config) {
+        if (!this.scrollStrategy) {
+            this.scrollStrategy =
+                config?.scrollStrategy ?? new BlockScrollStrategy(this.viewportRuler, this.document);
+        }
+        this.scrollStrategy.enable();
+    }
+    /**
+     * Disable scroll blocking when the last dialog closes.
+     */
+    disableScrollBlocking() {
+        this.scrollStrategy?.disable();
+        this.scrollStrategy = null;
+    }
+    /**
+     * Hides all of the content that isn't a dialog portal from assistive technology.
+     */
+    hideNonDialogContentFromAssistiveTechnology(portalElements) {
+        const body = this.document.body;
+        const bodyChildren = body.children;
+        for (let i = bodyChildren.length - 1; i > -1; i--) {
+            const sibling = bodyChildren[i];
+            if (!portalElements.includes(sibling) &&
+                sibling.nodeName !== 'SCRIPT' &&
+                sibling.nodeName !== 'STYLE' &&
+                !sibling.hasAttribute('aria-live')) {
+                this.ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
+                sibling.setAttribute('aria-hidden', 'true');
             }
         }
     }