@almoamendev/ngx-md3 0.1.0 → 0.2.1

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -559,7 +559,7 @@ class SideSheet {
         return this.portalOutlet.attachComponentPortal(portal);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SideSheet, deps: [{ token: LayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: SideSheet, isStandalone: true, selector: "md3-side-sheet", host: { properties: { "class.md3-active": "isActive()", "class.md3-hidden": "isHidden()", "class.md3-start": "side() === \"start\"", "class.md3-end": "side() === \"end\"", "class.md3-inset": "isInset()", "class.md3-show-divider": "showDivider()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"md3-side-sheet-scrim\" (click)=\"close()\"></div>\n<div class=\"md3-side-sheet-container\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-large);--elevation: var(--md-shadow-0dp);--hidden-offset: 80%;position:relative;height:100%;width:100%;min-height:0;pointer-events:none;z-index:1}:host .md3-side-sheet-scrim{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container{flex:1 1 auto;position:relative;max-width:25em;min-width:16em;height:100%;overflow:hidden;pointer-events:all;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);opacity:0;transform:translate(var(--hidden-offset));transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;height:100%;overflow:hidden}:host.md3-hidden .md3-side-sheet-container{pointer-events:none;opacity:0;transform:translate(var(--hidden-offset))}:host.md3-active .md3-side-sheet-container{pointer-events:all;opacity:1;transform:translate(0)}:host.md3-show-divider .md3-side-sheet-container:before{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;opacity:0;background-color:rgb(var(--md-scheme-outline));pointer-events:none}:host.md3-start{--hidden-offset: -80%}:host.md3-start.md3-style-modal{inset-inline-start:0}:host.md3-start .md3-side-sheet-container{border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host.md3-start.md3-show-divider .md3-side-sheet-container:before{inset-inline-end:0}:host.md3-end{--hidden-offset: 80%}:host.md3-end.md3-style-modal{inset-inline-end:0}:host.md3-end .md3-side-sheet-container{border-start-start-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}:host.md3-end.md3-show-divider .md3-side-sheet-container:before{inset-inline-start:0}:host.md3-style-standard .md3-side-sheet-container{--background-color: rgb(var(--md-scheme-surface));--border-radius: var(--md-border-radius-none)}:host.md3-style-standard.md3-show-divider .md3-side-sheet-container:before{opacity:1}:host.md3-style-default.md3-inset{padding:1em}:host.md3-style-default.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal{--elevation: var(--md-shadow-1dp);position:fixed;top:0;bottom:0;z-index:500}:host.md3-style-modal .md3-side-sheet-scrim{display:block}:host.md3-style-modal.md3-active .md3-side-sheet-scrim{pointer-events:all;opacity:.32}:host.md3-style-modal.md3-inset{padding:1em}:host.md3-style-modal.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal.md3-end .md3-side-sheet-container{margin-inline-start:auto}:host ::ng-deep md3-nav-group [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:before,:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: SideSheet, isStandalone: true, selector: "md3-side-sheet", host: { properties: { "class.md3-active": "isActive()", "class.md3-hidden": "isHidden()", "class.md3-start": "side() === \"start\"", "class.md3-end": "side() === \"end\"", "class.md3-inset": "isInset()", "class.md3-show-divider": "showDivider()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"md3-side-sheet-scrim\" (click)=\"close()\"></div>\n<div class=\"md3-side-sheet-container\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-large);--elevation: var(--md-shadow-0dp);--hidden-offset: 80%;position:relative;height:100%;width:100%;min-height:0;pointer-events:none;z-index:1}:host .md3-side-sheet-scrim{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container{flex:1 1 auto;position:relative;max-width:16em;min-width:16em;height:100%;overflow:hidden;pointer-events:all;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);opacity:0;transform:translate(var(--hidden-offset));transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;height:100%;overflow:hidden}:host.md3-hidden .md3-side-sheet-container{pointer-events:none;opacity:0;transform:translate(var(--hidden-offset))}:host.md3-active .md3-side-sheet-container{pointer-events:all;opacity:1;transform:translate(0)}:host.md3-show-divider .md3-side-sheet-container:before{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;opacity:0;background-color:rgb(var(--md-scheme-outline));pointer-events:none}:host.md3-start{--hidden-offset: -80%}:host.md3-start.md3-style-modal{inset-inline-start:0}:host.md3-start .md3-side-sheet-container{border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host.md3-start.md3-show-divider .md3-side-sheet-container:before{inset-inline-end:0}:host.md3-end{--hidden-offset: 80%}:host.md3-end.md3-style-modal{inset-inline-end:0}:host.md3-end .md3-side-sheet-container{border-start-start-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}:host.md3-end.md3-show-divider .md3-side-sheet-container:before{inset-inline-start:0}:host.md3-style-standard .md3-side-sheet-container{--background-color: rgb(var(--md-scheme-surface));--border-radius: var(--md-border-radius-none)}:host.md3-style-standard.md3-show-divider .md3-side-sheet-container:before{opacity:1}:host.md3-style-default.md3-inset{padding:1em}:host.md3-style-default.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal{--elevation: var(--md-shadow-1dp);position:fixed;top:0;bottom:0;z-index:500}:host.md3-style-modal .md3-side-sheet-container{max-width:25em}:host.md3-style-modal .md3-side-sheet-scrim{display:block}:host.md3-style-modal.md3-active .md3-side-sheet-scrim{pointer-events:all;opacity:.32}:host.md3-style-modal.md3-inset{padding:1em}:host.md3-style-modal.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal.md3-end .md3-side-sheet-container{margin-inline-start:auto}:host ::ng-deep md3-nav-group [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:before,:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}\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: SideSheet, decorators: [{
             type: Component,
@@ -572,7 +572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.md3-end]': 'side() === "end"',
                         '[class.md3-inset]': 'isInset()',
                         '[class.md3-show-divider]': 'showDivider()',
-                    }, template: "<div class=\"md3-side-sheet-scrim\" (click)=\"close()\"></div>\n<div class=\"md3-side-sheet-container\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-large);--elevation: var(--md-shadow-0dp);--hidden-offset: 80%;position:relative;height:100%;width:100%;min-height:0;pointer-events:none;z-index:1}:host .md3-side-sheet-scrim{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container{flex:1 1 auto;position:relative;max-width:25em;min-width:16em;height:100%;overflow:hidden;pointer-events:all;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);opacity:0;transform:translate(var(--hidden-offset));transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;height:100%;overflow:hidden}:host.md3-hidden .md3-side-sheet-container{pointer-events:none;opacity:0;transform:translate(var(--hidden-offset))}:host.md3-active .md3-side-sheet-container{pointer-events:all;opacity:1;transform:translate(0)}:host.md3-show-divider .md3-side-sheet-container:before{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;opacity:0;background-color:rgb(var(--md-scheme-outline));pointer-events:none}:host.md3-start{--hidden-offset: -80%}:host.md3-start.md3-style-modal{inset-inline-start:0}:host.md3-start .md3-side-sheet-container{border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host.md3-start.md3-show-divider .md3-side-sheet-container:before{inset-inline-end:0}:host.md3-end{--hidden-offset: 80%}:host.md3-end.md3-style-modal{inset-inline-end:0}:host.md3-end .md3-side-sheet-container{border-start-start-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}:host.md3-end.md3-show-divider .md3-side-sheet-container:before{inset-inline-start:0}:host.md3-style-standard .md3-side-sheet-container{--background-color: rgb(var(--md-scheme-surface));--border-radius: var(--md-border-radius-none)}:host.md3-style-standard.md3-show-divider .md3-side-sheet-container:before{opacity:1}:host.md3-style-default.md3-inset{padding:1em}:host.md3-style-default.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal{--elevation: var(--md-shadow-1dp);position:fixed;top:0;bottom:0;z-index:500}:host.md3-style-modal .md3-side-sheet-scrim{display:block}:host.md3-style-modal.md3-active .md3-side-sheet-scrim{pointer-events:all;opacity:.32}:host.md3-style-modal.md3-inset{padding:1em}:host.md3-style-modal.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal.md3-end .md3-side-sheet-container{margin-inline-start:auto}:host ::ng-deep md3-nav-group [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:before,:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}\n"] }]
+                    }, template: "<div class=\"md3-side-sheet-scrim\" (click)=\"close()\"></div>\n<div class=\"md3-side-sheet-container\">\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-large);--elevation: var(--md-shadow-0dp);--hidden-offset: 80%;position:relative;height:100%;width:100%;min-height:0;pointer-events:none;z-index:1}:host .md3-side-sheet-scrim{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container{flex:1 1 auto;position:relative;max-width:16em;min-width:16em;height:100%;overflow:hidden;pointer-events:all;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);opacity:0;transform:translate(var(--hidden-offset));transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-side-sheet-container>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;height:100%;overflow:hidden}:host.md3-hidden .md3-side-sheet-container{pointer-events:none;opacity:0;transform:translate(var(--hidden-offset))}:host.md3-active .md3-side-sheet-container{pointer-events:all;opacity:1;transform:translate(0)}:host.md3-show-divider .md3-side-sheet-container:before{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;opacity:0;background-color:rgb(var(--md-scheme-outline));pointer-events:none}:host.md3-start{--hidden-offset: -80%}:host.md3-start.md3-style-modal{inset-inline-start:0}:host.md3-start .md3-side-sheet-container{border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius)}:host.md3-start.md3-show-divider .md3-side-sheet-container:before{inset-inline-end:0}:host.md3-end{--hidden-offset: 80%}:host.md3-end.md3-style-modal{inset-inline-end:0}:host.md3-end .md3-side-sheet-container{border-start-start-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}:host.md3-end.md3-show-divider .md3-side-sheet-container:before{inset-inline-start:0}:host.md3-style-standard .md3-side-sheet-container{--background-color: rgb(var(--md-scheme-surface));--border-radius: var(--md-border-radius-none)}:host.md3-style-standard.md3-show-divider .md3-side-sheet-container:before{opacity:1}:host.md3-style-default.md3-inset{padding:1em}:host.md3-style-default.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal{--elevation: var(--md-shadow-1dp);position:fixed;top:0;bottom:0;z-index:500}:host.md3-style-modal .md3-side-sheet-container{max-width:25em}:host.md3-style-modal .md3-side-sheet-scrim{display:block}:host.md3-style-modal.md3-active .md3-side-sheet-scrim{pointer-events:all;opacity:.32}:host.md3-style-modal.md3-inset{padding:1em}:host.md3-style-modal.md3-inset .md3-side-sheet-container{border-radius:var(--border-radius)}:host.md3-style-modal.md3-end .md3-side-sheet-container{margin-inline-start:auto}:host ::ng-deep md3-nav-group [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:before,:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host ::ng-deep md3-nav-group [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}\n"] }]
         }], ctorParameters: () => [{ type: LayoutService }, { type: i0.ElementRef }], propDecorators: { portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
@@ -605,37 +605,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 class SheetsService {
     injector = inject(Injector);
+    /**
+     * Outlets registered per side, from the page scaffold up to whatever took
+     * them over last. Sheets always open in the outlet on top, so a full screen
+     * dialog can host them while it is up and hand them back when it closes.
+     */
     states = new Map();
     registerSideSheetOutlet(side, outlet) {
-        const currentState = this.states.get(side);
-        if (currentState?.outlet === outlet) {
+        const stack = this.getOutletStack(side);
+        if (stack.some((state) => state.outlet === outlet)) {
             return;
         }
-        if (currentState) {
-            this.disposeOutletState(currentState);
-        }
         if (outlet.hasAttached()) {
             outlet.detach();
         }
         const stackPortal = new ComponentPortal(SideSheetStack, null, this.injector);
         const stackComponentRef = outlet.attachComponentPortal(stackPortal);
-        this.states.set(side, {
+        stack.push({
             outlet,
             stackComponentRef,
             refs: [],
         });
     }
     unregisterSideSheetOutlet(side, outlet) {
-        const state = this.states.get(side);
-        if (!state || state.outlet !== outlet) {
+        const stack = this.states.get(side);
+        const index = stack?.findIndex((state) => state.outlet === outlet) ?? -1;
+        if (!stack || index === -1) {
             return;
         }
-        this.disposeOutletState(state);
-        this.states.delete(side);
+        // Sheets opened in this outlet go with it, and the outlet underneath
+        // becomes the one new sheets open in.
+        this.disposeOutletState(stack[index]);
+        stack.splice(index, 1);
+        if (stack.length === 0) {
+            this.states.delete(side);
+        }
     }
     openSideSheet(component, config = {}) {
         const sheetConfig = this.mergeConfig(config);
-        const state = this.states.get(sheetConfig.side);
+        const state = this.activeState(sheetConfig.side);
         if (!state) {
             throw new Error(`No ${sheetConfig.side} side sheet outlet is registered.`);
         }
@@ -655,7 +663,19 @@ class SheetsService {
         return sheetRef;
     }
     closeSideSheet(side = 'end', result) {
-        this.getVisibleRef(this.states.get(side))?.close(result);
+        this.getVisibleRef(this.activeState(side))?.close(result);
+    }
+    /** Outlet that sheets currently open in: the last one that registered. */
+    activeState(side) {
+        const stack = this.states.get(side);
+        return stack?.[stack.length - 1];
+    }
+    getOutletStack(side) {
+        const stack = this.states.get(side) ?? [];
+        if (!this.states.has(side)) {
+            this.states.set(side, stack);
+        }
+        return stack;
     }
     mergeConfig(config) {
         return {
@@ -3092,12 +3112,14 @@ const DIALOG_EXIT_ANIMATION_FALLBACK_MS = 300;
 const HIDDEN_CLASS = 'md3-dialog-hidden';
 class DialogRef {
     cdkRef;
+    isFullScreen;
     closed = new Subject();
     closing = new Subject();
     closePromise = null;
     closeStarted = false;
     closeSettled = false;
     hidden = false;
+    /** Shell hosting the dialog: the regular dialog or the full screen one. */
     dialogInstance;
     /**
      * Filled by DialogService after the user component is attached. Keeping the
@@ -3116,8 +3138,11 @@ class DialogRef {
     get isHidden() {
         return this.hidden;
     }
-    constructor(cdkRef, disableCloseEvents) {
+    constructor(cdkRef, disableCloseEvents, 
+    /** Whether this reference belongs to a full screen dialog. */
+    isFullScreen = false) {
         this.cdkRef = cdkRef;
+        this.isFullScreen = isFullScreen;
         // 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.
@@ -3146,7 +3171,7 @@ class DialogRef {
         }
         this.hidden = true;
         this.toggleHiddenState(true);
-        this.dialogInstance?.isActive.set(false);
+        this.dialogInstance?.setActive(false);
         return this.waitForSurfaceAnimation();
     }
     /**
@@ -3161,9 +3186,9 @@ class DialogRef {
         if (this.hidden) {
             this.hidden = false;
             this.toggleHiddenState(false);
-            this.dialogInstance?.isActive.set(true);
+            this.dialogInstance?.setActive(true);
         }
-        this.dialogInstance?._recaptureFocus();
+        this.dialogInstance?.recaptureFocus();
     }
     /** Emits when the dialog starts closing, before the exit animation runs. */
     beforeClosed() {
@@ -3213,7 +3238,7 @@ class DialogRef {
         const wasVisible = !this.hidden;
         overlayRef.overlayElement.classList.add('md3-dialog-closing');
         overlayRef.backdropElement?.classList.add('md3-dialog-closing');
-        this.dialogInstance?.isActive.set(false);
+        this.dialogInstance?.setActive(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();
@@ -3221,7 +3246,7 @@ class DialogRef {
     /** 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;
+        const surface = this.dialogInstance?.surfaceElement ?? panel;
         return new Promise((resolve) => {
             let isResolved = false;
             let timeoutId = setTimeout(done, DIALOG_EXIT_ANIMATION_FALLBACK_MS);
@@ -3262,36 +3287,104 @@ class DialogRef {
  * while this component only owns the MD3 surface and its animation.
  */
 class Dialog extends CdkDialogContainer {
+    surface = viewChild('surface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
     isActive = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
     config = inject(DIALOG_CONFIG, { optional: true }) ?? {};
+    get surfaceElement() {
+        return this.surface()?.nativeElement ?? null;
+    }
     /**
      * 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.
+     * once the dialog it replaces has had its head start. The animation runs on
+     * the next frame so the surface has a real from/to state.
      */
     startEnterAnimation() {
         requestAnimationFrame(() => {
             this.isActive.set(true);
         });
     }
-    /**
-     * @deprecated The CDK dialog service attaches the content. Kept for
-     * backwards compatibility and will be removed in a future release.
-     */
-    attachContent(component, injector) {
-        return this.attachComponentPortal(new ComponentPortal(component, null, injector));
+    setActive(value) {
+        this.isActive.set(value);
+    }
+    recaptureFocus() {
+        this._recaptureFocus();
     }
     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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Dialog, isStandalone: true, selector: "md3-dialog", viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\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: "<!-- 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"] }]
-        }] });
+                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\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"] }]
+        }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }] } });
 
+/**
+ * Material 3 full screen dialog shell. It covers the viewport and lays its
+ * content out like the scaffold does, with a main pane and a side sheet outlet
+ * on each side, so side sheets opened while it is up land inside the dialog
+ * instead of behind it.
+ */
+class FullScreenDialog extends CdkDialogContainer {
+    surface = viewChild('surface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    startOutlet = viewChild('startOutlet', { ...(ngDevMode ? { debugName: "startOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
+    endOutlet = viewChild('endOutlet', { ...(ngDevMode ? { debugName: "endOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
+    sheets = inject(SheetsService);
+    isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    config = inject(DIALOG_CONFIG, { optional: true }) ?? {};
+    get surfaceElement() {
+        return this.surface()?.nativeElement ?? null;
+    }
+    ngAfterViewInit() {
+        const startOutlet = this.startOutlet();
+        const endOutlet = this.endOutlet();
+        // Taking the outlets over is what sends the next side sheet inside the
+        // dialog. The scaffold gets them back when this dialog is destroyed.
+        if (startOutlet) {
+            this.sheets.registerSideSheetOutlet('start', startOutlet);
+        }
+        if (endOutlet) {
+            this.sheets.registerSideSheetOutlet('end', endOutlet);
+        }
+    }
+    ngOnDestroy() {
+        const startOutlet = this.startOutlet();
+        const endOutlet = this.endOutlet();
+        if (startOutlet) {
+            this.sheets.unregisterSideSheetOutlet('start', startOutlet);
+        }
+        if (endOutlet) {
+            this.sheets.unregisterSideSheetOutlet('end', endOutlet);
+        }
+        super.ngOnDestroy();
+    }
+    startEnterAnimation() {
+        requestAnimationFrame(() => {
+            this.isActive.set(true);
+        });
+    }
+    setActive(value) {
+        this.isActive.set(value);
+    }
+    recaptureFocus() {
+        this._recaptureFocus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialog, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: FullScreenDialog, isStandalone: true, selector: "md3-fullscreen-dialog", viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }, { propertyName: "startOutlet", first: true, predicate: ["startOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "endOutlet", first: true, predicate: ["endOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-fullscreen-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    <div class=\"md3-panes-container md3-scrollable\">\n        <!--\n            The CDK attaches the dialog content to the first portal outlet of\n            this template, so the main pane has to come first. The panes are\n            placed by grid area, which makes the DOM order irrelevant visually.\n        -->\n        <div class=\"md3-pane md3-pane-main\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n        <div class=\"md3-pane md3-pane-start\">\n            <ng-template #startOutlet cdkPortalOutlet></ng-template>\n        </div>\n        <div class=\"md3-pane md3-pane-end\">\n            <ng-template #endOutlet cdkPortalOutlet></ng-template>\n        </div>\n    </div>\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 .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper:has(>.md3-fullscreen-dialog-panel){padding:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel{width:100%;height:100%;max-width:none;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;height:100%;width:100%;outline:0}:host .md3-fullscreen-dialog-container{display:grid;grid-template-rows:minmax(0,1fr);height:100%;min-height:0;overflow:hidden;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface));transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:translateY(1.5em)}:host .md3-fullscreen-dialog-container.md3-active{opacity:1;transform:none}:host .md3-panes-container{display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0;min-height:0;height:100%;overflow:hidden}:host .md3-panes-container .md3-pane.md3-pane-start{grid-area:start}:host .md3-panes-container .md3-pane.md3-pane-main{position:relative;grid-area:main;z-index:1;display:grid;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\";grid-template-rows:auto minmax(0,1fr) auto;min-height:0;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--md-scheme-outline-variant)) transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar{width:.5rem;height:.5rem}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar-track{background:transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *>md3-dialog-body{grid-area:body;margin:0;padding:1em 1.5em;overflow-y:visible;height:auto}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\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: FullScreenDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-fullscreen-dialog', imports: [
+                        CdkPortalOutlet,
+                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<section\n    #surface\n    class=\"md3-fullscreen-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    <div class=\"md3-panes-container md3-scrollable\">\n        <!--\n            The CDK attaches the dialog content to the first portal outlet of\n            this template, so the main pane has to come first. The panes are\n            placed by grid area, which makes the DOM order irrelevant visually.\n        -->\n        <div class=\"md3-pane md3-pane-main\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n        <div class=\"md3-pane md3-pane-start\">\n            <ng-template #startOutlet cdkPortalOutlet></ng-template>\n        </div>\n        <div class=\"md3-pane md3-pane-end\">\n            <ng-template #endOutlet cdkPortalOutlet></ng-template>\n        </div>\n    </div>\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 .cdk-global-overlay-wrapper{position:absolute;display:flex;inset:0;pointer-events:none;overflow:hidden}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper:has(>.md3-fullscreen-dialog-panel){padding:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel{width:100%;height:100%;max-width:none;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel.md3-dialog-closing,::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-fullscreen-dialog-panel.md3-dialog-hidden{pointer-events:none}:host{display:block;height:100%;width:100%;outline:0}:host .md3-fullscreen-dialog-container{display:grid;grid-template-rows:minmax(0,1fr);height:100%;min-height:0;overflow:hidden;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface));transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);opacity:0;transform:translateY(1.5em)}:host .md3-fullscreen-dialog-container.md3-active{opacity:1;transform:none}:host .md3-panes-container{display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;overflow:hidden}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0;min-height:0;height:100%;overflow:hidden}:host .md3-panes-container .md3-pane.md3-pane-start{grid-area:start}:host .md3-panes-container .md3-pane.md3-pane-main{position:relative;grid-area:main;z-index:1;display:grid;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *{display:grid;grid-template-areas:\"header\" \"body\";grid-template-rows:auto minmax(0,1fr) auto;min-height:0;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--md-scheme-outline-variant)) transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar{width:.5rem;height:.5rem}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *::-webkit-scrollbar-track{background:transparent}:host .md3-panes-container .md3-pane.md3-pane-main>::ng-deep *>md3-dialog-body{grid-area:body;margin:0;padding:1em 1.5em;overflow-y:visible;height:auto}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
+        }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], startOutlet: [{ type: i0.ViewChild, args: ['startOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], endOutlet: [{ type: i0.ViewChild, args: ['endOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }] } });
+
+const PANEL_CLASS = 'md3-dialog-panel';
+const FULL_SCREEN_PANEL_CLASS = 'md3-fullscreen-dialog-panel';
 const OPENING_CLASS = 'md3-dialog-opening';
 const SCRIM_KEPT_CLASS = 'md3-dialog-scrim-kept';
 const SCRIM_INSTANT_CLASS = 'md3-dialog-scrim-instant';
@@ -3318,16 +3411,21 @@ class DialogService {
     get openDialogs() {
         return this.refs;
     }
+    /** The full screen dialog that is open, if there is one. */
+    get fullScreenDialog() {
+        return this.refs.find((ref) => ref.isFullScreen && !ref.isClosing);
+    }
     open(component, config = {}) {
         const dialogConfig = this.mergeConfig(config);
         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();
+        // never animate on top of each other. A full screen dialog is not part
+        // of this: regular dialogs open on top of it and leave it alone.
+        const previousRef = this.topRegularRef();
         if (previousRef) {
-            this.dismissPrevious(previousRef, dialogConfig);
+            this.dismissPrevious(previousRef, dialogConfig.previousDialog);
         }
         let dialogRef;
         const cdkRef = this.cdkDialog.open(component, {
@@ -3362,7 +3460,7 @@ class DialogService {
             injector: dialogConfig.injector,
             hasBackdrop: true,
             backdropClass: ['md3-dialog-scrim', OPENING_CLASS],
-            panelClass: ['md3-dialog-panel', OPENING_CLASS],
+            panelClass: [PANEL_CLASS, OPENING_CLASS],
             positionStrategy: this.overlay.position()
                 .global()
                 .centerHorizontally()
@@ -3376,6 +3474,72 @@ class DialogService {
             // play its exit animation before the overlay is disposed.
             disableClose: true,
         });
+        this.registerDialog(dialogRef, cdkRef, dialogConfig, previousRef);
+        return dialogRef;
+    }
+    /**
+     * Opens a dialog that covers the whole screen. Only one can be open at a
+     * time, so it replaces whatever is open, and while it is up the side sheet
+     * outlets belong to it: side sheets open inside the dialog, not behind it.
+     */
+    openFullScreen(component, config = {}) {
+        const dialogConfig = this.mergeConfig(config);
+        if (this.refs.length === 0) {
+            this.rootTrigger = this.getFocusedElement();
+        }
+        // A full screen dialog is a context of its own: the dialog it replaces
+        // and anything stacked on that dialog goes with it.
+        const previousRef = this.topRef();
+        if (previousRef) {
+            // Everything open belongs to the context being replaced, including
+            // a full screen dialog that is already up.
+            this.closeAll();
+        }
+        let dialogRef;
+        const cdkRef = this.cdkDialog.open(component, {
+            container: {
+                type: FullScreenDialog,
+                providers: () => [
+                    { provide: DIALOG_CONFIG, useValue: dialogConfig },
+                ],
+            },
+            providers: (cdkDialogRef) => {
+                dialogRef = new DialogRef(cdkDialogRef, dialogConfig.disableCloseEvents, true);
+                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,
+            // The dialog covers the page on its own, so there is nothing left
+            // for a scrim to dim.
+            hasBackdrop: false,
+            panelClass: [FULL_SCREEN_PANEL_CLASS, OPENING_CLASS],
+            // The CDK writes the size on the panel and the global strategy then
+            // drops its centering margins, which is how the panel ends up
+            // covering the whole wrapper.
+            width: '100%',
+            height: '100%',
+            positionStrategy: this.overlay.position().global(),
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            restoreFocus: this.rootTrigger ?? true,
+            disableClose: true,
+        });
+        this.registerDialog(dialogRef, cdkRef, dialogConfig, previousRef);
+        return dialogRef;
+    }
+    /** Wires a freshly created dialog into the stack and starts its animation. */
+    registerDialog(dialogRef, cdkRef, dialogConfig, previousRef) {
         dialogRef.dialogInstance = cdkRef.containerInstance;
         dialogRef.componentInstance = cdkRef.componentInstance ?? undefined;
         if (cdkRef.componentRef) {
@@ -3393,14 +3557,20 @@ class DialogService {
         // 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. */
+    /** Closes every open dialog, including the hidden and the full screen 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);
     }
+    /** Closes the regular dialogs and leaves a full screen dialog alone. */
+    closeRegularDialogs() {
+        const closing = this.refs
+            .filter((ref) => !ref.isFullScreen)
+            .map((ref) => ref.close());
+        return Promise.all(closing).then(() => undefined);
+    }
     mergeConfig(config) {
         return {
             data: config.data,
@@ -3422,9 +3592,9 @@ class DialogService {
      * the dialog taking over is ready for it, so the page behind never
      * brightens between the two dialogs.
      */
-    dismissPrevious(previousRef, config) {
+    dismissPrevious(previousRef, behavior) {
         previousRef.overlayRef.backdropElement?.classList.add(SCRIM_KEPT_CLASS);
-        return config.previousDialog === 'hide' ? previousRef.hide() : this.closeAll();
+        return behavior === 'hide' ? previousRef.hide() : this.closeRegularDialogs();
     }
     startOpenAnimation(dialogRef) {
         const overlayRef = dialogRef.overlayRef;
@@ -3472,6 +3642,11 @@ class DialogService {
     beginScrimHandover(fromRef, toRef) {
         const from = fromRef.overlayRef.backdropElement;
         const to = toRef.overlayRef.backdropElement;
+        // Nothing to hand the scrim over to, e.g. a full screen dialog: the
+        // outgoing scrim fades out on its own instead.
+        if (!to) {
+            return;
+        }
         from?.classList.add(SCRIM_INSTANT_CLASS);
         from?.classList.remove(SCRIM_KEPT_CLASS);
         to?.classList.add(SCRIM_INSTANT_CLASS);
@@ -3507,6 +3682,14 @@ class DialogService {
         }
         return undefined;
     }
+    /**
+     * Same, without the full screen dialog: it hosts the dialogs opened on top
+     * of it, so it is never the one that gets hidden or closed to make room.
+     */
+    topRegularRef() {
+        const ref = this.topRef();
+        return ref?.isFullScreen ? undefined : ref;
+    }
     restorePreviousDialog(ref) {
         const index = this.refs.indexOf(ref);
         if (index < 1) {
@@ -3518,8 +3701,11 @@ class DialogService {
                 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);
+            // took the screen, and keeps the scrim until then. Nothing to keep
+            // when the dialog underneath has no scrim of its own.
+            if (previousRef.overlayRef.backdropElement) {
+                ref.overlayRef.backdropElement?.classList.add(SCRIM_KEPT_CLASS);
+            }
             setTimeout(() => this.startRestoringAnimation(ref, previousRef), DIALOG_HANDOVER_DELAY_MS);
             return;
         }
@@ -3570,13 +3756,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 class DialogBody {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DialogBody, isStandalone: true, selector: "md3-dialog-body", ngImport: i0, template: "<md3-type-body size=\"medium\">\n    <ng-content></ng-content>\n</md3-type-body>", styles: [":host{display:block;margin:1em 1.5em 1.5em;color:rgb(var(--md-scheme-on-surface-variant))}:host .md3-text-body.md3-text-medium{letter-spacing:.017857em}\n"], dependencies: [{ kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DialogBody, isStandalone: true, selector: "md3-dialog-body", host: { classAttribute: "md3-scrollable" }, ngImport: i0, template: "<md3-type-body size=\"medium\">\n    <ng-content></ng-content>\n</md3-type-body>", styles: [":host{display:block;margin:1em 1.5em 1.5em;color:rgb(var(--md-scheme-on-surface-variant))}:host .md3-text-body.md3-text-medium{letter-spacing:.017857em}\n"], dependencies: [{ kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogBody, decorators: [{
             type: Component,
             args: [{ selector: 'md3-dialog-body', imports: [
                         TypeBody
-                    ], template: "<md3-type-body size=\"medium\">\n    <ng-content></ng-content>\n</md3-type-body>", styles: [":host{display:block;margin:1em 1.5em 1.5em;color:rgb(var(--md-scheme-on-surface-variant))}:host .md3-text-body.md3-text-medium{letter-spacing:.017857em}\n"] }]
+                    ], host: {
+                        'class': 'md3-scrollable',
+                    }, template: "<md3-type-body size=\"medium\">\n    <ng-content></ng-content>\n</md3-type-body>", styles: [":host{display:block;margin:1em 1.5em 1.5em;color:rgb(var(--md-scheme-on-surface-variant))}:host .md3-text-body.md3-text-medium{letter-spacing:.017857em}\n"] }]
         }] });
 
 class DialogActions {
@@ -3588,6 +3776,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'md3-dialog-actions', imports: [], template: "<div class=\"md3-actions\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block;margin:1.5em}:host .md3-actions{display:flex;gap:1em;flex-direction:row-reverse}\n"] }]
         }] });
 
+/**
+ * Header of a full screen dialog: a leading icon button to leave the dialog,
+ * the headline, and a trailing action. It sticks to the top of the dialog while
+ * the content scrolls underneath.
+ */
+class FullScreenDialogHeader {
+    // context values
+    buttonContextSize = signal('small', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonContextSize" }] : /* istanbul ignore next */ []));
+    buttonContextWidth = signal('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonContextWidth" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: FullScreenDialogHeader, isStandalone: true, selector: "md3-fullscreen-dialog-header", providers: [
+            {
+                provide: MD3_BUTTON_CONTEXT,
+                useExisting: FullScreenDialogHeader,
+            },
+        ], ngImport: i0, template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n    <ng-content></ng-content>\n</div>\n<div class=\"md3-actions-container\">\n    <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface))}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FullScreenDialogHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-fullscreen-dialog-header', imports: [], providers: [
+                        {
+                            provide: MD3_BUTTON_CONTEXT,
+                            useExisting: FullScreenDialogHeader,
+                        },
+                    ], template: "<ng-content select=\"[md3-icon-button][md3-header-leading]\"></ng-content>\n<div class=\"md3-title-container\">\n    <ng-content></ng-content>\n</div>\n<div class=\"md3-actions-container\">\n    <ng-content select=\"[md3-header-trailing]\"></ng-content>\n</div>\n", styles: [":host{--foreground-color: rgb(var(--md-scheme-on-surface));position:sticky;top:0;z-index:3;grid-area:header;display:flex;align-items:center;gap:.5em;height:4em;padding:0 1em;color:var(--foreground-color);background-color:rgb(var(--md-scheme-surface))}:host ::ng-deep [md3-header-leading]:first-child{margin-inline-start:-.5em}:host .md3-title-container{flex:1 1 auto;min-width:0;color:inherit}:host .md3-title-container:first-child{padding-inline-start:.5em}:host .md3-actions-container{display:flex;flex:0 0 auto;align-items:center;gap:.5em}\n"] }]
+        }] });
+
 const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
 const MENU_CONFIG = new InjectionToken('MD3_MENU_CONFIG');
 const MENU_COMPONENT = new InjectionToken('MD3_MENU_COMPONENT');
@@ -4618,5 +4835,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBar, AppBarLogo, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle };
+export { AppBar, AppBarLogo, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, FullScreenDialogHeader, Grid, GridItem, IconButton, IconElement, InputElement, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle };
 //# sourceMappingURL=almoamendev-ngx-md3.mjs.map