@almoamendev/ngx-md3 0.2.0 → 0.2.2

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -12,7 +12,7 @@ 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';
+import { Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
 
 class TypeDisplay {
     el;
@@ -3115,6 +3115,7 @@ class DialogRef {
     isFullScreen;
     closed = new Subject();
     closing = new Subject();
+    hiddenChanges = new Subject();
     closePromise = null;
     closeStarted = false;
     closeSettled = false;
@@ -3134,7 +3135,7 @@ class DialogRef {
     get isClosing() {
         return this.closeStarted;
     }
-    /** Whether the dialog is currently hidden behind another dialog. */
+    /** Whether the dialog is currently hidden, on request or behind another dialog. */
     get isHidden() {
         return this.hidden;
     }
@@ -3163,6 +3164,7 @@ class DialogRef {
     /**
      * Hides the dialog with the closing animation while keeping it alive, so
      * its content, form state and subscriptions survive until show() is called.
+     * The page underneath becomes usable again while the dialog waits behind it.
      * The promise resolves once the dialog is out of sight.
      */
     hide() {
@@ -3172,6 +3174,7 @@ class DialogRef {
         this.hidden = true;
         this.toggleHiddenState(true);
         this.dialogInstance?.setActive(false);
+        this.hiddenChanges.next(true);
         return this.waitForSurfaceAnimation();
     }
     /**
@@ -3187,6 +3190,7 @@ class DialogRef {
             this.hidden = false;
             this.toggleHiddenState(false);
             this.dialogInstance?.setActive(true);
+            this.hiddenChanges.next(false);
         }
         this.dialogInstance?.recaptureFocus();
     }
@@ -3194,6 +3198,10 @@ class DialogRef {
     beforeClosed() {
         return this.closing.asObservable();
     }
+    /** Emits the new value of `isHidden` every time the dialog is hidden or shown. */
+    hiddenChanged() {
+        return this.hiddenChanges.asObservable();
+    }
     afterClosed() {
         return this.closed.asObservable();
     }
@@ -3204,7 +3212,9 @@ class DialogRef {
             this.cdkRef.containerInstance._closeInteractionType = 'mouse';
             this.close();
         });
-        this.cdkRef.keydownEvents.pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)), take(1)).subscribe((event) => {
+        // A hidden dialog is not the one the Escape key is meant for, even
+        // though the overlay it sits in is still the one receiving the event.
+        this.cdkRef.keydownEvents.pipe(filter((event) => !this.hidden && event.key === 'Escape' && !hasModifierKey(event)), take(1)).subscribe((event) => {
             event.preventDefault();
             this.cdkRef.containerInstance._closeInteractionType = 'keyboard';
             this.close();
@@ -3276,6 +3286,7 @@ class DialogRef {
         // waiting on beforeClosed() is still notified.
         this.startClosing();
         this.closeSettled = true;
+        this.hiddenChanges.complete();
         this.closed.next(result);
         this.closed.complete();
     }
@@ -3312,13 +3323,13 @@ class Dialog extends CdkDialogContainer {
         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: "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"] }] });
+    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;pointer-events:none}::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    #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"] }]
+                    ], 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;pointer-events:none}::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 }] }] } });
 
 /**
@@ -3397,10 +3408,16 @@ const DIALOG_HANDOVER_DELAY_MS = 160;
 class DialogService {
     cdkDialog = inject(Dialog$1);
     overlay = inject(Overlay);
+    overlayContainer = inject(OverlayContainer);
     injector = inject(Injector);
     document = inject(DOCUMENT);
     /** Open dialogs, from the first one opened to the one currently on top. */
     refs = [];
+    /**
+     * Elements the page was made of that the CDK hid from assistive technology,
+     * kept here while the dialogs are hidden and the page is given back.
+     */
+    pageAriaHidden = new Map();
     /**
      * Page scrolling is blocked here instead of per overlay, so stacked dialogs
      * cannot unblock the page while another dialog is still open.
@@ -3408,9 +3425,14 @@ class DialogService {
     scrollBlock = this.overlay.scrollStrategies.block();
     /** Element that was focused before the first dialog of the stack opened. */
     rootTrigger = null;
+    pageStateQueued = false;
     get openDialogs() {
         return this.refs;
     }
