@almoamendev/ngx-md3 0.3.7 → 0.4.0

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, effect, Directive, inject, signal, computed, Injectable, InjectionToken, ViewChild, Component, ViewContainerRef, Injector, viewChild, numberAttribute, HostListener, model, contentChild, contentChildren, PLATFORM_ID, afterNextRender, output, ElementRef, HostBinding, TemplateRef } from '@angular/core';
+import { input, booleanAttribute, effect, Directive, inject, signal, computed, Injectable, InjectionToken, ViewChild, Component, ViewContainerRef, Injector, viewChild, numberAttribute, HostListener, model, contentChild, contentChildren, PLATFORM_ID, afterNextRender, output, ElementRef, HostBinding, NgZone, TemplateRef } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, NgClass, NgTemplateOutlet } from '@angular/common';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
 import { Router, NavigationEnd, RouterLinkActive } from '@angular/router';
-import { fromEvent, startWith, map, filter, Subscription, Subject, merge, take } from 'rxjs';
+import { fromEvent, startWith, map, filter, Subscription, Subject, merge, take, takeUntil } from 'rxjs';
 import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import * as i2 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
@@ -4334,13 +4334,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;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"] }] });
+    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<div\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</div>\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;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"] }]
+                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<div\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</div>\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 }] }] } });
 
 /**
@@ -4396,18 +4396,18 @@ class FullScreenDialog extends CdkDialogContainer {
         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"] }] });
+    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<div\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</div>\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"] }]
+                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<div\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</div>\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 PANEL_CLASS$1 = 'md3-dialog-panel';
 const FULL_SCREEN_PANEL_CLASS = 'md3-fullscreen-dialog-panel';
-const OPENING_CLASS = 'md3-dialog-opening';
+const OPENING_CLASS$1 = 'md3-dialog-opening';
 const SCRIM_KEPT_CLASS = 'md3-dialog-scrim-kept';
 const SCRIM_INSTANT_CLASS = 'md3-dialog-scrim-instant';
 /**
@@ -4492,8 +4492,8 @@ class DialogService {
             viewContainerRef: dialogConfig.viewContainerRef,
             injector: dialogConfig.injector,
             hasBackdrop: true,
-            backdropClass: ['md3-dialog-scrim', OPENING_CLASS],
-            panelClass: [PANEL_CLASS, OPENING_CLASS],
+            backdropClass: ['md3-dialog-scrim', OPENING_CLASS$1],
+            panelClass: [PANEL_CLASS$1, OPENING_CLASS$1],
             positionStrategy: this.overlay.position()
                 .global()
                 .centerHorizontally()
@@ -4557,7 +4557,7 @@ class DialogService {
             // 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],
+            panelClass: [FULL_SCREEN_PANEL_CLASS, OPENING_CLASS$1],
             // 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.
@@ -4674,8 +4674,8 @@ class DialogService {
         requestAnimationFrame(() => {
             setTimeout(() => {
                 panel.getBoundingClientRect();
-                panel.classList.remove(OPENING_CLASS);
-                backdrop?.classList.remove(OPENING_CLASS);
+                panel.classList.remove(OPENING_CLASS$1);
+                backdrop?.classList.remove(OPENING_CLASS$1);
             }, 100);
         });
         dialogRef.dialogInstance?.startEnterAnimation();
@@ -4689,8 +4689,8 @@ class DialogService {
         const backdrop = dialogRef.overlayRef.backdropElement;
         this.beginScrimHandover(previousRef, dialogRef);
         panel.getBoundingClientRect();
-        panel.classList.remove(OPENING_CLASS);
-        backdrop?.classList.remove(OPENING_CLASS);
+        panel.classList.remove(OPENING_CLASS$1);
+        backdrop?.classList.remove(OPENING_CLASS$1);
         this.endScrimHandover(previousRef, dialogRef);
         dialogRef.dialogInstance?.startEnterAnimation();
     }
@@ -5622,6 +5622,507 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     }, template: "<ng-content></ng-content>", styles: [":host{padding:1em 1em 1.5em;position:relative;display:flex;gap:.5em}:host.md3-style-divider:after{content:\"\";position:absolute;height:.0625em;width:100%;inset:0 0 auto;background-color:rgb(var(--md-scheme-outline-variant));pointer-events:none}\n"] }]
         }], propDecorators: { showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-divider", required: false }] }] } });
 
+const BOTTOM_SHEET_DATA = new InjectionToken('MD3_BOTTOM_SHEET_DATA');
+const BOTTOM_SHEET_CONFIG = new InjectionToken('MD3_BOTTOM_SHEET_CONFIG');
+const BOTTOM_SHEET_COMPONENT = new InjectionToken('MD3_BOTTOM_SHEET_COMPONENT');
+const BOTTOM_SHEET_EXIT_ANIMATION_FALLBACK_MS = 300;
+const BOTTOM_SHEET_DRAGGING_CLASS = 'md3-bottom-sheet-dragging';
+/**
+ * A bottom sheet is a single modal overlay, not a stack like dialogs can be,
+ * so this is a smaller version of DialogRef: no hide/show, no full screen
+ * variant, closing is always the only way out.
+ */
+class BottomSheetRef {
+    cdkRef;
+    closed = new Subject();
+    closeStarted = false;
+    closeSettled = false;
+    /** Shell hosting the sheet. Filled by BottomSheetService once it is created. */
+    sheetInstance;
+    /** Filled by BottomSheetService after the sheet component is attached. */
+    componentInstance;
+    /** Overlay hosting the sheet, useful to reach the panel and the scrim. */
+    get overlayRef() {
+        return this.cdkRef.overlayRef;
+    }
+    /** Whether the sheet started closing. */
+    get isClosing() {
+        return this.closeStarted;
+    }
+    constructor(cdkRef) {
+        this.cdkRef = cdkRef;
+        this.cdkRef.closed.pipe(take(1)).subscribe((result) => this.settle(result));
+        this.connectCloseEvents();
+    }
+    /** Closes the sheet. The promise resolves once the exit animation is done. */
+    close(result) {
+        if (this.closeStarted) {
+            return Promise.resolve();
+        }
+        this.closeStarted = true;
+        return this.startCloseAnimation().then(() => this.cdkRef.close(result));
+    }
+    afterClosed() {
+        return this.closed.asObservable();
+    }
+    /**
+     * Wires the shell to this reference. Called by BottomSheetService, since the shell is
+     * created by the CDK before this reference exists and cannot reach it through DI.
+     */
+    attachContainer(container) {
+        this.sheetInstance = container;
+        container.dismissed.pipe(take(1)).subscribe(() => this.close());
+        container.dragProgress.pipe(takeUntil(this.closed)).subscribe((progress) => this.trackDragProgress(progress));
+    }
+    /** Fades the scrim along with the sheet being dragged, and hands it back to CSS on release. */
+    trackDragProgress(progress) {
+        const backdrop = this.cdkRef.overlayRef.backdropElement;
+        if (!backdrop || this.closeStarted) {
+            return;
+        }
+        if (progress <= 0) {
+            backdrop.classList.remove(BOTTOM_SHEET_DRAGGING_CLASS);
+            backdrop.style.removeProperty('--md3-drag-remaining');
+            return;
+        }
+        backdrop.classList.add(BOTTOM_SHEET_DRAGGING_CLASS);
+        backdrop.style.setProperty('--md3-drag-remaining', `${1 - progress}`);
+    }
+    connectCloseEvents() {
+        // The CDK config keeps `disableClose` on, so the scrim and Escape key
+        // are handled here instead and the sheet can animate out.
+        this.cdkRef.backdropClick.pipe(take(1)).subscribe(() => this.close());
+        this.cdkRef.keydownEvents.pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)), take(1)).subscribe((event) => {
+            event.preventDefault();
+            this.close();
+        });
+    }
+    startCloseAnimation() {
+        const overlayRef = this.cdkRef.overlayRef;
+        // Closing during a drag, from the Escape key for instance, leaves the scrim held
+        // where the drag left it, so it is handed back to CSS before the exit animation.
+        overlayRef.backdropElement?.classList.remove(BOTTOM_SHEET_DRAGGING_CLASS);
+        overlayRef.backdropElement?.style.removeProperty('--md3-drag-remaining');
+        overlayRef.overlayElement.classList.add('md3-bottom-sheet-closing');
+        overlayRef.backdropElement?.classList.add('md3-bottom-sheet-closing');
+        this.sheetInstance?.setActive(false);
+        return this.waitForSurfaceAnimation();
+    }
+    /** Resolves when the surface finished animating, with a timeout as a safety net. */
+    waitForSurfaceAnimation() {
+        const panel = this.cdkRef.overlayRef.overlayElement;
+        const surface = this.sheetInstance?.surfaceElement ?? panel;
+        return new Promise((resolve) => {
+            let isResolved = false;
+            const timeoutId = setTimeout(done, BOTTOM_SHEET_EXIT_ANIMATION_FALLBACK_MS);
+            function done() {
+                if (isResolved) {
+                    return;
+                }
+                isResolved = true;
+                clearTimeout(timeoutId);
+                surface.removeEventListener('transitionend', onTransitionEnd);
+                resolve();
+            }
+            function onTransitionEnd(event) {
+                if (event.target === surface) {
+                    done();
+                }
+            }
+            surface.addEventListener('transitionend', onTransitionEnd);
+        });
+    }
+    /** Emits the result once the CDK reference is closed. Focus is restored by the container. */
+    settle(result) {
+        if (this.closeSettled) {
+            return;
+        }
+        this.closeStarted = true;
+        this.closeSettled = true;
+        this.closed.next(result);
+        this.closed.complete();
+    }
+}
+
+/** Movement shorter than this is still a tap rather than a drag. */
+const DRAG_START_THRESHOLD_PX = 4;
+/** Part of the sheet's height a drag has to cover for the sheet to be dismissed on release. */
+const DISMISS_DISTANCE_RATIO = 0.4;
+/** Downward speed, in pixels per millisecond, that dismisses the sheet whatever distance it covered. */
+const DISMISS_VELOCITY = 0.5;
+/** A release this long after the last move is a stop, so the speed before it no longer counts. */
+const VELOCITY_TIMEOUT_MS = 100;
+/**
+ * Material 3 bottom sheet shell. Like Dialog, it extends the CDK dialog
+ * container so focus trapping, focus restoration and the ARIA attributes are
+ * handled by the CDK while this component only owns the MD3 surface, its
+ * drag handle and the slide-up animation. There is no docked variant: a
+ * bottom sheet is always a modal overlay.
+ *
+ * The shell also owns the drag gesture. Dragging the surface down follows the
+ * pointer, and releasing either dismisses the sheet or snaps it back. Since the
+ * shell is created before BottomSheetRef exists, it reports the gesture through
+ * observables the reference subscribes to instead of closing the sheet itself.
+ */
+class BottomSheet extends CdkDialogContainer {
+    surface = viewChild('surface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    zone = inject(NgZone);
+    dismissedSheet = new Subject();
+    draggedSheet = new Subject();
+    config = inject(BOTTOM_SHEET_CONFIG, { optional: true }) ?? {};
+    isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    showHandle = signal(this.config.handle ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHandle" }] : /* istanbul ignore next */ []));
+    allowGestures = signal(this.config.gestures ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowGestures" }] : /* istanbul ignore next */ []));
+    /** How far below its resting position the drag is currently holding the sheet, in pixels. */
+    dragOffset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragOffset" }] : /* istanbul ignore next */ []));
+    isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    /**
+     * Only set while the sheet sits away from its resting position, so the opening and
+     * closing transforms in the stylesheet stay in charge the rest of the time.
+     */
+    dragTransform = computed(() => {
+        const offset = this.dragOffset();
+        return offset > 0 ? `translateY(${offset}px)` : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragTransform" }] : /* istanbul ignore next */ []));
+    /** Pointer currently dragging the sheet, if there is one. */
+    pointerId;
+    /** Scrollable the drag started over, which owns the gesture until it is scrolled to the top. */
+    scroller = null;
+    startY = 0;
+    lastY = 0;
+    lastTimestamp = 0;
+    velocity = 0;
+    isPastThreshold = false;
+    dismissed = this.dismissedSheet.asObservable();
+    dragProgress = this.draggedSheet.asObservable();
+    get surfaceElement() {
+        return this.surface()?.nativeElement ?? null;
+    }
+    startEnterAnimation() {
+        requestAnimationFrame(() => {
+            this.isActive.set(true);
+        });
+    }
+    setActive(value) {
+        this.isActive.set(value);
+    }
+    recaptureFocus() {
+        this._recaptureFocus();
+    }
+    ngOnDestroy() {
+        this.stopTracking();
+        super.ngOnDestroy();
+    }
+    onPointerDown(event) {
+        // Only the first pointer down drags: a second finger, or a mouse button other than
+        // the primary one, leaves context menus and multi-touch alone.
+        if (!this.allowGestures() || this.pointerId !== undefined || !event.isPrimary) {
+            return;
+        }
+        if (event.pointerType === 'mouse' && event.button !== 0) {
+            return;
+        }
+        this.pointerId = event.pointerId;
+        this.startY = this.lastY = event.clientY;
+        this.lastTimestamp = event.timeStamp;
+        this.velocity = 0;
+        this.isPastThreshold = false;
+        this.scroller = this.findScroller(event.target);
+        // Tracking a drag at pointer rate has nothing to tell the rest of the application,
+        // and the signals it writes schedule their own change detection.
+        this.zone.runOutsideAngular(() => {
+            this.surfaceElement?.addEventListener('touchmove', this.onTouchMove, { passive: false });
+            window.addEventListener('pointermove', this.onPointerMove);
+            window.addEventListener('pointerup', this.onPointerUp);
+            window.addEventListener('pointercancel', this.onPointerCancel);
+        });
+    }
+    onPointerMove = (event) => {
+        if (event.pointerId !== this.pointerId) {
+            return;
+        }
+        if (!this.isPastThreshold && !this.tryStartDrag(event)) {
+            return;
+        }
+        const elapsed = event.timeStamp - this.lastTimestamp;
+        if (elapsed > 0) {
+            this.velocity = (event.clientY - this.lastY) / elapsed;
+            this.lastY = event.clientY;
+            this.lastTimestamp = event.timeStamp;
+        }
+        // Upward movement is clamped: the sheet has a single resting position to return to.
+        this.setDragOffset(Math.max(0, event.clientY - this.startY));
+    };
+    onPointerUp = (event) => {
+        if (event.pointerId !== this.pointerId) {
+            return;
+        }
+        const wasDragging = this.isPastThreshold;
+        const shouldDismiss = wasDragging && this.shouldDismiss(event.timeStamp);
+        if (shouldDismiss) {
+            this.releasePointer();
+            this.slideOut();
+            this.zone.run(() => this.dismissedSheet.next());
+        }
+        else {
+            this.stopTracking();
+        }
+        if (wasDragging) {
+            this.suppressClickAfterDrag();
+        }
+    };
+    onPointerCancel = (event) => {
+        if (event.pointerId === this.pointerId) {
+            this.stopTracking();
+        }
+    };
+    /** Keeps the browser from scrolling or overscrolling underneath an ongoing drag. */
+    onTouchMove = (event) => {
+        if (this.isPastThreshold && event.cancelable) {
+            event.preventDefault();
+        }
+    };
+    /**
+     * Decides who owns the gesture on the first move that leaves the tap threshold. Upward
+     * moves, and downward moves over content that still has somewhere to scroll, belong to
+     * the content, so the sheet lets go of them for good.
+     */
+    tryStartDrag(event) {
+        const distance = event.clientY - this.startY;
+        if (Math.abs(distance) < DRAG_START_THRESHOLD_PX) {
+            return false;
+        }
+        if (distance < 0 || (this.scroller?.scrollTop ?? 0) > 0) {
+            this.stopTracking();
+            return false;
+        }
+        // Starting from where the threshold was crossed keeps the sheet from jumping under
+        // the pointer on the first frame of the drag.
+        this.startY = this.lastY = event.clientY;
+        this.isPastThreshold = true;
+        this.isDragging.set(true);
+        return true;
+    }
+    shouldDismiss(timestamp) {
+        const height = this.surfaceElement?.offsetHeight ?? 0;
+        const isFling = timestamp - this.lastTimestamp < VELOCITY_TIMEOUT_MS
+            && this.velocity > DISMISS_VELOCITY;
+        return isFling || (height > 0 && this.dragOffset() > height * DISMISS_DISTANCE_RATIO);
+    }
+    setDragOffset(offset) {
+        const height = this.surfaceElement?.offsetHeight ?? 0;
+        this.dragOffset.set(offset);
+        this.draggedSheet.next(height > 0 ? Math.min(1, offset / height) : 0);
+    }
+    /**
+     * Sees the drag out of the viewport rather than back to the resting position, so a
+     * dismissed sheet keeps going the way it was dragged instead of springing back first.
+     * The fade comes from the exit animation BottomSheetRef starts right after.
+     */
+    slideOut() {
+        this.dragOffset.set(this.surfaceElement?.offsetHeight ?? this.dragOffset());
+    }
+    /** Releases the pointer and puts the sheet back at its resting position. */
+    stopTracking() {
+        this.releasePointer();
+        if (this.dragOffset() !== 0) {
+            this.setDragOffset(0);
+        }
+    }
+    releasePointer() {
+        if (this.pointerId === undefined) {
+            return;
+        }
+        this.pointerId = undefined;
+        this.isPastThreshold = false;
+        this.scroller = null;
+        this.isDragging.set(false);
+        this.surfaceElement?.removeEventListener('touchmove', this.onTouchMove);
+        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointerup', this.onPointerUp);
+        window.removeEventListener('pointercancel', this.onPointerCancel);
+    }
+    /**
+     * A drag that ended over a button would otherwise still click it, so the click that
+     * follows the release is swallowed. Nothing else fires in between, and the listener is
+     * dropped right after in case the release happened over something unclickable.
+     */
+    suppressClickAfterDrag() {
+        const surface = this.surfaceElement;
+        if (!surface) {
+            return;
+        }
+        const onClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        surface.addEventListener('click', onClick, { capture: true, once: true });
+        setTimeout(() => surface.removeEventListener('click', onClick, { capture: true }));
+    }
+    /** Nearest scrollable between the pointer and the surface, if the drag started over one. */
+    findScroller(target) {
+        const surface = this.surfaceElement;
+        let node = target instanceof HTMLElement ? target : null;
+        while (node && surface?.contains(node)) {
+            if (node.scrollHeight > node.clientHeight && this.isScrollable(node)) {
+                return node;
+            }
+            node = node.parentElement;
+        }
+        return null;
+    }
+    isScrollable(element) {
+        const overflowY = getComputedStyle(element).overflowY;
+        return overflowY === 'auto' || overflowY === 'scroll';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BottomSheet, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: BottomSheet, isStandalone: true, selector: "md3-bottom-sheet", host: { properties: { "class.md3-hide-handle": "!showHandle()", "class.md3-draggable": "allowGestures()", "class.md3-dragging": "isDragging()" } }, 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<div\n    #surface\n    class=\"md3-bottom-sheet-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [style.transform]=\"dragTransform()\"\n    [attr.dir]=\"config.direction ?? null\"\n    (pointerdown)=\"onPointerDown($event)\">\n    <div class=\"md3-bottom-sheet-handle\"></div>\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\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-bottom-sheet-scrim{--md3-drag-remaining: 1;position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-standard-slow-spatial-duration) var(--md-motion-standard-slow-spatial-easing);opacity:calc(.32 * var(--md3-drag-remaining))}::ng-deep .cdk-overlay-container .md3-bottom-sheet-scrim.md3-bottom-sheet-dragging{transition:none}::ng-deep .cdk-overlay-container .md3-bottom-sheet-scrim.md3-bottom-sheet-opening,::ng-deep .cdk-overlay-container .md3-bottom-sheet-scrim.md3-bottom-sheet-closing{opacity:0}::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-bottom-sheet-panel){padding:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-bottom-sheet-panel{width:100%;max-width:40em;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-bottom-sheet-panel.md3-bottom-sheet-closing{pointer-events:none}:host{display:block;width:100%;max-width:100%;outline:0}:host .md3-bottom-sheet-container{position:relative;display:block;width:100%;max-height:70vh;overflow:hidden;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-low));border-start-start-radius:var(--md-border-radius-large);border-start-end-radius:var(--md-border-radius-large);box-shadow:var(--md-shadow-1dp);transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing);opacity:0;transform:translateY(60%) scaleY(.8);transform-origin:bottom}:host .md3-bottom-sheet-container.md3-active{opacity:1;transform:translateY(0) scaleY(1)}:host .md3-bottom-sheet-container .md3-bottom-sheet-handle{position:absolute;top:.75em;left:50%;width:2em;height:.25em;border-radius:var(--md-border-radius-rounded);background-color:rgb(var(--md-scheme-on-surface-variant));opacity:.4;transform:translate(-50%);pointer-events:none}:host .md3-bottom-sheet-container>::ng-deep *:not(.md3-bottom-sheet-handle){display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;max-height:inherit;overflow:hidden;padding-top:1.25em}:host.md3-hide-handle .md3-bottom-sheet-container .md3-bottom-sheet-handle{display:none}:host.md3-hide-handle .md3-bottom-sheet-container>::ng-deep *:not(.md3-bottom-sheet-handle){padding-top:0}:host.md3-draggable .md3-bottom-sheet-container .md3-bottom-sheet-handle{pointer-events:auto;touch-action:none;cursor:grab}:host.md3-draggable .md3-bottom-sheet-container .md3-bottom-sheet-handle:after{content:\"\";position:absolute;inset:-.625em -1.5em}:host.md3-dragging .md3-bottom-sheet-container{transition:none}:host.md3-dragging .md3-bottom-sheet-container .md3-bottom-sheet-handle{cursor:grabbing}\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: BottomSheet, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-bottom-sheet', imports: [
+                        CdkPortalOutlet,
+                    ], host: {
+                        '[class.md3-hide-handle]': '!showHandle()',
+                        '[class.md3-draggable]': 'allowGestures()',
+                        '[class.md3-dragging]': 'isDragging()',
+                    }, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container. -->\n<div\n    #surface\n    class=\"md3-bottom-sheet-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"config.scheme == 'dark'\"\n    [class.md-scheme-light]=\"config.scheme == 'light'\"\n    [style.transform]=\"dragTransform()\"\n    [attr.dir]=\"config.direction ?? null\"\n    (pointerdown)=\"onPointerDown($event)\">\n    <div class=\"md3-bottom-sheet-handle\"></div>\n    <ng-template cdkPortalOutlet></ng-template>\n</div>\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-bottom-sheet-scrim{--md3-drag-remaining: 1;position:absolute;inset:0;pointer-events:auto;background-color:rgb(var(--md-scheme-scrim));transition:all var(--md-motion-standard-slow-spatial-duration) var(--md-motion-standard-slow-spatial-easing);opacity:calc(.32 * var(--md3-drag-remaining))}::ng-deep .cdk-overlay-container .md3-bottom-sheet-scrim.md3-bottom-sheet-dragging{transition:none}::ng-deep .cdk-overlay-container .md3-bottom-sheet-scrim.md3-bottom-sheet-opening,::ng-deep .cdk-overlay-container .md3-bottom-sheet-scrim.md3-bottom-sheet-closing{opacity:0}::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-bottom-sheet-panel){padding:0}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-bottom-sheet-panel{width:100%;max-width:40em;pointer-events:auto}::ng-deep .cdk-overlay-container .cdk-global-overlay-wrapper .md3-bottom-sheet-panel.md3-bottom-sheet-closing{pointer-events:none}:host{display:block;width:100%;max-width:100%;outline:0}:host .md3-bottom-sheet-container{position:relative;display:block;width:100%;max-height:70vh;overflow:hidden;color:rgb(var(--md-scheme-on-surface));background-color:rgb(var(--md-scheme-surface-container-low));border-start-start-radius:var(--md-border-radius-large);border-start-end-radius:var(--md-border-radius-large);box-shadow:var(--md-shadow-1dp);transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing);opacity:0;transform:translateY(60%) scaleY(.8);transform-origin:bottom}:host .md3-bottom-sheet-container.md3-active{opacity:1;transform:translateY(0) scaleY(1)}:host .md3-bottom-sheet-container .md3-bottom-sheet-handle{position:absolute;top:.75em;left:50%;width:2em;height:.25em;border-radius:var(--md-border-radius-rounded);background-color:rgb(var(--md-scheme-on-surface-variant));opacity:.4;transform:translate(-50%);pointer-events:none}:host .md3-bottom-sheet-container>::ng-deep *:not(.md3-bottom-sheet-handle){display:grid;grid-template-areas:\"header\" \"body\" \"actions\";grid-template-rows:auto minmax(0,1fr) auto;max-height:inherit;overflow:hidden;padding-top:1.25em}:host.md3-hide-handle .md3-bottom-sheet-container .md3-bottom-sheet-handle{display:none}:host.md3-hide-handle .md3-bottom-sheet-container>::ng-deep *:not(.md3-bottom-sheet-handle){padding-top:0}:host.md3-draggable .md3-bottom-sheet-container .md3-bottom-sheet-handle{pointer-events:auto;touch-action:none;cursor:grab}:host.md3-draggable .md3-bottom-sheet-container .md3-bottom-sheet-handle:after{content:\"\";position:absolute;inset:-.625em -1.5em}:host.md3-dragging .md3-bottom-sheet-container{transition:none}:host.md3-dragging .md3-bottom-sheet-container .md3-bottom-sheet-handle{cursor:grabbing}\n"] }]
+        }], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }] } });
+
+const PANEL_CLASS = 'md3-bottom-sheet-panel';
+const OPENING_CLASS = 'md3-bottom-sheet-opening';
+/**
+ * Opens bottom sheets as CDK dialogs anchored to the bottom of the viewport.
+ * A bottom sheet is always a modal overlay, the same way a regular dialog is
+ * always an overlay, so this mirrors DialogService rather than the side sheet
+ * outlet model: there is no docked variant and nothing to register from the
+ * scaffold.
+ */
+class BottomSheetService {
+    cdkDialog = inject(Dialog$1);
+    overlay = inject(Overlay);
+    injector = inject(Injector);
+    /** Only one bottom sheet is ever open at a time. */
+    ref;
+    open(component, config = {}) {
+        const sheetConfig = this.mergeConfig(config);
+        // Opening a new sheet always replaces the one that is open.
+        this.ref?.close();
+        let sheetRef;
+        const cdkRef = this.cdkDialog.open(component, {
+            // The MD3 shell replaces the default CDK container, so the overlay,
+            // focus trap and focus restoration come from the CDK while the
+            // shell only renders the surface.
+            container: {
+                type: BottomSheet,
+                providers: () => [
+                    { provide: BOTTOM_SHEET_CONFIG, useValue: sheetConfig },
+                ],
+            },
+            // These tokens make the sheet controllable from the dynamic
+            // component without coupling that component to the service.
+            providers: (cdkDialogRef) => {
+                sheetRef = new BottomSheetRef(cdkDialogRef);
+                return [
+                    { provide: BottomSheetRef, useValue: sheetRef },
+                    { provide: BOTTOM_SHEET_DATA, useValue: sheetConfig.data },
+                    { provide: BOTTOM_SHEET_CONFIG, useValue: sheetConfig },
+                    { provide: BOTTOM_SHEET_COMPONENT, useValue: component },
+                ];
+            },
+            data: sheetConfig.data,
+            role: 'dialog',
+            ariaModal: true,
+            direction: sheetConfig.direction ?? undefined,
+            viewContainerRef: sheetConfig.viewContainerRef,
+            injector: sheetConfig.injector,
+            hasBackdrop: true,
+            backdropClass: ['md3-bottom-sheet-scrim', OPENING_CLASS],
+            panelClass: [PANEL_CLASS, OPENING_CLASS],
+            positionStrategy: this.overlay.position()
+                .global()
+                .centerHorizontally()
+                .bottom('0'),
+            // Bottom sheets block page scrolling for as long as they are open.
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            // Scrim and Escape handling lives in BottomSheetRef so the sheet
+            // can play its exit animation before the overlay is disposed.
+            disableClose: true,
+        });
+        sheetRef.attachContainer(cdkRef.containerInstance);
+        sheetRef.componentInstance = cdkRef.componentInstance ?? undefined;
+        if (cdkRef.componentRef) {
+            this.bindDataToInputs(cdkRef.componentRef, sheetConfig);
+        }
+        this.ref = sheetRef;
+        this.startOpenAnimation(sheetRef);
+        sheetRef.afterClosed().subscribe(() => {
+            if (this.ref === sheetRef) {
+                this.ref = undefined;
+            }
+        });
+        return sheetRef;
+    }
+    /** Closes the bottom sheet that is open, if there is one. */
+    close(result) {
+        this.ref?.close(result);
+    }
+    startOpenAnimation(sheetRef) {
+        const overlayRef = sheetRef.overlayRef;
+        const panel = overlayRef.overlayElement;
+        const backdrop = overlayRef.backdropElement;
+        // The overlay is inserted already rendered. Keep an initial class for
+        // one frame, force style calculation, then remove it so CSS
+        // transitions have a real from/to state.
+        requestAnimationFrame(() => {
+            setTimeout(() => {
+                panel.getBoundingClientRect();
+                panel.classList.remove(OPENING_CLASS);
+                backdrop?.classList.remove(OPENING_CLASS);
+            }, 100);
+        });
+        sheetRef.sheetInstance?.startEnterAnimation();
+    }
+    mergeConfig(config) {
+        return {
+            data: config.data,
+            bindDataToInputs: config.bindDataToInputs ?? false,
+            handle: config.handle ?? true,
+            gestures: config.gestures ?? true,
+            scheme: config.scheme ?? 'inherit',
+            direction: config.direction ?? null,
+            viewContainerRef: config.viewContainerRef,
+            injector: config.injector ?? this.injector,
+        };
+    }
+    bindDataToInputs(componentRef, config) {
+        if (!config.bindDataToInputs || !this.canBindDataToInputs(config.data)) {
+            return;
+        }
+        Object.entries(config.data).forEach(([inputName, inputValue]) => {
+            componentRef.setInput(inputName, inputValue);
+        });
+    }
+    canBindDataToInputs(data) {
+        return typeof data === 'object' && data !== null && !Array.isArray(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BottomSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BottomSheetService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BottomSheetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 const SNACKBAR_MESSAGE = new InjectionToken('MD3_SNACKBAR_MESSAGE');
 const SNACKBAR_ACTION_LABEL = new InjectionToken('MD3_SNACKBAR_ACTION_LABEL');
 const SNACKBAR_CONFIG = new InjectionToken('MD3_SNACKBAR_CONFIG');
@@ -5970,5 +6471,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, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, 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, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
+export { AppBar, AppBarLogo, Avatar, BOTTOM_SHEET_COMPONENT, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, Badge, BottomSheetRef, BottomSheetService, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, 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, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
 //# sourceMappingURL=almoamendev-ngx-md3.mjs.map