@almoamendev/ngx-md3 0.0.16 → 0.1.0

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -10,6 +10,8 @@ import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import * as i2 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { FormControlName } from '@angular/forms';
+import { CdkDialogContainer, Dialog as Dialog$1 } from '@angular/cdk/dialog';
+import { hasModifierKey } from '@angular/cdk/keycodes';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 
 class TypeDisplay {
@@ -3087,42 +3089,139 @@ const DIALOG_DATA = new InjectionToken('MD3_DIALOG_DATA');
 const DIALOG_CONFIG = new InjectionToken('MD3_DIALOG_CONFIG');
 const DIALOG_COMPONENT = new InjectionToken('MD3_DIALOG_COMPONENT');
 const DIALOG_EXIT_ANIMATION_FALLBACK_MS = 300;
+const HIDDEN_CLASS = 'md3-dialog-hidden';
 class DialogRef {
-    overlayRef;
-    previouslyFocusedElement;
+    cdkRef;
     closed = new Subject();
-    isClosed = false;
+    closing = new Subject();
+    closePromise = null;
+    closeStarted = false;
+    closeSettled = false;
+    hidden = false;
     dialogInstance;
     /**
      * Filled by DialogService after the user component is attached. Keeping the
      * instance here lets callers imperatively update inputs when that is useful.
      */
     componentInstance;
-    constructor(overlayRef, previouslyFocusedElement) {
-        this.overlayRef = overlayRef;
-        this.previouslyFocusedElement = previouslyFocusedElement;
+    /** Overlay hosting the dialog, useful to reach the panel and the scrim. */
+    get overlayRef() {
+        return this.cdkRef.overlayRef;
+    }
+    /** Whether the dialog started closing. Such a dialog cannot be hidden or shown anymore. */
+    get isClosing() {
+        return this.closeStarted;
+    }
+    /** Whether the dialog is currently hidden behind another dialog. */
+    get isHidden() {
+        return this.hidden;
+    }
+    constructor(cdkRef, disableCloseEvents) {
+        this.cdkRef = cdkRef;
+        // Closing always goes through this reference so the exit animation can
+        // run before the CDK disposes the overlay. Detachments triggered from
+        // the outside (navigation, scroll strategy) still settle this ref.
+        this.cdkRef.closed.pipe(take(1)).subscribe((result) => this.settle(result));
+        if (!disableCloseEvents) {
+            this.connectCloseEvents();
+        }
     }
+    /** Closes the dialog. The promise resolves once the exit animation is done. */
     close(result) {
-        if (this.isClosed) {
+        if (this.closePromise) {
+            return this.closePromise;
+        }
+        this.startClosing();
+        this.closePromise = this.startCloseAnimation().then(() => this.cdkRef.close(result));
+        return this.closePromise;
+    }
+    /**
+     * Hides the dialog with the closing animation while keeping it alive, so
+     * its content, form state and subscriptions survive until show() is called.
+     * The promise resolves once the dialog is out of sight.
+     */
+    hide() {
+        if (this.hidden || this.closeStarted) {
+            return Promise.resolve();
+        }
+        this.hidden = true;
+        this.toggleHiddenState(true);
+        this.dialogInstance?.isActive.set(false);
+        return this.waitForSurfaceAnimation();
+    }
+    /**
+     * Brings a hidden dialog back with the opening animation. Focus moves back
+     * into the dialog even when it was never hidden, which is what makes it
+     * usable again once the dialog above it closes.
+     */
+    show() {
+        if (this.closeStarted) {
             return;
         }
-        this.isClosed = true;
-        this.startCloseAnimation().then(() => {
-            // Disposing the overlay removes the wrapper, the backdrop, and the
-            // dynamically attached content component in one operation.
-            this.overlayRef.dispose();
-            this.previouslyFocusedElement?.focus();
-            this.closed.next(result);
-            this.closed.complete();
+        if (this.hidden) {
+            this.hidden = false;
+            this.toggleHiddenState(false);
+            this.dialogInstance?.isActive.set(true);
+        }
+        this.dialogInstance?._recaptureFocus();
+    }
+    /** Emits when the dialog starts closing, before the exit animation runs. */
+    beforeClosed() {
+        return this.closing.asObservable();
+    }
+    afterClosed() {
+        return this.closed.asObservable();
+    }
+    connectCloseEvents() {
+        // The CDK config keeps `disableClose` on, so the scrim and Escape key
+        // are handled here instead and the dialog can animate out.
+        this.cdkRef.backdropClick.pipe(take(1)).subscribe(() => {
+            this.cdkRef.containerInstance._closeInteractionType = 'mouse';
+            this.close();
+        });
+        this.cdkRef.keydownEvents.pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)), take(1)).subscribe((event) => {
+            event.preventDefault();
+            this.cdkRef.containerInstance._closeInteractionType = 'keyboard';
+            this.close();
         });
     }
+    toggleHiddenState(isHidden) {
+        const overlayRef = this.cdkRef.overlayRef;
+        const panel = overlayRef.overlayElement;
+        const backdrop = overlayRef.backdropElement;
+        panel.classList.toggle(HIDDEN_CLASS, isHidden);
+        backdrop?.classList.toggle(HIDDEN_CLASS, isHidden);
+        // `inert` keeps a hidden dialog out of the tab order and away from
+        // assistive technology without removing it from the DOM.
+        if (isHidden) {
+            panel.setAttribute('inert', '');
+        }
+        else {
+            panel.removeAttribute('inert');
+        }
+    }
+    startClosing() {
+        if (this.closeStarted) {
+            return;
+        }
+        this.closeStarted = true;
+        this.closing.next();
+        this.closing.complete();
+    }
     startCloseAnimation() {
-        let panel = this.overlayRef.overlayElement;
-        let backdrop = this.overlayRef.backdropElement;
-        let animatedElement = panel.querySelector('.md3-dialog-container') ?? panel;
-        panel.classList.add('md3-dialog-closing');
-        backdrop?.classList.add('md3-dialog-closing');
+        const overlayRef = this.cdkRef.overlayRef;
+        const wasVisible = !this.hidden;
+        overlayRef.overlayElement.classList.add('md3-dialog-closing');
+        overlayRef.backdropElement?.classList.add('md3-dialog-closing');
         this.dialogInstance?.isActive.set(false);
+        // A hidden dialog already played the exit animation, so there is
+        // nothing left to transition and it can be disposed right away.
+        return wasVisible ? this.waitForSurfaceAnimation() : Promise.resolve();
+    }
+    /** Resolves when the surface finished animating, with a timeout as a safety net. */
+    waitForSurfaceAnimation() {
+        const panel = this.cdkRef.overlayRef.overlayElement;
+        const surface = panel.querySelector('.md3-dialog-container') ?? panel;
         return new Promise((resolve) => {
             let isResolved = false;
             let timeoutId = setTimeout(done, DIALOG_EXIT_ANIMATION_FALLBACK_MS);
@@ -3132,82 +3231,182 @@ class DialogRef {
                 }
                 isResolved = true;
                 clearTimeout(timeoutId);
-                animatedElement.removeEventListener('transitionend', onTransitionEnd);
+                surface.removeEventListener('transitionend', onTransitionEnd);
                 resolve();
             }
             function onTransitionEnd(event) {
-                if (event.target === animatedElement) {
+                if (event.target === surface) {
                     done();
                 }
             }
-            animatedElement.addEventListener('transitionend', onTransitionEnd);
+            surface.addEventListener('transitionend', onTransitionEnd);
         });
     }
-    afterClosed() {
-        return this.closed.asObservable();
+    /** Emits the result once the CDK reference is closed. Focus is restored by the container. */
+    settle(result) {
+        if (this.closeSettled) {
+            return;
+        }
+        // Covers detachments that did not go through close(), so anything
+        // waiting on beforeClosed() is still notified.
+        this.startClosing();
+        this.closeSettled = true;
+        this.closed.next(result);
+        this.closed.complete();
     }
 }
 
-class Dialog {
-    portalOutlet = viewChild(CdkPortalOutlet, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "portalOutlet" }] : /* istanbul ignore next */ []));
+/**
+ * Material 3 dialog shell. It extends the CDK dialog container, so focus
+ * trapping, focus restoration and the ARIA attributes are handled by the CDK
+ * while this component only owns the MD3 surface and its animation.
+ */
+class Dialog extends CdkDialogContainer {
     isActive = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
     config = inject(DIALOG_CONFIG, { optional: true }) ?? {};
-    get role() {
-        return this.config.role ?? 'dialog';
-    }
-    ngAfterContentInit() {
+    /**
+     * Started by DialogService, either right after the dialog is created or
+     * once the dialog it replaces has finished animating out. The animation
+     * runs on the next frame so the surface has a real from/to state.
+     */
+    startEnterAnimation() {
         requestAnimationFrame(() => {
             this.isActive.set(true);
         });
     }
     /**
-     * The service creates this wrapper first, then calls this method to mount
-     * the user supplied component into the dialog container.
+     * @deprecated The CDK dialog service attaches the content. Kept for
+     * backwards compatibility and will be removed in a future release.
      */
     attachContent(component, injector) {
-        const portal = new ComponentPortal(component, null, injector);
-        return this.portalOutlet().attachComponentPortal(portal);
+        return this.attachComponentPortal(new ComponentPortal(component, null, injector));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Dialog, isStandalone: true, selector: "md3-dialog", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\"\n    tabindex=\"-1\"\n    [attr.role]=\"role\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"config.ariaLabel ?? null\"\n    [attr.aria-labelledby]=\"config.ariaLabelledBy ?? null\"\n    [attr.aria-describedby]=\"config.ariaDescribedBy ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: Dialog, isStandalone: true, selector: "md3-dialog", usesInheritance: true, ngImport: i0, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-hidden{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-kept{opacity:.32;transition:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-instant{transition:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em;outline:0}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
             args: [{ selector: 'md3-dialog', imports: [
                         CdkPortalOutlet,
-                    ], template: "<section\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\"\n    tabindex=\"-1\"\n    [attr.role]=\"role\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"config.ariaLabel ?? null\"\n    [attr.aria-labelledby]=\"config.ariaLabelledBy ?? null\"\n    [attr.aria-describedby]=\"config.ariaDescribedBy ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"] }]
-        }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
+                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    class=\"md3-dialog-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [attr.dir]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</section>\n", styles: ["::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;inset:0;pointer-events:none;font-size:1rem}::ng-deep .cdk-overlay-container .md3-dialog-scrim{position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);opacity:.32}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-opening{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-closing{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-hidden{opacity:0}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-kept{opacity:.32;transition:none}::ng-deep .cdk-overlay-container .md3-dialog-scrim.md3-dialog-scrim-instant{transition:none}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;padding:3.5rem 1.5rem;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel{position:absolute;pointer-events:auto;max-width:35em}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;max-width:100%;min-width:17.5em;outline:0}:host .md3-dialog-container{display:block;width:100%;max-height:inherit;overflow:auto;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-high));border-radius:var(--md-border-radius-xlarge);box-shadow:var(--md-shadow-6dp);transform-origin:center;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:scaleY(.8);margin-top:-8rem}:host .md3-dialog-container.md3-active{opacity:1;transform:scaleY(1);margin-top:0}\n"] }]
+        }] });
 
