@almoamendev/ngx-md3 0.3.8 → 0.5.0

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -1,19 +1,19 @@
 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, NgZone, ElementRef, Component, ViewChild, isDevMode, ViewContainerRef, Injector, numberAttribute, HostListener, model, contentChild, contentChildren, PLATFORM_ID, afterNextRender, output, HostBinding, 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 { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import { fromEvent, startWith, map, filter, Subscription, Subject, take, takeUntil, merge } from 'rxjs';
+import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { CdkDialogContainer, Dialog as Dialog$1 } from '@angular/cdk/dialog';
+import { Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
+import { hasModifierKey } from '@angular/cdk/keycodes';
 import * as i2 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { Directionality } from '@angular/cdk/bidi';
 import { FormControlName } from '@angular/forms';
-import { CdkDialogContainer, Dialog as Dialog$1 } from '@angular/cdk/dialog';
-import { hasModifierKey } from '@angular/cdk/keycodes';
-import { Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
 
 class TypeDisplay {
     el;
@@ -397,6 +397,1094 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+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');
+/** Long enough to outlast the surface transition, which the transitionend listener usually beats. */
+const BOTTOM_SHEET_EXIT_ANIMATION_FALLBACK_MS = 600;
+const BOTTOM_SHEET_DRAGGING_CLASS = 'md3-bottom-sheet-dragging';
+/** A modal sheet has one height, so it reports the same state a standard sheet does when open. */
+const ALWAYS_EXPANDED = signal('expanded').asReadonly();
+/**
+ * What both kinds of bottom sheet have in common: closing once, animating out before the shell
+ * goes away, and reporting the result. The two shells differ in what they are hosted by — a CDK
+ * overlay or a scaffold outlet — so each subclass owns its own exit and teardown.
+ *
+ * This class stays the DI token, so a component written for one kind of sheet can be opened as
+ * the other without changing how it injects its reference.
+ */
+class BottomSheetRef {
+    closed = new Subject();
+    closeStarted = false;
+    closeSettled = false;
+    /** Surface hosting the sheet. Filled in by BottomSheetService once the shell is created. */
+    sheetInstance;
+    /** Filled by BottomSheetService after the sheet component is attached. */
+    componentInstance;
+    /** Whether the sheet started closing. */
+    get isClosing() {
+        return this.closeStarted;
+    }
+    /** Height the sheet is resting at. A modal sheet is only ever fully open. */
+    get state() {
+        return ALWAYS_EXPANDED;
+    }
+    /** 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.finishClose(result));
+    }
+    afterClosed() {
+        return this.closed.asObservable();
+    }
+    /**
+     * Wires the shell to this reference. Called by BottomSheetService, since the shell is
+     * created before this reference exists and cannot reach it through DI.
+     */
+    attachContainer(container) {
+        this.sheetInstance = container;
+        container.dismissed.pipe(take(1)).subscribe(() => this.close());
+    }
+    /** Moves a standard sheet to its expanded height. Modal sheets have only one height. */
+    expand() {
+    }
+    /** Moves a standard sheet back to its collapsed height. */
+    collapse() {
+    }
+    /** Switches a standard sheet between its two heights. */
+    toggle() {
+    }
+    setCollapsedHeight(height) {
+    }
+    setExpandedHeight(height) {
+    }
+    setDismissible(value) {
+    }
+    /** Resolves when the surface finished animating, with a timeout as a safety net. */
+    waitForSurfaceAnimation(fallback) {
+        const surface = this.sheetInstance?.surfaceElement ?? fallback ?? null;
+        if (!surface) {
+            return Promise.resolve();
+        }
+        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 sheet is gone. */
+    settle(result) {
+        if (this.closeSettled) {
+            return;
+        }
+        this.closeStarted = true;
+        this.closeSettled = true;
+        this.closed.next(result);
+        this.closed.complete();
+    }
+}
+/**
+ * A modal bottom sheet is a single 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 ModalBottomSheetRef extends BottomSheetRef {
+    cdkRef;
+    constructor(cdkRef) {
+        super();
+        this.cdkRef = cdkRef;
+        this.cdkRef.closed.pipe(take(1)).subscribe((result) => this.settle(result));
+        this.connectCloseEvents();
+    }
+    /** Overlay hosting the sheet, useful to reach the panel and the scrim. */
+    get overlayRef() {
+        return this.cdkRef.overlayRef;
+    }
+    attachContainer(container) {
+        super.attachContainer(container);
+        container.dragProgress.pipe(takeUntil(this.closed)).subscribe((progress) => this.trackDragProgress(progress));
+    }
+    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(overlayRef.overlayElement);
+    }
+    finishClose(result) {
+        this.cdkRef.close(result);
+    }
+    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();
+        });
+    }
+    /** 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}`);
+    }
+}
+/**
+ * A standard bottom sheet lives in a scaffold outlet rather than an overlay, so there is no
+ * scrim to fade and nothing to dispose but the component itself. In exchange it can be moved
+ * between its two heights while it is open.
+ */
+class StandardBottomSheetRef extends BottomSheetRef {
+    onClosed;
+    sheetComponentRef;
+    host;
+    constructor(onClosed) {
+        super();
+        this.onClosed = onClosed;
+    }
+    get state() {
+        return this.host?.state ?? ALWAYS_EXPANDED;
+    }
+    /** Called by BottomSheetService once the shell has been created in the outlet. */
+    attachSheet(componentRef, host) {
+        this.sheetComponentRef = componentRef;
+        this.host = host;
+        this.attachContainer(host);
+    }
+    expand() {
+        this.host?.expand();
+    }
+    collapse() {
+        this.host?.collapse();
+    }
+    toggle() {
+        this.host?.toggle();
+    }
+    setCollapsedHeight(height) {
+        this.host?.setCollapsedHeight(height);
+    }
+    setExpandedHeight(height) {
+        this.host?.setExpandedHeight(height);
+    }
+    setDismissible(value) {
+        this.host?.setDismissible(value);
+    }
+    /**
+     * Tears the sheet down without an exit animation, for when the outlet holding it is going
+     * away and there is nothing left to animate in.
+     */
+    dispose(result) {
+        if (this.closeStarted && !this.sheetComponentRef) {
+            return;
+        }
+        this.closeStarted = true;
+        this.finishClose(result);
+    }
+    startCloseAnimation() {
+        this.sheetInstance?.setActive(false);
+        return this.waitForSurfaceAnimation();
+    }
+    finishClose(result) {
+        this.sheetComponentRef?.destroy();
+        this.sheetComponentRef = undefined;
+        this.host = undefined;
+        this.onClosed();
+        this.settle(result);
+    }
+}
+
+/** Movement shorter than this is still a tap rather than a drag. */
+const DRAG_START_THRESHOLD_PX = 4;
+/** Part of the segment being crossed that a drag has to cover to commit to the next snap point. */
+const SETTLE_DISTANCE_RATIO = 0.4;
+/** Speed, in pixels per millisecond, that carries the sheet to the next snap point on its own. */
+const FLING_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;
+/**
+ * Picks the snap point a released drag settles on, as an index into `points`.
+ *
+ * A drag only ever moves one point at a time: it commits to the neighbour in the direction of
+ * travel once it has covered enough of the gap, or immediately when it was thrown hard enough,
+ * and otherwise falls back to where it started. A modal sheet is the two-point case of this —
+ * resting and dismissed — which is why generalizing the gesture leaves it behaving the same.
+ */
+function settleTarget(input) {
+    const { points, origin, offset, velocity, idleTime } = input;
+    if (points.length === 0) {
+        return 0;
+    }
+    const originIndex = nearestPointIndex(points, origin);
+    if (idleTime < VELOCITY_TIMEOUT_MS && Math.abs(velocity) > FLING_VELOCITY) {
+        return clampIndex$1(originIndex + (velocity > 0 ? 1 : -1), points.length);
+    }
+    const direction = Math.sign(offset - points[originIndex]);
+    if (direction === 0) {
+        return originIndex;
+    }
+    const targetIndex = clampIndex$1(originIndex + direction, points.length);
+    const segment = Math.abs(points[targetIndex] - points[originIndex]);
+    const travelled = Math.abs(offset - points[originIndex]);
+    return segment > 0 && travelled >= segment * SETTLE_DISTANCE_RATIO ? targetIndex : originIndex;
+}
+/** Snap point the given offset sits closest to. Ties go to the lower index. */
+function nearestPointIndex(points, offset) {
+    let nearest = 0;
+    for (let index = 1; index < points.length; index++) {
+        if (Math.abs(points[index] - offset) < Math.abs(points[nearest] - offset)) {
+            nearest = index;
+        }
+    }
+    return nearest;
+}
+function clampIndex$1(index, length) {
+    return Math.min(Math.max(index, 0), length - 1);
+}
+
+/**
+ * The MD3 bottom sheet surface: the rounded panel, its drag handle and the gesture that moves
+ * it. Both shells wrap this — the modal one inside a CDK dialog container, the standard one
+ * inside a scaffold outlet — and project their own portal outlet into it, which is what lets
+ * the CDK keep the outlet in its own template while the markup lives here once.
+ *
+ * The surface reports gestures through observables instead of acting on them, because it is
+ * created before the sheet's reference exists and cannot reach it through DI.
+ */
+class BottomSheetSurface {
+    surface = viewChild('surface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    zone = inject(NgZone);
+    el = inject(ElementRef);
+    dismissedSheet = new Subject();
+    draggedSheet = new Subject();
+    settledSheet = new Subject();
+    mode = input('modal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    showHandle = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHandle" }] : /* istanbul ignore next */ []));
+    allowGestures = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowGestures" }] : /* istanbul ignore next */ []));
+    dismissible = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    initialState = input('collapsed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialState" }] : /* istanbul ignore next */ []));
+    scheme = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []));
+    direction = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    handleLabel = input('Resize sheet', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "handleLabel" }] : /* istanbul ignore next */ []));
+    controlsId = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlsId" }] : /* istanbul ignore next */ []));
+    isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    /** How far below the fully expanded position the sheet currently sits, in pixels. */
+    dragOffset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragOffset" }] : /* istanbul ignore next */ []));
+    /**
+     * Snap offsets in pixels, ascending: expanded, then collapsed for a standard sheet, then
+     * dismissed where dragging that far is allowed. Measured rather than derived from the
+     * configured CSS lengths, so `em`, `dvh` and the rest resolve themselves.
+     */
+    snapPoints = signal([0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+    settledIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "settledIndex" }] : /* istanbul ignore next */ []));
+    state = computed(() => {
+        return this.settledIndex() === 0 ? 'expanded' : 'collapsed';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    isHandleInteractive = computed(() => {
+        return this.mode() === 'standard' && this.allowGestures() && this.showHandle();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHandleInteractive" }] : /* istanbul ignore next */ []));
+    /**
+     * Only set when a drag has to be seen out past where the stylesheet would leave the sheet,
+     * so the exit carries on the way the drag was going instead of doubling back.
+     */
+    exitTransform = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "exitTransform" }] : /* istanbul ignore next */ []));
+    /**
+     * Left to the stylesheet unless the component has a position of its own to impose — a drag
+     * in progress, or the resting offset of a collapsed standard sheet. The closed and fully
+     * open positions stay in CSS so they apply as soon as the element is inserted, which is
+     * what the enter transition needs to have somewhere to run from.
+     */
+    surfaceTransform = computed(() => {
+        if (!this.isActive()) {
+            return this.exitTransform();
+        }
+        const offset = this.dragOffset();
+        return offset > 0 ? `translateY(${offset}px)` : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surfaceTransform" }] : /* istanbul ignore next */ []));
+    /** Pointer currently dragging the sheet, if there is one. */
+    pointerId;
+    /** Scrollable the drag started over, which owns the gesture while it has room to scroll. */
+    scroller = null;
+    startY = 0;
+    lastY = 0;
+    lastTimestamp = 0;
+    velocity = 0;
+    originOffset = 0;
+    isPastThreshold = false;
+    /** Set once the sheet is on its way out, so a late resize cannot pull it back into view. */
+    isExiting = false;
+    dismissed = this.dismissedSheet.asObservable();
+    dragProgress = this.draggedSheet.asObservable();
+    stateChanges = this.settledSheet.asObservable();
+    constructor() {
+        effect(() => {
+            if (this.mode() === 'standard') {
+                this.exitTransform.set('translateY(100%)');
+            }
+        });
+        // Heights are CSS lengths, so anything that resizes the surface — a viewport change, a
+        // new expanded height — moves the snap points with it and the sheet has to settle again.
+        effect((onCleanup) => {
+            const surface = this.el.nativeElement;
+            const observer = new ResizeObserver(() => this.remeasure());
+            observer.observe(surface);
+            onCleanup(() => observer.disconnect());
+        });
+    }
+    get surfaceElement() {
+        return this.surface()?.nativeElement ?? null;
+    }
+    startEnterAnimation() {
+        requestAnimationFrame(() => {
+            this.measure();
+            // A modal sheet has one resting height, so only a standard sheet can open collapsed.
+            const opensCollapsed = this.mode() === 'standard' && this.initialState() === 'collapsed';
+            this.snapTo(opensCollapsed ? this.collapsedIndex() : 0, false);
+            this.isActive.set(true);
+        });
+    }
+    setActive(value) {
+        if (!value) {
+            this.isExiting = true;
+        }
+        this.isActive.set(value);
+    }
+    expand() {
+        this.snapTo(0);
+    }
+    collapse() {
+        this.snapTo(this.collapsedIndex());
+    }
+    toggle() {
+        if (this.state() === 'expanded') {
+            this.collapse();
+        }
+        else {
+            this.expand();
+        }
+    }
+    destroy() {
+        this.releasePointer();
+    }
+    onHandleKeydown(event) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.expand();
+        }
+        // Collapsing is as far as the keyboard goes, even when a drag could dismiss the sheet:
+        // there is no undo for a dismissal reached by arrow key.
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.collapse();
+        }
+    }
+    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.measure();
+        this.pointerId = event.pointerId;
+        this.startY = this.lastY = event.clientY;
+        this.lastTimestamp = event.timeStamp;
+        this.velocity = 0;
+        this.originOffset = this.dragOffset();
+        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;
+        }
+        this.setDragOffset(this.clampToRange(this.originOffset + event.clientY - this.startY));
+    };
+    onPointerUp = (event) => {
+        if (event.pointerId !== this.pointerId) {
+            return;
+        }
+        if (!this.isPastThreshold) {
+            this.releasePointer();
+            return;
+        }
+        const points = this.snapPoints();
+        const target = settleTarget({
+            points,
+            origin: this.originOffset,
+            offset: this.dragOffset(),
+            velocity: this.velocity,
+            idleTime: event.timeStamp - this.lastTimestamp,
+        });
+        this.releasePointer();
+        if (target === this.dismissIndex()) {
+            this.slideOut(points[target]);
+            this.zone.run(() => this.dismissedSheet.next());
+        }
+        else {
+            this.snapTo(target);
+        }
+        this.suppressClickAfterDrag();
+    };
+    onPointerCancel = (event) => {
+        if (event.pointerId === this.pointerId) {
+            const wasDragging = this.isPastThreshold;
+            this.releasePointer();
+            if (wasDragging) {
+                this.snapTo(this.settledIndex());
+            }
+        }
+    };
+    /** 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. Downward
+     * moves over content that still has somewhere to scroll belong to the content, and so do
+     * upward moves once the sheet is already as far up as it goes — in both cases the sheet
+     * lets go of the gesture for good.
+     */
+    tryStartDrag(event) {
+        const distance = event.clientY - this.startY;
+        if (Math.abs(distance) < DRAG_START_THRESHOLD_PX) {
+            return false;
+        }
+        const isDownward = distance > 0;
+        const isBlocked = isDownward
+            ? (this.scroller?.scrollTop ?? 0) > 0
+            : this.dragOffset() <= this.snapPoints()[0];
+        if (isBlocked) {
+            this.releasePointer();
+            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;
+    }
+    /** Re-reads the geometry the snap points are derived from. */
+    measure() {
+        const expanded = this.el.nativeElement.offsetHeight;
+        if (expanded <= 0) {
+            return;
+        }
+        if (this.mode() === 'modal') {
+            this.snapPoints.set([0, expanded]);
+            return;
+        }
+        // The peek strip a standard sheet reserves is the height of the element it was placed
+        // in — the standard shell's host, which the scaffold row sizes to the collapsed height.
+        // Measuring beats resolving the configured CSS length by hand.
+        const collapsed = this.el.nativeElement.parentElement?.getBoundingClientRect().height ?? expanded;
+        const points = [0, Math.max(0, expanded - collapsed)];
+        if (this.dismissible()) {
+            points.push(expanded);
+        }
+        this.snapPoints.set(points);
+    }
+    /** Settles the sheet again after its geometry moved underneath it. */
+    remeasure() {
+        if (this.pointerId !== undefined || this.isExiting) {
+            return;
+        }
+        this.measure();
+        const points = this.snapPoints();
+        const index = Math.min(this.settledIndex(), points.length - 1);
+        this.settledIndex.set(index);
+        this.dragOffset.set(points[index]);
+    }
+    snapTo(index, notify = true) {
+        const points = this.snapPoints();
+        const target = Math.min(Math.max(index, 0), points.length - 1);
+        const previous = this.state();
+        this.settledIndex.set(target);
+        this.setDragOffset(points[target]);
+        if (notify && this.state() !== previous) {
+            this.zone.run(() => this.settledSheet.next(this.state()));
+        }
+    }
+    /**
+     * Sees the drag out of the viewport rather than back to a snap point, so a dismissed sheet
+     * keeps going the way it was dragged. The fade comes from the exit animation the sheet's
+     * reference starts right after, which finds the surface already on its way out.
+     */
+    slideOut(offset) {
+        this.isExiting = true;
+        this.exitTransform.set(`translateY(${offset}px)`);
+        this.setDragOffset(offset);
+    }
+    setDragOffset(offset) {
+        const dismissOffset = this.snapPoints()[this.dismissIndex() ?? -1];
+        this.dragOffset.set(offset);
+        this.draggedSheet.next(dismissOffset > 0 ? Math.min(1, offset / dismissOffset) : 0);
+    }
+    /** Index a drag has to reach for the sheet to be dismissed, when it can be at all. */
+    dismissIndex() {
+        if (this.mode() === 'modal') {
+            return 1;
+        }
+        return this.dismissible() ? this.snapPoints().length - 1 : undefined;
+    }
+    collapsedIndex() {
+        return Math.min(1, this.snapPoints().length - 1);
+    }
+    clampToRange(offset) {
+        const points = this.snapPoints();
+        return Math.min(Math.max(offset, points[0]), points[points.length - 1]);
+    }
+    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: BottomSheetSurface, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: BottomSheetSurface, isStandalone: true, selector: "md3-bottom-sheet-surface", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, allowGestures: { classPropertyName: "allowGestures", publicName: "allowGestures", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, initialState: { classPropertyName: "initialState", publicName: "initialState", isSignal: true, isRequired: false, transformFunction: null }, scheme: { classPropertyName: "scheme", publicName: "scheme", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, handleLabel: { classPropertyName: "handleLabel", publicName: "handleLabel", isSignal: true, isRequired: false, transformFunction: null }, controlsId: { classPropertyName: "controlsId", publicName: "controlsId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.md3-mode-standard": "mode() === \"standard\"", "class.md3-mode-modal": "mode() === \"modal\"", "class.md3-hide-handle": "!showHandle()", "class.md3-draggable": "allowGestures()", "class.md3-dragging": "isDragging()", "class.md3-expanded": "state() === \"expanded\"" } }, viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #surface\n    class=\"md3-bottom-sheet-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"scheme() === 'dark'\"\n    [class.md-scheme-light]=\"scheme() === 'light'\"\n    [style.transform]=\"surfaceTransform()\"\n    [attr.dir]=\"direction() ?? null\"\n    (pointerdown)=\"onPointerDown($event)\">\n    @if (isHandleInteractive()) {\n        <button\n            type=\"button\"\n            class=\"md3-bottom-sheet-handle\"\n            [attr.aria-label]=\"handleLabel()\"\n            [attr.aria-expanded]=\"state() === 'expanded'\"\n            [attr.aria-controls]=\"controlsId() || null\"\n            (click)=\"toggle()\"\n            (keydown)=\"onHandleKeydown($event)\"></button>\n    } @else {\n        <div class=\"md3-bottom-sheet-handle\" aria-hidden=\"true\"></div>\n    }\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;outline:0}:host .md3-bottom-sheet-container{position:relative;display:block;width:100%;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);transform-origin:bottom;opacity:0;transform:translateY(60%) scaleY(.8)}: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;padding:0;border:0;appearance:none;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-mode-modal .md3-bottom-sheet-container{max-height:70vh}:host.md3-mode-standard{position:absolute;inset-inline:0;bottom:0;height:var(--md3-bottom-sheet-expanded-height, 70dvh);clip-path:inset(-100vh -100vw 0 -100vw)}:host.md3-mode-standard .md3-bottom-sheet-container{height:100%;transform:translateY(100%)}:host.md3-mode-standard .md3-bottom-sheet-container.md3-active{transform:translateY(0)}:host.md3-mode-standard .md3-bottom-sheet-container>::ng-deep *:not(.md3-bottom-sheet-handle){height:100%}: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-draggable .md3-bottom-sheet-container .md3-bottom-sheet-handle:focus-visible{opacity:1;outline:.125em solid rgb(var(--md-scheme-secondary));outline-offset:.375em}:host.md3-dragging .md3-bottom-sheet-container{transition:none}:host.md3-dragging .md3-bottom-sheet-container .md3-bottom-sheet-handle{cursor:grabbing}:host.md3-mode-standard.md3-draggable .md3-bottom-sheet-container{touch-action:none;overscroll-behavior:contain}:host.md3-mode-standard.md3-draggable.md3-expanded .md3-bottom-sheet-container{touch-action:pan-y}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BottomSheetSurface, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-bottom-sheet-surface', imports: [], host: {
+                        '[class.md3-mode-standard]': 'mode() === "standard"',
+                        '[class.md3-mode-modal]': 'mode() === "modal"',
+                        '[class.md3-hide-handle]': '!showHandle()',
+                        '[class.md3-draggable]': 'allowGestures()',
+                        '[class.md3-dragging]': 'isDragging()',
+                        '[class.md3-expanded]': 'state() === "expanded"',
+                    }, template: "<div\n    #surface\n    class=\"md3-bottom-sheet-container\"\n    [class.md3-active]=\"isActive()\"\n    [class.md-scheme-dark]=\"scheme() === 'dark'\"\n    [class.md-scheme-light]=\"scheme() === 'light'\"\n    [style.transform]=\"surfaceTransform()\"\n    [attr.dir]=\"direction() ?? null\"\n    (pointerdown)=\"onPointerDown($event)\">\n    @if (isHandleInteractive()) {\n        <button\n            type=\"button\"\n            class=\"md3-bottom-sheet-handle\"\n            [attr.aria-label]=\"handleLabel()\"\n            [attr.aria-expanded]=\"state() === 'expanded'\"\n            [attr.aria-controls]=\"controlsId() || null\"\n            (click)=\"toggle()\"\n            (keydown)=\"onHandleKeydown($event)\"></button>\n    } @else {\n        <div class=\"md3-bottom-sheet-handle\" aria-hidden=\"true\"></div>\n    }\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;outline:0}:host .md3-bottom-sheet-container{position:relative;display:block;width:100%;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);transform-origin:bottom;opacity:0;transform:translateY(60%) scaleY(.8)}: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;padding:0;border:0;appearance:none;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-mode-modal .md3-bottom-sheet-container{max-height:70vh}:host.md3-mode-standard{position:absolute;inset-inline:0;bottom:0;height:var(--md3-bottom-sheet-expanded-height, 70dvh);clip-path:inset(-100vh -100vw 0 -100vw)}:host.md3-mode-standard .md3-bottom-sheet-container{height:100%;transform:translateY(100%)}:host.md3-mode-standard .md3-bottom-sheet-container.md3-active{transform:translateY(0)}:host.md3-mode-standard .md3-bottom-sheet-container>::ng-deep *:not(.md3-bottom-sheet-handle){height:100%}: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-draggable .md3-bottom-sheet-container .md3-bottom-sheet-handle:focus-visible{opacity:1;outline:.125em solid rgb(var(--md-scheme-secondary));outline-offset:.375em}:host.md3-dragging .md3-bottom-sheet-container{transition:none}:host.md3-dragging .md3-bottom-sheet-container .md3-bottom-sheet-handle{cursor:grabbing}:host.md3-mode-standard.md3-draggable .md3-bottom-sheet-container{touch-action:none;overscroll-behavior:contain}:host.md3-mode-standard.md3-draggable.md3-expanded .md3-bottom-sheet-container{touch-action:pan-y}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], allowGestures: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowGestures", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], initialState: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialState", required: false }] }], scheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "scheme", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], handleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleLabel", required: false }] }], controlsId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsId", required: false }] }] } });
+
+/**
+ * Modal 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 the
+ * surface it wraps owns the MD3 panel, the drag handle and the animation. A modal sheet is
+ * always an overlay above the page; the standard variant docks into the scaffold instead and
+ * uses the same surface from a different shell.
+ */
+class BottomSheet extends CdkDialogContainer {
+    // Static, because BottomSheetService wires this shell to the sheet's reference as soon as
+    // the CDK has created it, which is before any change detection has run over the view.
+    surface;
+    config = inject(BOTTOM_SHEET_CONFIG, { optional: true }) ?? {};
+    get surfaceElement() {
+        return this.surface.surfaceElement;
+    }
+    get dismissed() {
+        return this.surface.dismissed;
+    }
+    get dragProgress() {
+        return this.surface.dragProgress;
+    }
+    get stateChanges() {
+        return this.surface.stateChanges;
+    }
+    startEnterAnimation() {
+        this.surface.startEnterAnimation();
+    }
+    setActive(value) {
+        this.surface.setActive(value);
+    }
+    recaptureFocus() {
+        this._recaptureFocus();
+    }
+    ngOnDestroy() {
+        this.surface.destroy();
+        super.ngOnDestroy();
+    }
+    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: "14.0.0", version: "22.1.0", type: BottomSheet, isStandalone: true, selector: "md3-bottom-sheet", viewQueries: [{ propertyName: "surface", first: true, predicate: BottomSheetSurface, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container.\n     The portal outlet stays in this template, as the CDK requires, and is projected into the\n     shared surface. -->\n<md3-bottom-sheet-surface\n    [showHandle]=\"config.handle ?? true\"\n    [allowGestures]=\"config.gestures ?? true\"\n    [scheme]=\"config.scheme ?? 'inherit'\"\n    [direction]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</md3-bottom-sheet-surface>\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}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: BottomSheetSurface, selector: "md3-bottom-sheet-surface", inputs: ["mode", "showHandle", "allowGestures", "dismissible", "initialState", "scheme", "direction", "handleLabel", "controlsId"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BottomSheet, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-bottom-sheet', imports: [
+                        CdkPortalOutlet,
+                        BottomSheetSurface,
+                    ], template: "<!-- The role and aria attributes live on the host element, applied by the CDK dialog container.\n     The portal outlet stays in this template, as the CDK requires, and is projected into the\n     shared surface. -->\n<md3-bottom-sheet-surface\n    [showHandle]=\"config.handle ?? true\"\n    [allowGestures]=\"config.gestures ?? true\"\n    [scheme]=\"config.scheme ?? 'inherit'\"\n    [direction]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</md3-bottom-sheet-surface>\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}\n"] }]
+        }], propDecorators: { surface: [{
+                type: ViewChild,
+                args: [BottomSheetSurface, { static: true }]
+            }] } });
+
+let nextRegionId = 0;
+/**
+ * Standard bottom sheet shell: page furniture rather than a dialog. It docks into the
+ * scaffold's sheet region and floats over the content from there, above the bottom bar and
+ * without a scrim, leaving the page scrolling, clickable and focusable behind it. Nothing here
+ * traps focus or handles Escape, which is the whole difference from the modal shell — the
+ * surface, the handle and the gesture are shared.
+ */
+class StandardBottomSheet {
+    portalOutlet;
+    surface;
+    config = inject(BOTTOM_SHEET_CONFIG, { optional: true }) ?? {};
+    el = inject(ElementRef);
+    /** Named so the drag handle can point `aria-controls` at the region it expands. */
+    regionId = `md3-bottom-sheet-${nextRegionId++}`;
+    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 */ []));
+    dismissible = signal(this.config.dismissible ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    initialState = signal(this.config.initialState ?? 'collapsed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialState" }] : /* istanbul ignore next */ []));
+    label = signal(this.config.label ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelledBy = signal(this.config.labelledBy ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    collapsedHeight = signal(toCssLength(this.config.collapsedHeight, '10em'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedHeight" }] : /* istanbul ignore next */ []));
+    expandedHeight = signal(toCssLength(this.config.expandedHeight, '70dvh'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Whatever had focus when the sheet opened, so it can be handed back — but only if the
+     * sheet still holds focus when it closes, rather than yanking it off whatever the user
+     * moved on to in the meantime.
+     */
+    previouslyFocused = document.activeElement;
+    constructor() {
+        effect(() => {
+            const element = this.el.nativeElement;
+            element.style.setProperty('--md3-bottom-sheet-collapsed-height', this.collapsedHeight());
+            element.style.setProperty('--md3-bottom-sheet-expanded-height', this.expandedHeight());
+        });
+        if (isDevMode() && !this.config.label && !this.config.labelledBy) {
+            console.warn('A standard bottom sheet without a `label` or `labelledBy` is not exposed as a '
+                + 'landmark to assistive technology. Pass one in the sheet configuration.');
+        }
+    }
+    get state() {
+        return this.surface.state;
+    }
+    get surfaceElement() {
+        return this.surface.surfaceElement;
+    }
+    get dismissed() {
+        return this.surface.dismissed;
+    }
+    get dragProgress() {
+        return this.surface.dragProgress;
+    }
+    get stateChanges() {
+        return this.surface.stateChanges;
+    }
+    startEnterAnimation() {
+        this.surface.startEnterAnimation();
+    }
+    setActive(value) {
+        this.surface.setActive(value);
+    }
+    expand() {
+        this.surface.expand();
+    }
+    collapse() {
+        this.surface.collapse();
+    }
+    toggle() {
+        this.surface.toggle();
+    }
+    setCollapsedHeight(value) {
+        this.collapsedHeight.set(toCssLength(value, '10em'));
+        this.surface.remeasure();
+    }
+    setExpandedHeight(value) {
+        this.expandedHeight.set(toCssLength(value, '70dvh'));
+        this.surface.remeasure();
+    }
+    setDismissible(value) {
+        this.dismissible.set(value);
+    }
+    attachContent(component, injector) {
+        const portal = new ComponentPortal(component, this.config.viewContainerRef ?? null, injector);
+        return this.portalOutlet.attachComponentPortal(portal);
+    }
+    ngOnDestroy() {
+        this.surface.destroy();
+        if (this.el.nativeElement.contains(document.activeElement)) {
+            this.previouslyFocused?.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StandardBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: StandardBottomSheet, isStandalone: true, selector: "md3-standard-bottom-sheet", host: { attributes: { "role": "region" }, properties: { "attr.id": "regionId", "attr.aria-label": "label() || null", "attr.aria-labelledby": "labelledBy() || null" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "surface", first: true, predicate: BottomSheetSurface, descendants: true, static: true }], ngImport: i0, template: "<md3-bottom-sheet-surface\n    mode=\"standard\"\n    [showHandle]=\"showHandle()\"\n    [allowGestures]=\"allowGestures()\"\n    [dismissible]=\"dismissible()\"\n    [initialState]=\"initialState()\"\n    [controlsId]=\"regionId\"\n    [scheme]=\"config.scheme ?? 'inherit'\"\n    [direction]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</md3-bottom-sheet-surface>\n", styles: [":host{position:absolute;display:block;inset-inline:0;bottom:0;width:100%;max-width:40em;margin-inline:auto;height:var(--md3-bottom-sheet-collapsed-height, 10em);overflow:visible}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: BottomSheetSurface, selector: "md3-bottom-sheet-surface", inputs: ["mode", "showHandle", "allowGestures", "dismissible", "initialState", "scheme", "direction", "handleLabel", "controlsId"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StandardBottomSheet, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-standard-bottom-sheet', imports: [
+                        CdkPortalOutlet,
+                        BottomSheetSurface,
+                    ], host: {
+                        'role': 'region',
+                        '[attr.id]': 'regionId',
+                        '[attr.aria-label]': 'label() || null',
+                        '[attr.aria-labelledby]': 'labelledBy() || null',
+                    }, template: "<md3-bottom-sheet-surface\n    mode=\"standard\"\n    [showHandle]=\"showHandle()\"\n    [allowGestures]=\"allowGestures()\"\n    [dismissible]=\"dismissible()\"\n    [initialState]=\"initialState()\"\n    [controlsId]=\"regionId\"\n    [scheme]=\"config.scheme ?? 'inherit'\"\n    [direction]=\"config.direction ?? null\">\n    <ng-template cdkPortalOutlet></ng-template>\n</md3-bottom-sheet-surface>\n", styles: [":host{position:absolute;display:block;inset-inline:0;bottom:0;width:100%;max-width:40em;margin-inline:auto;height:var(--md3-bottom-sheet-collapsed-height, 10em);overflow:visible}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }], surface: [{
+                type: ViewChild,
+                args: [BottomSheetSurface, { static: true }]
+            }] } });
+function toCssLength(value, fallback) {
+    if (value === undefined) {
+        return fallback;
+    }
+    return typeof value === 'number' ? `${value}px` : value;
+}
+
+/**
+ * Host attached into the scaffold's sheet outlet, where standard bottom sheets are created.
+ * It is attached as soon as the outlet registers and takes no space at any point: the sheets
+ * it holds are positioned against the region around it, so a replacement can open while the
+ * sheet it replaces is still animating out without either of them disturbing the layout.
+ */
+class BottomSheetOutlet {
+    container;
+    createSheet(injector) {
+        const sheetComponentRef = this.container.createComponent(StandardBottomSheet, { injector });
+        // The shell's view has to exist before its portal outlet can take the content.
+        sheetComponentRef.changeDetectorRef.detectChanges();
+        return sheetComponentRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BottomSheetOutlet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: BottomSheetOutlet, isStandalone: true, selector: "md3-bottom-sheet-outlet", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true, styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BottomSheetOutlet, decorators: [{
+            type: Component,
+            args: [{ selector: 'md3-bottom-sheet-outlet', template: '<ng-container #container></ng-container>', styles: [":host{display:block}\n"] }]
+        }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }] } });
+
+const PANEL_CLASS$1 = 'md3-bottom-sheet-panel';
+const OPENING_CLASS$1 = 'md3-bottom-sheet-opening';
+/**
+ * Opens bottom sheets, in either of the two ways MD3 describes them.
+ *
+ * A modal sheet is a CDK dialog anchored to the bottom of the viewport, the same way a regular
+ * dialog is always an overlay, so that path mirrors DialogService. A standard sheet is docked
+ * into the scaffold instead, following the side sheet outlet model: it floats over the content
+ * without a scrim, leaves the rest of the page usable, and needs an outlet to open into.
+ *
+ * One of each may be open at a time, and they replace only their own kind.
+ */
+class BottomSheetService {
+    cdkDialog = inject(Dialog$1);
+    overlay = inject(Overlay);
+    injector = inject(Injector);
+    /**
+     * Outlets registered from the page scaffold up to whatever took them over last. Standard
+     * sheets always open in the outlet on top.
+     */
+    outlets = [];
+    modalRef;
+    standardRef;
+    /** Registers the outlet standard bottom sheets open into. Called by Scaffold. */
+    registerBottomSheetOutlet(outlet) {
+        if (this.outlets.some((state) => state.outlet === outlet)) {
+            return;
+        }
+        if (outlet.hasAttached()) {
+            outlet.detach();
+        }
+        const portal = new ComponentPortal(BottomSheetOutlet, null, this.injector);
+        this.outlets.push({
+            outlet,
+            hostComponentRef: outlet.attachComponentPortal(portal),
+        });
+    }
+    unregisterBottomSheetOutlet(outlet) {
+        const index = this.outlets.findIndex((state) => state.outlet === outlet);
+        if (index === -1) {
+            return;
+        }
+        // A sheet open in this outlet goes with it, without an exit animation: the outlet is
+        // being torn down, so there is nothing left to animate in.
+        if (index === this.outlets.length - 1) {
+            this.standardRef?.dispose();
+        }
+        this.outlets[index].outlet.detach();
+        this.outlets.splice(index, 1);
+    }
+    open(component, config = {}) {
+        const sheetConfig = this.mergeConfig(config);
+        return sheetConfig.type === 'standard'
+            ? this.openStandard(component, sheetConfig)
+            : this.openModal(component, sheetConfig);
+    }
+    /**
+     * Closes the bottom sheet that is open. A modal sheet goes first when both kinds are up,
+     * since it is the one covering the page.
+     */
+    close(result) {
+        if (this.modalRef) {
+            this.modalRef.close(result);
+            return;
+        }
+        this.standardRef?.close(result);
+    }
+    openModal(component, sheetConfig) {
+        // Opening a new modal sheet always replaces the one that is open.
+        this.modalRef?.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 ModalBottomSheetRef(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$1],
+            panelClass: [PANEL_CLASS$1, OPENING_CLASS$1],
+            positionStrategy: this.overlay.position()
+                .global()
+                .centerHorizontally()
+                .bottom('0'),
+            // A modal bottom sheet blocks page scrolling for as long as it is open.
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            // Scrim and Escape handling lives in the reference 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.modalRef = sheetRef;
+        this.startOpenAnimation(sheetRef);
+        sheetRef.afterClosed().subscribe(() => {
+            if (this.modalRef === sheetRef) {
+                this.modalRef = undefined;
+            }
+        });
+        return sheetRef;
+    }
+    openStandard(component, sheetConfig) {
+        const host = this.activeOutlet();
+        if (!host) {
+            throw new Error('No bottom sheet outlet is registered. A standard bottom sheet docks into the '
+                + 'scaffold, so the layout has to be in place before one can open.');
+        }
+        // Opening a new standard sheet always replaces the one that is open.
+        this.standardRef?.close();
+        const sheetRef = new StandardBottomSheetRef(() => {
+            if (this.standardRef === sheetRef) {
+                this.standardRef = undefined;
+            }
+        });
+        const injector = this.createInjector(component, sheetConfig, sheetRef);
+        const sheetComponentRef = host.hostComponentRef.instance.createSheet(injector);
+        const contentComponentRef = sheetComponentRef.instance.attachContent(component, injector);
+        sheetComponentRef.changeDetectorRef.detectChanges();
+        sheetRef.attachSheet(sheetComponentRef, sheetComponentRef.instance);
+        this.bindDataToInputs(contentComponentRef, sheetConfig);
+        sheetRef.componentInstance = contentComponentRef.instance;
+        this.standardRef = sheetRef;
+        sheetComponentRef.instance.startEnterAnimation();
+        return sheetRef;
+    }
+    activeOutlet() {
+        return this.outlets[this.outlets.length - 1];
+    }
+    createInjector(component, config, sheetRef) {
+        return Injector.create({
+            parent: config.injector,
+            providers: [
+                { provide: BottomSheetRef, useValue: sheetRef },
+                { provide: BOTTOM_SHEET_DATA, useValue: config.data },
+                { provide: BOTTOM_SHEET_CONFIG, useValue: config },
+                { provide: BOTTOM_SHEET_COMPONENT, useValue: component },
+            ],
+        });
+    }
+    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$1);
+                backdrop?.classList.remove(OPENING_CLASS$1);
+            }, 100);
+        });
+        sheetRef.sheetInstance?.startEnterAnimation();
+    }
+    mergeConfig(config) {
+        return {
+            ...config,
+            data: config.data,
+            bindDataToInputs: config.bindDataToInputs ?? false,
+            type: config.type ?? 'modal',
+            handle: config.handle ?? true,
+            gestures: config.gestures ?? true,
+            dismissible: config.dismissible ?? false,
+            initialState: config.initialState ?? 'collapsed',
+            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 SIDE_SHEET_DATA = new InjectionToken('MD3_SIDE_SHEET_DATA');
 const SIDE_SHEET_CONFIG = new InjectionToken('MD3_SIDE_SHEET_CONFIG');
 const SIDE_SHEET_COMPONENT = new InjectionToken('MD3_SIDE_SHEET_COMPONENT');
@@ -753,13 +1841,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class Scaffold {
     startOutlet = viewChild('startOutlet', { ...(ngDevMode ? { debugName: "startOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
     endOutlet = viewChild('endOutlet', { ...(ngDevMode ? { debugName: "endOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
+    bottomOutlet = viewChild('bottomOutlet', { ...(ngDevMode ? { debugName: "bottomOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
     panesContainer = viewChild('panesContainer', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panesContainer" }] : /* istanbul ignore next */ []));
     sheets = inject(SheetsService);
+    bottomSheets = inject(BottomSheetService);
     layout = inject(LayoutService);
     ngAfterViewInit() {
         const startOutlet = this.startOutlet();
         const endOutlet = this.endOutlet();
+        const bottomOutlet = this.bottomOutlet();
         const panesContainer = this.panesContainer();
         if (startOutlet) {
             this.sheets.registerSideSheetOutlet('start', startOutlet);
@@ -767,6 +1858,9 @@ class Scaffold {
         if (endOutlet) {
             this.sheets.registerSideSheetOutlet('end', endOutlet);
         }
+        if (bottomOutlet) {
+            this.bottomSheets.registerBottomSheetOutlet(bottomOutlet);
+        }
         if (panesContainer) {
             this.layout.registerPanesContainer(panesContainer.nativeElement);
         }
@@ -774,23 +1868,27 @@ class Scaffold {
     ngOnDestroy() {
         const startOutlet = this.startOutlet();
         const endOutlet = this.endOutlet();
+        const bottomOutlet = this.bottomOutlet();
         if (startOutlet) {
             this.sheets.unregisterSideSheetOutlet('start', startOutlet);
         }
         if (endOutlet) {
             this.sheets.unregisterSideSheetOutlet('end', endOutlet);
         }
+        if (bottomOutlet) {
+            this.bottomSheets.unregisterBottomSheetOutlet(bottomOutlet);
+        }
         this.layout.unregisterPanesContainer();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Scaffold, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Scaffold, isStandalone: true, selector: "md3-scaffold", viewQueries: [{ propertyName: "startOutlet", first: true, predicate: ["startOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "endOutlet", first: true, predicate: ["endOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "panesContainer", first: true, predicate: ["panesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n<ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>", styles: [":host{display:grid;width:100%;height:100dvh;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto}:host ::ng-deep [md3-scaffold-bar=top]{grid-area:top;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar=bottom]{grid-area:bottom;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}: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: Scaffold, isStandalone: true, selector: "md3-scaffold", viewQueries: [{ propertyName: "startOutlet", first: true, predicate: ["startOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "endOutlet", first: true, predicate: ["endOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "bottomOutlet", first: true, predicate: ["bottomOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "panesContainer", first: true, predicate: ["panesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<!-- Standard bottom sheets dock here, between the content and the bottom bar. The region\n     measures zero until one opens, so it reserves nothing the rest of the time. -->\n<div class=\"md3-bottom-sheet-region\">\n    <ng-template #bottomOutlet cdkPortalOutlet></ng-template>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n<ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>", styles: [":host{display:grid;width:100%;height:100dvh;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host ::ng-deep [md3-scaffold-bar=top]{grid-area:top;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar=bottom]{grid-area:bottom;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}: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: Scaffold, decorators: [{
             type: Component,
             args: [{ selector: 'md3-scaffold', imports: [
                         CdkPortalOutlet,
-                    ], template: "<ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n<ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>", styles: [":host{display:grid;width:100%;height:100dvh;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto}:host ::ng-deep [md3-scaffold-bar=top]{grid-area:top;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar=bottom]{grid-area:bottom;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
-        }], propDecorators: { startOutlet: [{ type: i0.ViewChild, args: ['startOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], endOutlet: [{ type: i0.ViewChild, args: ['endOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], panesContainer: [{ type: i0.ViewChild, args: ['panesContainer', { isSignal: true }] }] } });
+                    ], template: "<ng-content select=\"[md3-scaffold-bar=top]\"></ng-content>\n<ng-content select=\"[md3-scaffold-rail=leading]\"></ng-content>\n\n<div class=\"md3-panes-container\" #panesContainer>\n    <div class=\"md3-pane md3-pane-start\">\n        <ng-content select=\"[md3-scaffold-pane=start]\"></ng-content>\n        <ng-template #startOutlet cdkPortalOutlet></ng-template>\n    </div>\n    <div class=\"md3-pane md3-pane-main\">\n        <ng-content select=\"[md3-scaffold-pane=main]\"></ng-content>\n    </div>\n    <div class=\"md3-pane md3-pane-end\">\n        <ng-content select=\"[md3-scaffold-pane=end]\"></ng-content>\n        <ng-template #endOutlet cdkPortalOutlet></ng-template>\n    </div>\n</div>\n\n<!-- Standard bottom sheets dock here, between the content and the bottom bar. The region\n     measures zero until one opens, so it reserves nothing the rest of the time. -->\n<div class=\"md3-bottom-sheet-region\">\n    <ng-template #bottomOutlet cdkPortalOutlet></ng-template>\n</div>\n\n<ng-content select=\"[md3-scaffold-rail=trailing]\"></ng-content>\n<ng-content select=\"[md3-scaffold-bar=bottom]\"></ng-content>", styles: [":host{display:grid;width:100%;height:100dvh;min-height:0em;overflow:hidden;grid-template-areas:\"top top top\" \"start content end\" \"start sheet end\" \"bottom bottom bottom\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}:host ::ng-deep [md3-scaffold-bar=top]{grid-area:top;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}:host ::ng-deep [md3-scaffold-rail=leading]{grid-area:start;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-rail=trailing]{grid-area:end;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:3}:host ::ng-deep [md3-scaffold-bar=bottom]{grid-area:bottom;justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;overflow:hidden;z-index:2}:host .md3-bottom-sheet-region{grid-area:sheet;justify-self:stretch;min-width:0em;height:0em;position:relative;overflow:visible;z-index:4}:host .md3-panes-container{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));grid-area:content;min-width:0em;min-height:0em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);display:grid;grid-template-areas:\"start main end\";grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr)}:host .md3-panes-container .md3-pane{justify-self:stretch;align-self:stretch;min-width:0em;min-height:0em;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}:host .md3-panes-container .md3-pane.md3-pane-end{grid-area:end}\n"] }]
+        }], propDecorators: { startOutlet: [{ type: i0.ViewChild, args: ['startOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], endOutlet: [{ type: i0.ViewChild, args: ['endOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], bottomOutlet: [{ type: i0.ViewChild, args: ['bottomOutlet', { ...{ read: CdkPortalOutlet }, isSignal: true }] }], panesContainer: [{ type: i0.ViewChild, args: ['panesContainer', { isSignal: true }] }] } });
 
 class ScaffoldBar {
     region = input.required({ ...(ngDevMode ? { debugName: "region" } : /* istanbul ignore next */ {}), alias: 'md3-scaffold-bar' });
@@ -5970,5 +7068,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, ModalBottomSheetRef, 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, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
 //# sourceMappingURL=almoamendev-ngx-md3.mjs.map