+    /** Open dialogs that are currently on screen, from the bottom one up. */
+    get visibleDialogs() {
+        return this.refs.filter((ref) => !ref.isHidden);
+    }
     /** The full screen dialog that is open, if there is one. */
     get fullScreenDialog() {
         return this.refs.find((ref) => ref.isFullScreen && !ref.isClosing);
@@ -3546,7 +3568,7 @@ class DialogService {
             this.bindDataToInputs(cdkRef.componentRef, dialogConfig);
         }
         this.refs.push(dialogRef);
-        this.updateScrollBlock();
+        this.syncPageState();
         if (previousRef) {
             setTimeout(() => this.startReplacingAnimation(dialogRef, previousRef), DIALOG_HANDOVER_DELAY_MS);
         }
@@ -3557,6 +3579,41 @@ class DialogService {
         // already coming back while this one is fading out.
         dialogRef.beforeClosed().subscribe(() => this.restorePreviousDialog(dialogRef));
         dialogRef.afterClosed().subscribe(() => this.removeRef(dialogRef));
+        // Hiding and showing can also come straight from the reference, so the
+        // page state is driven by what the dialogs report rather than by the
+        // calls that went through this service.
+        dialogRef.hiddenChanged().subscribe(() => this.syncPageState());
+    }
+    /**
+     * Hides every dialog that is on screen, the full screen one included, with
+     * the closing animation. They stay alive with their content and state, the
+     * page underneath becomes usable, and showAll() puts them back. The promise
+     * resolves once they are all out of sight.
+     */
+    hideAll() {
+        const visible = this.refs.filter((ref) => !ref.isHidden && !ref.isClosing);
+        return Promise.all(visible.map((ref) => ref.hide())).then(() => undefined);
+    }
+    /**
+     * Brings the dialogs back on screen, whether they were hidden one by one or
+     * all at once: the dialog that was on top returns, along with the full
+     * screen dialog it sits in. Dialogs hidden behind another dialog stay
+     * hidden, since that is where they belong once the stack is back.
+     */
+    showAll() {
+        const topRef = this.topRef();
+        if (!topRef) {
+            return;
+        }
+        const fullScreenRef = this.fullScreenDialog;
+        // The full screen dialog is the context the top one sits in, so it
+        // comes back first and the dialog on top ends up on top, with the focus.
+        if (fullScreenRef && fullScreenRef !== topRef && fullScreenRef.isHidden) {
+            fullScreenRef.show();
+        }
+        if (topRef.isHidden) {
+            topRef.show();
+        }
     }
     /** Closes every open dialog, including the hidden and the full screen ones. */
     closeAll() {
@@ -3719,15 +3776,82 @@ class DialogService {
         if (this.refs.length === 0) {
             this.rootTrigger = null;
         }
-        this.updateScrollBlock();
+        this.syncPageState();
     }
-    updateScrollBlock() {
-        if (this.refs.length > 0) {
+    /**
+     * State that belongs to the dialogs as a whole rather than to one of them:
+     * page scrolling, the page being hidden from assistive technology, and
+     * where focus sits. Applied in a task of its own, so a dialog handing the
+     * screen over to another one does not give the page back and take it again
+     * within the same frame.
+     */
+    syncPageState() {
+        if (this.pageStateQueued) {
+            return;
+        }
+        this.pageStateQueued = true;
+        setTimeout(() => {
+            this.pageStateQueued = false;
+            this.applyPageState();
+        });
+    }
+    applyPageState() {
+        const hasVisibleDialog = this.refs.some((ref) => !ref.isHidden);
+        if (hasVisibleDialog) {
             this.scrollBlock.enable();
         }
         else {
             this.scrollBlock.disable();
         }
+        if (this.refs.length === 0) {
+            // Nothing is open anymore: the CDK gives the page back to assistive
+            // technology on its own, so there is nothing left to restore here.
+            this.pageAriaHidden.clear();
+            return;
+        }
+        if (hasVisibleDialog) {
+            this.hidePageFromAssistiveTechnology();
+            return;
+        }
+        this.exposePageToAssistiveTechnology();
+        this.releaseFocus();
+    }
+    /**
+     * Gives the page back to assistive technology while every dialog is hidden.
+     * The CDK hides it for as long as a dialog is open, which would otherwise
+     * leave nothing to read at all once the dialogs are out of sight.
+     */
+    exposePageToAssistiveTechnology() {
+        if (this.pageAriaHidden.size > 0) {
+            return;
+        }
+        const container = this.overlayContainer.getContainerElement();
+        Array.from(container.parentElement?.children ?? []).forEach((sibling) => {
+            const value = sibling.getAttribute('aria-hidden');
+            if (sibling === container || value === null) {
+                return;
+            }
+            this.pageAriaHidden.set(sibling, value);
+            sibling.removeAttribute('aria-hidden');
+        });
+    }
+    /** Hides the page again as soon as a dialog is back on screen. */
+    hidePageFromAssistiveTechnology() {
+        this.pageAriaHidden.forEach((value, element) => {
+            element.setAttribute('aria-hidden', value);
+        });
+        this.pageAriaHidden.clear();
+    }
+    /**
+     * Focus follows the dialogs off the screen: it goes back to whatever opened
+     * the stack, so the page stays usable with the keyboard while the dialogs
+     * wait behind it. Focus that already moved somewhere else is left alone.
+     */
+    releaseFocus() {
+        const activeElement = this.document.activeElement;
+        if (this.rootTrigger && (!activeElement || activeElement === this.document.body)) {
+            this.rootTrigger.focus();
+        }
     }
     getFocusedElement() {
         const activeElement = this.document.activeElement;
@@ -3782,31 +3906,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * the content scrolls underneath.
  */
 class FullScreenDialogHeader {
-    title = input('', { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), alias: 'title' });
     // 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: "17.1.0", version: "22.1.0", type: FullScreenDialogHeader, isStandalone: true, selector: "md3-fullscreen-dialog-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    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    <md3-type-title size=\"large\">{{ title() }}</md3-type-title>\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"], dependencies: [{ kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }] });
+        ], 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: [
-                        TypeTitle,
-                    ], providers: [
+            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    <md3-type-title size=\"large\">{{ title() }}</md3-type-title>\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"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
+                    ], 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');