+const OPENING_CLASS = 'md3-dialog-opening';
+const SCRIM_KEPT_CLASS = 'md3-dialog-scrim-kept';
+const SCRIM_INSTANT_CLASS = 'md3-dialog-scrim-instant';
+/**
+ * Head start given to a dialog that leaves the screen before the dialog taking
+ * its place animates in. Long enough to read as one dialog replacing another,
+ * short enough to still feel like a single gesture.
+ */
+const DIALOG_HANDOVER_DELAY_MS = 160;
 class DialogService {
+    cdkDialog = inject(Dialog$1);
     overlay = inject(Overlay);
     injector = inject(Injector);
     document = inject(DOCUMENT);
+    /** Open dialogs, from the first one opened to the one currently on top. */
+    refs = [];
+    /**
+     * Page scrolling is blocked here instead of per overlay, so stacked dialogs
+     * cannot unblock the page while another dialog is still open.
+     */
+    scrollBlock = this.overlay.scrollStrategies.block();
+    /** Element that was focused before the first dialog of the stack opened. */
+    rootTrigger = null;
+    get openDialogs() {
+        return this.refs;
+    }
     open(component, config = {}) {
         const dialogConfig = this.mergeConfig(config);
-        const previouslyFocusedElement = this.getFocusedElement();
-        const overlayRef = this.createOverlay();
-        const dialogRef = new DialogRef(overlayRef, previouslyFocusedElement);
-        const injector = this.createInjector(component, dialogConfig, dialogRef);
-        // The overlay hosts the MD3 dialog shell. The shell is responsible for
-        // the surface markup and receives the dynamic content through a portal.
-        const dialogPortal = new ComponentPortal(Dialog, dialogConfig.viewContainerRef ?? null, injector);
-        const dialogComponentRef = overlayRef.attach(dialogPortal);
-        const contentComponentRef = dialogComponentRef.instance.attachContent(component, injector);
-        this.bindDataToInputs(contentComponentRef, dialogConfig);
-        dialogRef.componentInstance = contentComponentRef.instance;
-        dialogRef.dialogInstance = dialogComponentRef.instance;
-        this.startOpenAnimation(overlayRef);
-        this.connectCloseEvents(overlayRef, dialogRef, dialogConfig);
-        this.focusDialog(overlayRef);
+        if (this.refs.length === 0) {
+            this.rootTrigger = this.getFocusedElement();
+        }
+        // The dialog that is on screen starts leaving first, so the two dialogs
+        // never animate on top of each other.
+        const previousRef = this.topRef();
+        if (previousRef) {
+            this.dismissPrevious(previousRef, dialogConfig);
+        }
+        let dialogRef;
+        const cdkRef = this.cdkDialog.open(component, {
+            // The MD3 shell replaces the default CDK container, so the overlay,
+            // focus trap and focus restoration come from the CDK while the shell
+            // only renders the surface.
+            container: {
+                type: Dialog,
+                providers: () => [
+                    { provide: DIALOG_CONFIG, useValue: dialogConfig },
+                ],
+            },
+            // These tokens make the dialog controllable from the dynamic
+            // component without coupling that component to the service.
+            providers: (cdkDialogRef) => {
+                dialogRef = new DialogRef(cdkDialogRef, dialogConfig.disableCloseEvents);
+                return [
+                    { provide: DialogRef, useValue: dialogRef },
+                    { provide: DIALOG_DATA, useValue: dialogConfig.data },
+                    { provide: DIALOG_CONFIG, useValue: dialogConfig },
+                    { provide: DIALOG_COMPONENT, useValue: component },
+                ];
+            },
+            data: dialogConfig.data,
+            role: dialogConfig.role,
+            ariaModal: true,
+            ariaLabel: dialogConfig.ariaLabel || null,
+            ariaLabelledBy: dialogConfig.ariaLabelledBy || null,
+            ariaDescribedBy: dialogConfig.ariaDescribedBy || null,
+            direction: dialogConfig.direction ?? undefined,
+            viewContainerRef: dialogConfig.viewContainerRef,
+            injector: dialogConfig.injector,
+            hasBackdrop: true,
+            backdropClass: ['md3-dialog-scrim', OPENING_CLASS],
+            panelClass: ['md3-dialog-panel', OPENING_CLASS],
+            positionStrategy: this.overlay.position()
+                .global()
+                .centerHorizontally()
+                .centerVertically(),
+            // Scrolling is blocked by the service for the whole stack.
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            // Focus goes back to whatever opened the stack, even when the dialog
+            // that was open underneath has been closed in the meantime.
+            restoreFocus: this.rootTrigger ?? true,
+            // Scrim and Escape handling lives in DialogRef so the dialog can
+            // play its exit animation before the overlay is disposed.
+            disableClose: true,
+        });
+        dialogRef.dialogInstance = cdkRef.containerInstance;
+        dialogRef.componentInstance = cdkRef.componentInstance ?? undefined;
+        if (cdkRef.componentRef) {
+            this.bindDataToInputs(cdkRef.componentRef, dialogConfig);
+        }
+        this.refs.push(dialogRef);
+        this.updateScrollBlock();
+        if (previousRef) {
+            setTimeout(() => this.startReplacingAnimation(dialogRef, previousRef), DIALOG_HANDOVER_DELAY_MS);
+        }
+        else {
+            this.startOpenAnimation(dialogRef);
+        }
+        // Restoring starts with the exit animation, so the dialog underneath is
+        // already coming back while this one is fading out.
+        dialogRef.beforeClosed().subscribe(() => this.restorePreviousDialog(dialogRef));
+        dialogRef.afterClosed().subscribe(() => this.removeRef(dialogRef));
         return dialogRef;
     }
+    /** Closes every open dialog, including the hidden ones. */
+    closeAll() {
+        // Closed from the bottom up so a closing dialog never brings back a
+        // hidden dialog that is about to close as well.
+        return Promise.all([...this.refs].map((ref) => ref.close())).then(() => undefined);
+    }
     mergeConfig(config) {
         return {
             data: config.data,
             bindDataToInputs: config.bindDataToInputs ?? false,
             disableCloseEvents: config.disableCloseEvents ?? false,
+            previousDialog: config.previousDialog ?? 'close',
             role: config.role ?? 'dialog',
             ariaLabel: config.ariaLabel ?? '',
             ariaLabelledBy: config.ariaLabelledBy ?? '',
@@ -3218,20 +3417,17 @@ class DialogService {
             injector: config.injector ?? this.injector,
         };
     }
-    createOverlay() {
-        const overlayConfig = new OverlayConfig({
-            hasBackdrop: true,
-            backdropClass: ['md3-dialog-scrim', 'md3-dialog-opening'],
-            panelClass: ['md3-dialog-panel', 'md3-dialog-opening'],
-            positionStrategy: this.overlay.position()
-                .global()
-                .centerHorizontally()
-                .centerVertically(),
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-        });
-        return this.overlay.create(overlayConfig);
+    /**
+     * Hides or closes the dialog that is on screen. Its scrim stays up until
+     * the dialog taking over is ready for it, so the page behind never
+     * brightens between the two dialogs.
+     */
+    dismissPrevious(previousRef, config) {
+        previousRef.overlayRef.backdropElement?.classList.add(SCRIM_KEPT_CLASS);
+        return config.previousDialog === 'hide' ? previousRef.hide() : this.closeAll();
     }
-    startOpenAnimation(overlayRef) {
+    startOpenAnimation(dialogRef) {
+        const overlayRef = dialogRef.overlayRef;
         const panel = overlayRef.overlayElement;
         const backdrop = overlayRef.backdropElement;
         // The overlay is inserted already rendered. Keep an initial class for
@@ -3240,22 +3436,53 @@ class DialogService {
         requestAnimationFrame(() => {
             setTimeout(() => {
                 panel.getBoundingClientRect();
-                panel.classList.remove('md3-dialog-opening');
-                backdrop?.classList.remove('md3-dialog-opening');
+                panel.classList.remove(OPENING_CLASS);
+                backdrop?.classList.remove(OPENING_CLASS);
             }, 100);
         });
+        dialogRef.dialogInstance?.startEnterAnimation();
     }
-    createInjector(component, config, dialogRef) {
-        return Injector.create({
-            parent: config.injector,
-            providers: [
-                // These tokens make the dialog controllable from the dynamic
-                // component without coupling that component to the service.
-                { provide: DialogRef, useValue: dialogRef },
-                { provide: DIALOG_DATA, useValue: config.data },
-                { provide: DIALOG_CONFIG, useValue: config },
-                { provide: DIALOG_COMPONENT, useValue: component },
-            ],
+    /** Opening animation for a dialog that took the place of another one. */
+    startReplacingAnimation(dialogRef, previousRef) {
+        if (dialogRef.isClosing) {
+            return;
+        }
+        const panel = dialogRef.overlayRef.overlayElement;
+        const backdrop = dialogRef.overlayRef.backdropElement;
+        this.beginScrimHandover(previousRef, dialogRef);
+        panel.getBoundingClientRect();
+        panel.classList.remove(OPENING_CLASS);
+        backdrop?.classList.remove(OPENING_CLASS);
+        this.endScrimHandover(previousRef, dialogRef);
+        dialogRef.dialogInstance?.startEnterAnimation();
+    }
+    /** Opening animation for a dialog coming back from behind a closing one. */
+    startRestoringAnimation(closingRef, previousRef) {
+        if (previousRef.isClosing) {
+            return;
+        }
+        this.beginScrimHandover(closingRef, previousRef);
+        previousRef.show();
+        this.endScrimHandover(closingRef, previousRef);
+    }
+    /**
+     * Moves both scrims to their new value in a single frame, without a
+     * transition on either side, so the dim behind the dialogs never changes.
+     */
+    beginScrimHandover(fromRef, toRef) {
+        const from = fromRef.overlayRef.backdropElement;
+        const to = toRef.overlayRef.backdropElement;
+        from?.classList.add(SCRIM_INSTANT_CLASS);
+        from?.classList.remove(SCRIM_KEPT_CLASS);
+        to?.classList.add(SCRIM_INSTANT_CLASS);
+    }
+    /** Gives the scrims their transitions back once the handover is painted. */
+    endScrimHandover(fromRef, toRef) {
+        const from = fromRef.overlayRef.backdropElement;
+        const to = toRef.overlayRef.backdropElement;
+        requestAnimationFrame(() => {
+            from?.classList.remove(SCRIM_INSTANT_CLASS);
+            to?.classList.remove(SCRIM_INSTANT_CLASS);
         });
     }
     bindDataToInputs(componentRef, config) {
@@ -3268,34 +3495,58 @@ class DialogService {
             componentRef.setInput(inputName, inputValue);
         });
     }
-    connectCloseEvents(overlayRef, dialogRef, config) {
-        if (config.disableCloseEvents) {
+    canBindDataToInputs(data) {
+        return typeof data === 'object' && data !== null && !Array.isArray(data);
+    }
+    /** Last dialog of the stack that is not closing yet. */
+    topRef() {
+        for (let index = this.refs.length - 1; index >= 0; index--) {
+            if (!this.refs[index].isClosing) {
+                return this.refs[index];
+            }
+        }
+        return undefined;
+    }
+    restorePreviousDialog(ref) {
+        const index = this.refs.indexOf(ref);
+        if (index < 1) {
+            return;
+        }
+        for (let previousIndex = index - 1; previousIndex >= 0; previousIndex--) {
+            const previousRef = this.refs[previousIndex];
+            if (previousRef.isClosing) {
+                continue;
+            }
+            // The closing dialog gets the same head start it was given when it
+            // took the screen, and keeps the scrim until then.
+            ref.overlayRef.backdropElement?.classList.add(SCRIM_KEPT_CLASS);
+            setTimeout(() => this.startRestoringAnimation(ref, previousRef), DIALOG_HANDOVER_DELAY_MS);
             return;
         }
-        overlayRef.backdropClick().pipe(take(1)).subscribe(() => dialogRef.close());
-        overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape'), take(1)).subscribe(() => dialogRef.close());
-    }
-    focusDialog(overlayRef) {
-        queueMicrotask(() => {
-            const surface = overlayRef.overlayElement.querySelector('.md3-dialog-container');
-            const focusTarget = surface?.querySelector([
-                'button:not([disabled])',
-                '[href]',
-                'input:not([disabled])',
-                'select:not([disabled])',
-                'textarea:not([disabled])',
-                '[tabindex]:not([tabindex="-1"])',
-            ].join(', '));
-            (focusTarget ?? surface)?.focus();
-        });
+    }
+    removeRef(ref) {
+        const index = this.refs.indexOf(ref);
+        if (index === -1) {
+            return;
+        }
+        this.refs.splice(index, 1);
+        if (this.refs.length === 0) {
+            this.rootTrigger = null;
+        }
+        this.updateScrollBlock();
+    }
+    updateScrollBlock() {
+        if (this.refs.length > 0) {
+            this.scrollBlock.enable();
+        }
+        else {
+            this.scrollBlock.disable();
+        }
     }
     getFocusedElement() {
         const activeElement = this.document.activeElement;
         return activeElement instanceof HTMLElement ? activeElement : null;
     }
-    canBindDataToInputs(data) {
-        return typeof data === 'object' && data !== null && !Array.isArray(data);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogService, providedIn: 'root' });
 }