@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-drawer.mjs

@@ -0,0 +1,814 @@
+import * as i0 from '@angular/core';
+import { signal, computed, effect, Injectable, Directive, inject, ElementRef, DestroyRef, NgZone, input, output, contentChild, viewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvOverlayHostBase, MlvOverlayRef, MlvOverlayServiceBase } from '@malva-ui/cdk/overlay';
+import { MLV_DRAWER_I18N } from '@malva-ui/i18n';
+import { sortBy, cloneDeep } from 'lodash-es';
+import { MlvStructural, MlvRtlService, mlvNextId } from '@malva-ui/cdk/utils';
+import { fromEvent, switchMap, takeUntil, tap } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
+import { LEFT_ARROW, DOWN_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import { MlvPopupContent, MlvPopupTrigger, MlvPopup } from '@malva-ui/core/popup';
+import { MlvButton, MlvButtonIcon } from '@malva-ui/core/button';
+import { MlvList, MlvListItem } from '@malva-ui/core/list';
+import { LucideChevronDown } from '@lucide/angular';
+import { MlvClick } from '@malva-ui/cdk/accessibility';
+
+class MlvDrawerSectionsService {
+    sections = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    intersectedSections = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "intersectedSections" }] : /* istanbul ignore next */ []));
+    currentScrolledSection = computed(() => {
+        const bestFit = sortBy(Object.values(this.intersectedSections()), [
+            'threshold',
+        ]).reverse()[0];
+        return bestFit ? this.sections().get(bestFit.id) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentScrolledSection" }] : /* istanbul ignore next */ []));
+    normalizedSections = computed(() => {
+        const sections = Array.from(this.sections().values());
+        return sections;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedSections" }] : /* istanbul ignore next */ []));
+    _observer = null;
+    constructor() {
+        effect(() => {
+            // We need to track it here to make sure that the observers are re-initialized when the sections change, otherwise the intersection observer won't be able to track the new sections.
+            this.normalizedSections();
+            this.initObservers();
+        });
+    }
+    /**
+     * Registers a section so it appears in `normalizedSections` and is observed
+     * for scroll position.
+     *
+     * A **new** `Map` is stored rather than the existing one being mutated:
+     * signals compare with `Object.is`, so returning the same reference from
+     * `update()` is not a change and neither `normalizedSections` nor the
+     * observer effect would ever see the section.
+     */
+    register(section) {
+        this.sections.update((sections) => new Map(sections).set(section.id(), section));
+    }
+    /** Removes a section from tracking. See {@link register} for why the map is copied. */
+    unregister(section) {
+        this.sections.update((sections) => {
+            const next = new Map(sections);
+            next.delete(section.id());
+            return next;
+        });
+    }
+    destroyObservers() {
+        this._observer?.disconnect();
+        this._observer = null;
+        this.intersectedSections.set({});
+    }
+    initObservers() {
+        this.destroyObservers();
+        this._observer = new IntersectionObserver((entries) => {
+            const shallowIntersectedSections = cloneDeep(this.intersectedSections() || {});
+            entries.forEach((entry) => {
+                shallowIntersectedSections[entry.target.id] = {
+                    intersecting: entry.isIntersecting,
+                    threshold: entry.intersectionRatio,
+                    id: entry.target.id,
+                };
+            });
+            this.intersectedSections.set(shallowIntersectedSections);
+        }, {
+            threshold: [0, 0.25, 0.5, 0.75, 1],
+        });
+        this.normalizedSections().forEach((section) => {
+            this._observer?.observe(section.elementRef.nativeElement);
+        });
+    }
+    ngOnDestroy() {
+        this.sections().clear();
+        this.destroyObservers();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerSectionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerSectionsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerSectionsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class MlvDrawerContent extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerContent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvDrawerContent, isStandalone: true, selector: "[mlvDrawerContent]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvDrawerContent]',
+                }]
+        }] });
+
+/** Velocity threshold (px/s) for swipe-to-dismiss. */
+const DISMISS_VELOCITY_THRESHOLD = 500;
+/** Step size as a fraction of viewport size for keyboard resize. */
+const KEYBOARD_STEP_FRACTION = 0.1;
+/**
+ * Internal directive that powers drag-to-resize on `mlv-drawer__handle`.
+ * Applied by `MlvDrawer` when `resizable=true`; not intended for
+ * direct external use.
+ *
+ * @internal
+ */
+class MlvDrawerResize {
+    /** @private Host element ref — the drawer resize handle. */
+    _el = inject((ElementRef));
+    /** @private DestroyRef used for observable and listener cleanup. */
+    _destroyRef = inject(DestroyRef);
+    /** @private NgZone used to re-enter Angular after out-of-zone pointer handling. */
+    _zone = inject(NgZone);
+    /** @private Normalizes horizontal resize arrows for RTL layouts. */
+    _rtlService = inject(MlvRtlService);
+    /**
+     * Drawer edge position — determines drag axis and dismiss direction.
+     */
+    position = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Sorted snap point percentages (0–100). Empty means free resize with no
+     * snapping. The handle snaps to the nearest point after drag ends.
+     */
+    snapPoints = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when the user swipes past the velocity dismiss threshold or
+     * navigates the handle to zero size via keyboard.
+     */
+    dismissed = output();
+    /** @protected Current panel size as an integer percentage, exposed for ARIA aria-valuenow. */
+    _currentPercent = 100;
+    /** @private Last pointer position (px) sampled for velocity tracking. */
+    _lastPos = 0;
+    /** @private Timestamp of the last pointer sample for velocity tracking. */
+    _lastTime = 0;
+    /** @private Current drag velocity (px/s) used for swipe-to-dismiss. */
+    _velocity = 0;
+    constructor() {
+        const handle = this._el.nativeElement;
+        fromEvent(handle, 'pointerdown')
+            .pipe(takeUntilDestroyed(this._destroyRef), filter((e) => e.button === 0), switchMap((startEvent) => {
+            startEvent.preventDefault();
+            handle.setPointerCapture(startEvent.pointerId);
+            const panel = this._getPanelElement();
+            if (!panel)
+                return [];
+            const pos = this.position();
+            const isVertical = pos === 'bottom' || pos === 'top';
+            const viewportSize = isVertical
+                ? window.innerHeight
+                : window.innerWidth;
+            const rect = panel.getBoundingClientRect();
+            const startPanelSize = isVertical ? rect.height : rect.width;
+            const startPointerPos = isVertical
+                ? startEvent.clientY
+                : startEvent.clientX;
+            this._lastPos = startPointerPos;
+            this._lastTime = performance.now();
+            this._velocity = 0;
+            // Remove snap transition during drag for direct tracking
+            panel.classList.add('mlv-drawer--dragging');
+            return fromEvent(handle, 'pointermove').pipe(takeUntil(fromEvent(handle, 'pointerup').pipe(tap(() => {
+                panel.classList.remove('mlv-drawer--dragging');
+                this._zone.run(() => this._onPointerUp(panel, pos, isVertical, viewportSize));
+            }))), tap((moveEvent) => {
+                const currentPos = isVertical
+                    ? moveEvent.clientY
+                    : moveEvent.clientX;
+                const now = performance.now();
+                const dt = now - this._lastTime;
+                if (dt > 0) {
+                    this._velocity = (currentPos - this._lastPos) / (dt / 1000);
+                }
+                this._lastPos = currentPos;
+                this._lastTime = now;
+                const delta = currentPos - startPointerPos;
+                // For bottom/right drawers: moving pointer toward viewport edge (positive delta)
+                // means dragging the panel closed, so size decreases.
+                let newSize = pos === 'bottom' || pos === 'right'
+                    ? startPanelSize - delta
+                    : startPanelSize + delta;
+                newSize = Math.max(0, Math.min(viewportSize, newSize));
+                this._updatePanelSize(panel, newSize, viewportSize);
+            }));
+        }))
+            .subscribe();
+    }
+    /**
+     * @private Gets the drawer panel element — the direct parent of the handle.
+     */
+    _getPanelElement() {
+        return this._el.nativeElement.parentElement;
+    }
+    /**
+     * @private Applies snap logic (or dismiss) after pointer is released.
+     */
+    _onPointerUp(panel, pos, isVertical, viewportSize) {
+        // Determine effective dismiss velocity: positive means "closing direction"
+        const dismissVelocity = pos === 'bottom'
+            ? this._velocity
+            : pos === 'top'
+                ? -this._velocity
+                : pos === 'right'
+                    ? this._velocity
+                    : -this._velocity;
+        if (dismissVelocity > DISMISS_VELOCITY_THRESHOLD) {
+            this.dismissed.emit();
+            return;
+        }
+        const snapPoints = this.snapPoints();
+        if (snapPoints.length === 0)
+            return;
+        const currentSizePx = isVertical
+            ? panel.getBoundingClientRect().height
+            : panel.getBoundingClientRect().width;
+        const currentPercent = (currentSizePx / viewportSize) * 100;
+        // Find nearest snap point by absolute distance
+        let nearestSnap = snapPoints[0];
+        let minDist = Math.abs(currentPercent - snapPoints[0]);
+        for (const sp of snapPoints) {
+            const dist = Math.abs(currentPercent - sp);
+            if (dist < minDist) {
+                minDist = dist;
+                nearestSnap = sp;
+            }
+        }
+        if (nearestSnap === 0) {
+            this.dismissed.emit();
+            return;
+        }
+        // Animate panel to snap target
+        panel.classList.add('mlv-drawer--snapping');
+        const snapSizePx = (viewportSize * nearestSnap) / 100;
+        this._updatePanelSize(panel, snapSizePx, viewportSize);
+        this._currentPercent = nearestSnap;
+        const onTransitionEnd = () => {
+            panel.classList.remove('mlv-drawer--snapping');
+            panel.removeEventListener('transitionend', onTransitionEnd);
+        };
+        panel.addEventListener('transitionend', onTransitionEnd);
+    }
+    /**
+     * @private Sets the `--mlv-drawer-current-size` CSS variable on the panel
+     * element and updates the ARIA value.
+     */
+    _updatePanelSize(panel, size, viewportSize) {
+        panel.style.setProperty('--mlv-drawer-current-size', `${size}px`);
+        this._currentPercent = Math.round((size / viewportSize) * 100);
+    }
+    /**
+     * @protected Handles keyboard interaction on the resize handle.
+     *
+     * Arrow Up / Right — increase by 10% of viewport
+     * Arrow Down / Left — decrease by 10% (or dismiss if size would reach zero)
+     * Home — snap to smallest snap point (or dismiss if zero)
+     * End — snap to largest snap point (or full viewport)
+     * Escape — dismiss
+     */
+    _onKeydown(event) {
+        const pos = this.position();
+        const isVertical = pos === 'bottom' || pos === 'top';
+        const panel = this._getPanelElement();
+        if (!panel)
+            return;
+        const viewportSize = isVertical ? window.innerHeight : window.innerWidth;
+        const currentSizePx = isVertical
+            ? panel.getBoundingClientRect().height
+            : panel.getBoundingClientRect().width;
+        const stepPx = viewportSize * KEYBOARD_STEP_FRACTION;
+        const snapPoints = this.snapPoints();
+        let newSize = null;
+        switch (this._rtlService.normalizeArrowKey(event) ?? event.key) {
+            case UP_ARROW:
+            case RIGHT_ARROW:
+                newSize = currentSizePx + stepPx;
+                break;
+            case DOWN_ARROW:
+            case LEFT_ARROW:
+                newSize = currentSizePx - stepPx;
+                if (newSize <= 0) {
+                    event.preventDefault();
+                    this.dismissed.emit();
+                    return;
+                }
+                break;
+            case 'Home':
+                if (snapPoints.length > 0) {
+                    newSize = (viewportSize * snapPoints[0]) / 100;
+                    if (newSize <= 0) {
+                        event.preventDefault();
+                        this.dismissed.emit();
+                        return;
+                    }
+                }
+                break;
+            case 'End':
+                newSize =
+                    snapPoints.length > 0
+                        ? (viewportSize * snapPoints[snapPoints.length - 1]) / 100
+                        : viewportSize;
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.dismissed.emit();
+                return;
+            default:
+                return;
+        }
+        if (newSize !== null) {
+            event.preventDefault();
+            newSize = Math.max(0, Math.min(viewportSize, newSize));
+            this._updatePanelSize(panel, newSize, viewportSize);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerResize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvDrawerResize, isStandalone: true, selector: "[mlvDrawerResize]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, snapPoints: { classPropertyName: "snapPoints", publicName: "snapPoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { attributes: { "role": "separator", "tabindex": "0", "aria-label": "Resize panel" }, listeners: { "keydown": "_onKeydown($event)" }, properties: { "attr.aria-valuenow": "_currentPercent", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerResize, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvDrawerResize]',
+                    host: {
+                        role: 'separator',
+                        tabindex: '0',
+                        'aria-label': 'Resize panel',
+                        '[attr.aria-valuenow]': '_currentPercent',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '(keydown)': '_onKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], snapPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapPoints", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
+const HIDDEN_TRANSFORMS$1 = {
+    left: 'translateX(-100%)',
+    right: 'translateX(100%)',
+    top: 'translateY(-100%)',
+    bottom: 'translateY(100%)',
+};
+class MlvDrawer extends MlvOverlayHostBase {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_DRAWER_I18N);
+    /** @protected Base CSS class of the drawer backdrop. */
+    _backdropClass = 'mlv-drawer-backdrop';
+    /** Which edge of the viewport the drawer slides from. */
+    position = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the drawer dialog surface. Used as the `aria-label`
+     * when no `ariaLabelledBy` is provided. When both are omitted, the drawer
+     * falls back to the localized default ("Drawer") so the `role="dialog"`
+     * is never left without an accessible name.
+     */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Id of a visible element (typically a projected `[mlvDrawerHeader]`) that
+     * labels the drawer. When set, it takes precedence over `ariaLabel` and the
+     * i18n fallback via `aria-labelledby` — mirroring how `mlv-dialog` labels
+     * itself by its projected header.
+     */
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Resolved `aria-label` for the dialog surface: the explicit
+     * `ariaLabel` input, or the localized fallback. Suppressed (null) when
+     * `ariaLabelledBy` is set so the two naming methods never conflict.
+     */
+    _resolvedAriaLabel = computed(() => this.ariaLabelledBy() ? null : (this.ariaLabel() ?? this._i18n().drawer), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS width (left/right drawers) or height (top/bottom drawers) of the panel.
+     * Used as the initial size when `resizable` is false or no `defaultSnap` is set.
+     */
+    size = input('300px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, renders a drag handle on the inward-facing edge.
+     * Enables drag-to-resize and swipe-to-dismiss.
+     */
+    resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Sorted array of viewport-percentage snap points (0–100).
+     * After drag ends, the panel animates to the nearest snap point.
+     * If empty, the panel stays at its released position.
+     * Only effective when `resizable` is true.
+     */
+    snapPoints = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+    /**
+     * Initial snap point percentage (0–100) applied when the drawer opens.
+     * Defaults to 100 (full size). Only used when `resizable` is true.
+     */
+    defaultSnap = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultSnap" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS min-size floor applied during drag resize.
+     * Only used when `resizable` is true.
+     */
+    minSize = input('0px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS max-size ceiling for the panel's sizing axis (width for `left`/`right`,
+     * height for `top`/`bottom`).
+     *
+     * Honoured whether or not the drawer is `resizable` — a fixed `size` is
+     * clamped by it too. The resolved ceiling is always additionally clamped to
+     * the viewport (`100dvw`/`100dvh`), so a `size="36rem"` drawer can never be
+     * wider than a 375 px phone.
+     */
+    maxSize = input('100%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    hiddenTransform = computed(() => HIDDEN_TRANSFORMS$1[this.position()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenTransform" }] : /* istanbul ignore next */ []));
+    /** @protected Projected drawer content directive, rendered into the overlay panel. */
+    contentRef = contentChild(MlvDrawerContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+    /** @protected The `#drawerTemplate` view template attached to the CDK overlay portal. */
+    drawerTemplate = viewChild('drawerTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawerTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Computes the initial panel size string.
+     * When resizable, uses `defaultSnap` as a dvh/dvw percentage;
+     * otherwise falls back to the `size` input.
+     */
+    _initialPanelSize = computed(() => {
+        if (!this.resizable())
+            return this.size();
+        const snap = this.defaultSnap();
+        const pos = this.position();
+        const isVertical = pos === 'bottom' || pos === 'top';
+        return isVertical ? `${snap}dvh` : `${snap}dvw`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_initialPanelSize" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Combines the configured `maxSize` with the viewport ceiling for
+     * the sizing axis.
+     *
+     * The viewport ceiling is unconditional: without it a fixed `size` larger
+     * than the screen (`size="36rem"` on a 375 px phone) renders a panel that
+     * hangs off the edge. `maxSize` is folded in through CSS `min()` so it is
+     * honoured on the non-resizable path too. The `'100%'` default is dropped
+     * rather than nested — it resolves against the overlay pane, which is itself
+     * sized by this panel, so it would add nothing but an indirection.
+     */
+    _resolveMaxSize(viewportCeiling) {
+        const maxSize = this.maxSize();
+        return !maxSize || maxSize === '100%'
+            ? viewportCeiling
+            : `min(${maxSize}, ${viewportCeiling})`;
+    }
+    /**
+     * Resolved inline geometry for the panel element: the sizing-axis `size`, the
+     * cross-axis viewport fill, and the max ceilings on both axes.
+     */
+    get drawerDimensions() {
+        const pos = this.position();
+        const size = this.resizable()
+            ? `var(--mlv-drawer-current-size, ${this._initialPanelSize()})`
+            : this._initialPanelSize();
+        if (pos === 'left' || pos === 'right') {
+            return {
+                width: size,
+                height: '100dvh',
+                maxWidth: this._resolveMaxSize('100dvw'),
+                maxHeight: '100dvh',
+            };
+        }
+        return {
+            height: size,
+            width: '100dvw',
+            maxHeight: this._resolveMaxSize('100dvh'),
+            maxWidth: '100dvw',
+        };
+    }
+    /** @protected Returns the drawer surface template to attach to the overlay. */
+    _getOverlayTemplate() {
+        return this.drawerTemplate();
+    }
+    /** @protected Anchors the drawer to the configured viewport edge. */
+    _buildPositionStrategy() {
+        const positionStrategy = this._overlay.position().global();
+        const pos = this.position();
+        if (pos === 'left')
+            positionStrategy.left('0').top('0');
+        else if (pos === 'right')
+            positionStrategy.right('0').top('0');
+        else if (pos === 'top')
+            positionStrategy.top('0').left('0');
+        else
+            positionStrategy.bottom('0').left('0');
+        return positionStrategy;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvDrawer, isStandalone: true, selector: "mlv-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, snapPoints: { classPropertyName: "snapPoints", publicName: "snapPoints", isSignal: true, isRequired: false, transformFunction: null }, defaultSnap: { classPropertyName: "defaultSnap", publicName: "defaultSnap", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, providers: [MlvDrawerSectionsService], queries: [{ propertyName: "contentRef", first: true, predicate: MlvDrawerContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "drawerTemplate", first: true, predicate: ["drawerTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #drawerTemplate>\n  <div class=\"mlv-drawer__backdrop\"></div>\n  <div\n    class=\"mlv-drawer\"\n    [class]=\"'mlv-drawer--' + position()\"\n    [class.mlv-drawer--enter]=\"animationState() === 'enter'\"\n    [class.mlv-drawer--leave]=\"animationState() === 'leave'\"\n    [class.mlv-drawer--resizable]=\"resizable()\"\n    [style.width]=\"drawerDimensions['width']\"\n    [style.height]=\"drawerDimensions['height']\"\n    [style.max-width]=\"drawerDimensions['maxWidth']\"\n    [style.max-height]=\"drawerDimensions['maxHeight']\"\n    [style.--mlv-drawer-hidden-transform]=\"hiddenTransform()\"\n    (animationend)=\"onAnimationEnd()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"false\"\n  >\n    @if (resizable()) {\n    <div\n      class=\"mlv-drawer__handle\"\n      mlvDrawerResize\n      [position]=\"position()\"\n      [snapPoints]=\"snapPoints()\"\n      (dismissed)=\"close()\"\n    >\n      <span class=\"mlv-drawer__handle-pill\" aria-hidden=\"true\"></span>\n    </div>\n    } @if (contentRef(); as contentTpl) {\n    <ng-template [ngTemplateOutlet]=\"contentTpl.templateRef\" />\n    }\n  </div>\n</ng-template>\n", styles: ["@layer mlv.components{.mlv-drawer{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-drawer *{box-sizing:border-box}.mlv-drawer{background-color:var(--mlv-elevation-bg-2);box-shadow:var(--mlv-shadow-overlay);color:var(--mlv-text-primary);will-change:transform;display:flex;flex-direction:column;max-inline-size:100dvw;max-block-size:100dvh}.mlv-drawer__spacer{flex-grow:1}.mlv-drawer__header{display:flex;align-items:center;padding:var(--mlv-padding-l);border-bottom:.0625rem solid var(--mlv-border-normal)}.mlv-drawer__body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}.mlv-drawer__body-scrollbar{flex:1 1 auto;min-width:0;min-height:0}.mlv-drawer__body-scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden;padding:var(--mlv-spacing-3) var(--mlv-spacing-6)}.mlv-drawer__footer{padding:var(--mlv-padding-l);flex-shrink:0;border-top:.0625rem solid var(--mlv-border-normal)}.mlv-drawer__handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none;min-height:3rem;min-width:3rem}.mlv-drawer__handle:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-drawer__handle-pill{display:block;width:2rem;height:.25rem;border-radius:var(--mlv-radius-xs);background-color:var(--mlv-border-normal);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default);pointer-events:none}.mlv-drawer__handle:hover .mlv-drawer__handle-pill,.mlv-drawer__handle:focus-visible .mlv-drawer__handle-pill{background-color:var(--mlv-text-tertiary)}.mlv-drawer--bottom .mlv-drawer__handle,.mlv-drawer--top .mlv-drawer__handle{cursor:ns-resize}.mlv-drawer--left .mlv-drawer__handle,.mlv-drawer--right .mlv-drawer__handle{cursor:ew-resize;min-height:unset;min-width:3rem;height:100%}.mlv-drawer--bottom .mlv-drawer__handle{order:-1}.mlv-drawer--top .mlv-drawer__handle{order:1}.mlv-drawer--right .mlv-drawer__handle{order:-1;flex-direction:column}.mlv-drawer--left .mlv-drawer__handle{order:1;flex-direction:column}.mlv-drawer--left .mlv-drawer__handle-pill,.mlv-drawer--right .mlv-drawer__handle-pill{width:.25rem;height:2rem}.mlv-drawer--dragging{transition:none!important;will-change:height,width}@media(prefers-reduced-motion:no-preference){.mlv-drawer--snapping{transition:height var(--mlv-drawer-snap-duration, var(--mlv-duration-slow)) var(--mlv-drawer-snap-easing, var(--mlv-ease-spring)),width var(--mlv-drawer-snap-duration, var(--mlv-duration-slow)) var(--mlv-drawer-snap-easing, var(--mlv-ease-spring))}}.mlv-drawer-backdrop{background-color:var(--mlv-background-overlay);opacity:1;-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem);transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),backdrop-filter var(--mlv-duration-normal) var(--mlv-ease-out-strong)}@starting-style{.mlv-drawer-backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.mlv-drawer-backdrop--leaving{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MlvDrawerResize, selector: "[mlvDrawerResize]", inputs: ["position", "snapPoints"], outputs: ["dismissed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-drawer', imports: [OverlayModule, A11yModule, NgTemplateOutlet, MlvDrawerResize], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MlvDrawerSectionsService], template: "<ng-template #drawerTemplate>\n  <div class=\"mlv-drawer__backdrop\"></div>\n  <div\n    class=\"mlv-drawer\"\n    [class]=\"'mlv-drawer--' + position()\"\n    [class.mlv-drawer--enter]=\"animationState() === 'enter'\"\n    [class.mlv-drawer--leave]=\"animationState() === 'leave'\"\n    [class.mlv-drawer--resizable]=\"resizable()\"\n    [style.width]=\"drawerDimensions['width']\"\n    [style.height]=\"drawerDimensions['height']\"\n    [style.max-width]=\"drawerDimensions['maxWidth']\"\n    [style.max-height]=\"drawerDimensions['maxHeight']\"\n    [style.--mlv-drawer-hidden-transform]=\"hiddenTransform()\"\n    (animationend)=\"onAnimationEnd()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"false\"\n  >\n    @if (resizable()) {\n    <div\n      class=\"mlv-drawer__handle\"\n      mlvDrawerResize\n      [position]=\"position()\"\n      [snapPoints]=\"snapPoints()\"\n      (dismissed)=\"close()\"\n    >\n      <span class=\"mlv-drawer__handle-pill\" aria-hidden=\"true\"></span>\n    </div>\n    } @if (contentRef(); as contentTpl) {\n    <ng-template [ngTemplateOutlet]=\"contentTpl.templateRef\" />\n    }\n  </div>\n</ng-template>\n", styles: ["@layer mlv.components{.mlv-drawer{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-drawer *{box-sizing:border-box}.mlv-drawer{background-color:var(--mlv-elevation-bg-2);box-shadow:var(--mlv-shadow-overlay);color:var(--mlv-text-primary);will-change:transform;display:flex;flex-direction:column;max-inline-size:100dvw;max-block-size:100dvh}.mlv-drawer__spacer{flex-grow:1}.mlv-drawer__header{display:flex;align-items:center;padding:var(--mlv-padding-l);border-bottom:.0625rem solid var(--mlv-border-normal)}.mlv-drawer__body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}.mlv-drawer__body-scrollbar{flex:1 1 auto;min-width:0;min-height:0}.mlv-drawer__body-scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden;padding:var(--mlv-spacing-3) var(--mlv-spacing-6)}.mlv-drawer__footer{padding:var(--mlv-padding-l);flex-shrink:0;border-top:.0625rem solid var(--mlv-border-normal)}.mlv-drawer__handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none;min-height:3rem;min-width:3rem}.mlv-drawer__handle:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-drawer__handle-pill{display:block;width:2rem;height:.25rem;border-radius:var(--mlv-radius-xs);background-color:var(--mlv-border-normal);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default);pointer-events:none}.mlv-drawer__handle:hover .mlv-drawer__handle-pill,.mlv-drawer__handle:focus-visible .mlv-drawer__handle-pill{background-color:var(--mlv-text-tertiary)}.mlv-drawer--bottom .mlv-drawer__handle,.mlv-drawer--top .mlv-drawer__handle{cursor:ns-resize}.mlv-drawer--left .mlv-drawer__handle,.mlv-drawer--right .mlv-drawer__handle{cursor:ew-resize;min-height:unset;min-width:3rem;height:100%}.mlv-drawer--bottom .mlv-drawer__handle{order:-1}.mlv-drawer--top .mlv-drawer__handle{order:1}.mlv-drawer--right .mlv-drawer__handle{order:-1;flex-direction:column}.mlv-drawer--left .mlv-drawer__handle{order:1;flex-direction:column}.mlv-drawer--left .mlv-drawer__handle-pill,.mlv-drawer--right .mlv-drawer__handle-pill{width:.25rem;height:2rem}.mlv-drawer--dragging{transition:none!important;will-change:height,width}@media(prefers-reduced-motion:no-preference){.mlv-drawer--snapping{transition:height var(--mlv-drawer-snap-duration, var(--mlv-duration-slow)) var(--mlv-drawer-snap-easing, var(--mlv-ease-spring)),width var(--mlv-drawer-snap-duration, var(--mlv-duration-slow)) var(--mlv-drawer-snap-easing, var(--mlv-ease-spring))}}.mlv-drawer-backdrop{background-color:var(--mlv-background-overlay);opacity:1;-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem);transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),backdrop-filter var(--mlv-duration-normal) var(--mlv-ease-out-strong)}@starting-style{.mlv-drawer-backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.mlv-drawer-backdrop--leaving{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}\n"] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], snapPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapPoints", required: false }] }], defaultSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSnap", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], contentRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvDrawerContent), { isSignal: true }] }], drawerTemplate: [{ type: i0.ViewChild, args: ['drawerTemplate', { isSignal: true }] }] } });
+
+class MlvDrawerHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvDrawerHeader, isStandalone: true, selector: "[mlvDrawerHeader]", host: { classAttribute: "mlv-drawer__header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvDrawerHeader]',
+                    host: { class: 'mlv-drawer__header' },
+                }]
+        }] });
+
+/** Scrollable body region used by declarative and service-opened drawers. */
+class MlvDrawerBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvDrawerBody, isStandalone: true, selector: "[mlvDrawerBody]", host: { classAttribute: "mlv-drawer__body" }, ngImport: i0, template: `
+    <mlv-scrollbar class="mlv-drawer__body-scrollbar">
+      <ng-content />
+    </mlv-scrollbar>
+  `, isInline: true, dependencies: [{ kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerBody, decorators: [{
+            type: Component,
+            args: [{
+                    // Attribute-selector component intentionally enhances the consumer's body container.
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[mlvDrawerBody]',
+                    template: `
+    <mlv-scrollbar class="mlv-drawer__body-scrollbar">
+      <ng-content />
+    </mlv-scrollbar>
+  `,
+                    imports: [MlvScrollbar],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'mlv-drawer__body' },
+                }]
+        }] });
+
+class MlvDrawerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvDrawerFooter, isStandalone: true, selector: "[mlvDrawerFooter]", host: { classAttribute: "mlv-drawer__footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvDrawerFooter]',
+                    host: { class: 'mlv-drawer__footer' },
+                }]
+        }] });
+
+/**
+ * Reference to an imperatively opened drawer; exposes `close()`, `afterClosed()`,
+ * and `beforeClose()`.
+ *
+ * Thin subclass of {@link MlvOverlayRef} that supplies the drawer surface's
+ * leave-animation class names and fallback duration; all close/afterClosed/
+ * beforeClose logic is inherited.
+ *
+ * @typeParam R - The result type emitted by `afterClosed()`. Defaults to `unknown`.
+ */
+class MlvDrawerRef extends MlvOverlayRef {
+    _position;
+    _animationDuration;
+    /** @protected Backdrop leave-animation class for drawers. */
+    _backdropLeavingClass = 'mlv-drawer-backdrop--leaving';
+    /** @protected Panel leave-animation class for drawers. */
+    _panelLeaveClass = 'mlv-drawer--leave';
+    /** @protected Fallback close-animation duration (ms) for drawers. */
+    _leaveFallbackMs = 350;
+    constructor(overlayRef, 
+    /** @private The edge the drawer slides from. */
+    _position = 'right', 
+    /** @private Configured close-animation duration in milliseconds. */
+    _animationDuration = 300) {
+        super(overlayRef);
+        this._position = _position;
+        this._animationDuration = _animationDuration;
+    }
+}
+
+const DRAWER_DATA = new InjectionToken('DRAWER_DATA');
+const HIDDEN_TRANSFORMS = {
+    left: 'translateX(-100%)',
+    right: 'translateX(100%)',
+    top: 'translateY(-100%)',
+    bottom: 'translateY(100%)',
+};
+class MlvDrawerService extends MlvOverlayServiceBase {
+    /** @protected Panel enter-animation class for drawers. */
+    _enterAnimationClass = 'mlv-drawer--enter';
+    /** @protected Anchors the drawer to the configured viewport edge. */
+    _buildPositionStrategy(config) {
+        const position = config.position ?? 'right';
+        const positionStrategy = this._overlay.position().global();
+        if (position === 'left')
+            positionStrategy.left('0').top('0');
+        else if (position === 'right')
+            positionStrategy.right('0').top('0');
+        else if (position === 'top')
+            positionStrategy.top('0').left('0');
+        else
+            positionStrategy.bottom('0').left('0');
+        return positionStrategy;
+    }
+    /** @protected Drawer backdrop class. */
+    _buildOverlayConfig() {
+        return { backdropClass: 'mlv-drawer-backdrop' };
+    }
+    /** @protected Creates the drawer reference, forwarding position and animation duration. */
+    _createRef(overlayRef, config) {
+        const position = config.position ?? 'right';
+        const animationDuration = config.animationDuration ?? 300;
+        return new MlvDrawerRef(overlayRef, position, animationDuration);
+    }
+    /** @protected Provides `MlvDrawerRef` and `DRAWER_DATA` to the opened component. */
+    _createProviders(ref, config) {
+        return [
+            { provide: MlvDrawerRef, useValue: ref },
+            { provide: DRAWER_DATA, useValue: config.data },
+        ];
+    }
+    /** @protected Applies drawer shell classes, hidden-transform var, and panel sizing to the overlay pane. */
+    _decoratePanel(panelEl, config) {
+        const position = config.position ?? 'right';
+        const size = config.size ?? '300px';
+        const isHorizontal = position === 'left' || position === 'right';
+        panelEl.classList.add('mlv-drawer', `mlv-drawer--${position}`);
+        panelEl.style.setProperty('--mlv-drawer-hidden-transform', HIDDEN_TRANSFORMS[position]);
+        if (isHorizontal) {
+            panelEl.style.width = size;
+            panelEl.style.height = '100dvh';
+            panelEl.style.maxWidth = this._resolveMaxSize(config.maxSize, '100dvw');
+            panelEl.style.maxHeight = '100dvh';
+        }
+        else {
+            panelEl.style.height = size;
+            panelEl.style.width = '100dvw';
+            panelEl.style.maxHeight = this._resolveMaxSize(config.maxSize, '100dvh');
+            panelEl.style.maxWidth = '100dvw';
+        }
+    }
+    /**
+     * @private Combines a configured `maxSize` with the viewport ceiling for the
+     * sizing axis.
+     *
+     * `drawer.scss` cannot help here — Angular injects a component's styles when
+     * that component is first instantiated, and `MlvDrawer` is never constructed
+     * on the service path — so the clamp has to be written onto the pane.
+     */
+    _resolveMaxSize(maxSize, viewportCeiling) {
+        return !maxSize || maxSize === '100%'
+            ? viewportCeiling
+            : `min(${maxSize}, ${viewportCeiling})`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MlvDrawerSection {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    id = input(mlvNextId('mlv-drawer-section'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    /** @private Scoped service tracking section registration and scroll-active state. */
+    _sectionService = inject(MlvDrawerSectionsService);
+    ngOnInit() {
+        this._sectionService.register(this);
+    }
+    ngOnDestroy() {
+        this._sectionService.unregister(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvDrawerSection, isStandalone: true, selector: "[mlvDrawerSection]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h5 class=\"mlv-drawer-section__heading\">{{ label() }}</h5>\n\n<div class=\"mlv-drawer-section__content\">\n  <ng-content />\n</div>\n", styles: ["@layer mlv.components{.mlv-drawer-section{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-drawer-section *{box-sizing:border-box}.mlv-drawer-section__heading{display:flex;align-items:center;justify-content:space-between;padding:var(--mlv-spacing-2) 0;border-bottom:.0625rem solid var(--mlv-border-normal);margin:0 0 var(--mlv-spacing-3);color:var(--mlv-text-primary)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerSection, decorators: [{
+            type: Component,
+            args: [{ selector: '[mlvDrawerSection]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 class=\"mlv-drawer-section__heading\">{{ label() }}</h5>\n\n<div class=\"mlv-drawer-section__content\">\n  <ng-content />\n</div>\n", styles: ["@layer mlv.components{.mlv-drawer-section{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-drawer-section *{box-sizing:border-box}.mlv-drawer-section__heading{display:flex;align-items:center;justify-content:space-between;padding:var(--mlv-spacing-2) 0;border-bottom:.0625rem solid var(--mlv-border-normal);margin:0 0 var(--mlv-spacing-3);color:var(--mlv-text-primary)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+class MlvDrawerSections {
+    /** @protected Service exposing the registered drawer sections and the currently scrolled section. */
+    sectionsService = inject(MlvDrawerSectionsService);
+    /** @protected Two-way open state of the section-navigation popup. */
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the navigator has anything to navigate between.
+     *
+     * A single registered section produced a "Meta ▾" menu whose only entry was
+     * the section already on screen, so the control is suppressed below two.
+     */
+    _hasMultipleSections = computed(() => this.sectionsService.normalizedSections().length > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasMultipleSections" }] : /* istanbul ignore next */ []));
+    /** @private Host used to scope body lookup to this drawer instance. */
+    _host = inject(ElementRef);
+    navigateToSection(section) {
+        const drawer = this._host.nativeElement.closest('.mlv-drawer');
+        this.scrollIntoViewWithScrollableContainer(drawer?.querySelector('.mlv-drawer__body'), section.nativeElement, 80);
+    }
+    scrollIntoViewWithScrollableContainer(baseElement, destinationElement, topMargin) {
+        if (baseElement && destinationElement) {
+            const baseScrollTop = baseElement.scrollTop;
+            const elementPosition = destinationElement.getBoundingClientRect().top -
+                baseElement.getBoundingClientRect().top;
+            const offsetPosition = elementPosition + baseScrollTop - (topMargin || 0);
+            baseElement.scrollTo({
+                top: offsetPosition,
+                behavior: 'smooth',
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerSections, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvDrawerSections, isStandalone: true, selector: "mlv-drawer-sections", ngImport: i0, template: "@if (_hasMultipleSections()) {\n<button\n  type=\"button\"\n  mlvButton\n  [mlvPopupTrigger]=\"popup\"\n  [ariaHasPopup]=\"'menu'\"\n  triggerOn=\"hover\"\n  mlvDensity=\"compact\"\n  variant=\"transparent\"\n>\n  {{ sectionsService.currentScrolledSection()?.label() }}\n  <svg lucideChevronDown mlvButtonIcon />\n</button>\n<mlv-popup #popup [(opened)]=\"isOpen\">\n  <ng-template mlvPopupContent>\n    <mlv-list style=\"min-width: 100px\" [listRole]=\"'menu'\" appearance=\"menu\">\n      @for (section of sectionsService.normalizedSections(); track section) {\n      <mlv-list-item\n        itemRole=\"menuitem\"\n        (mlvClick)=\"navigateToSection(section.elementRef)\"\n      >\n        {{ section.label() }}\n      </mlv-list-item>\n      }\n    </mlv-list>\n  </ng-template>\n</mlv-popup>\n}\n", dependencies: [{ kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "directive", type: MlvButtonIcon, selector: "[mlvButtonIcon]" }, { kind: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "component", type: MlvList, selector: "mlv-list", inputs: ["listRole", "variant", "appearance"] }, { kind: "component", type: MlvListItem, selector: "mlv-list-item", inputs: ["itemRole", "unread", "accent"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "directive", type: MlvClick, selector: "[mlvClick]", inputs: ["disabled", "hostRole"], outputs: ["mlvClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDrawerSections, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-drawer-sections', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        MlvPopupContent,
+                        MlvButton,
+                        MlvButtonIcon,
+                        MlvPopupTrigger,
+                        MlvPopup,
+                        MlvList,
+                        MlvListItem,
+                        LucideChevronDown,
+                        MlvClick,
+                    ], template: "@if (_hasMultipleSections()) {\n<button\n  type=\"button\"\n  mlvButton\n  [mlvPopupTrigger]=\"popup\"\n  [ariaHasPopup]=\"'menu'\"\n  triggerOn=\"hover\"\n  mlvDensity=\"compact\"\n  variant=\"transparent\"\n>\n  {{ sectionsService.currentScrolledSection()?.label() }}\n  <svg lucideChevronDown mlvButtonIcon />\n</button>\n<mlv-popup #popup [(opened)]=\"isOpen\">\n  <ng-template mlvPopupContent>\n    <mlv-list style=\"min-width: 100px\" [listRole]=\"'menu'\" appearance=\"menu\">\n      @for (section of sectionsService.normalizedSections(); track section) {\n      <mlv-list-item\n        itemRole=\"menuitem\"\n        (mlvClick)=\"navigateToSection(section.elementRef)\"\n      >\n        {{ section.label() }}\n      </mlv-list-item>\n      }\n    </mlv-list>\n  </ng-template>\n</mlv-popup>\n}\n" }]
+        }] });
+
+/**
+ * Generates a route configuration that opens a component inside a routed drawer.
+ * When the drawer closes, the router navigates back to the parent route.
+ *
+ * The component receives the shell's `Injector`, so it can inject `ActivatedRoute`
+ * to access route params, resolved data, and query params. It can also inject
+ * `MlvDrawerRef` to close itself programmatically.
+ *
+ * @param component - The component to render inside the drawer. Can be an eager class reference
+ *   or a lazy import function (e.g., `() => import('./my-drawer.component')`).
+ * @param options - Route path, named outlet, and drawer configuration options.
+ * @returns A `Route` object to include in your route configuration.
+ *
+ * @example
+ * ```ts
+ * // Lazy-loaded drawer route
+ * {
+ *   path: 'users',
+ *   component: UsersListPage,
+ *   children: [
+ *     mlvGenerateRoutableDrawerRoute(
+ *       () => import('./user-details.component'),
+ *       { path: ':id', position: 'right', size: '500px' },
+ *     ),
+ *   ],
+ * }
+ *
+ * // With guards and resolvers (spread the returned route)
+ * {
+ *   ...mlvGenerateRoutableDrawerRoute(() => import('./details'), { path: ':id' }),
+ *   canActivate: [authGuard],
+ *   resolve: { user: userResolver },
+ * }
+ * ```
+ */
+function mlvGenerateRoutableDrawerRoute(component, { path = '', outlet = '', ...drawerOptions } = {}) {
+    return {
+        path,
+        outlet: outlet || undefined,
+        loadComponent: () => import('./malva-ui-core-drawer-routable-drawer-qUk6Etnx.mjs'),
+        data: {
+            drawer: component,
+            drawerOptions,
+            backUrl: path
+                .split('/')
+                .map(() => '..')
+                .join('/'),
+            isLazy: path === '',
+        },
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DRAWER_DATA, MlvDrawerBody as DrawerBodyDirective, MlvDrawer, MlvDrawerBody, MlvDrawerContent, MlvDrawerFooter, MlvDrawerHeader, MlvDrawerRef, MlvDrawerSection, MlvDrawerSections, MlvDrawerSectionsService, MlvDrawerService, mlvGenerateRoutableDrawerRoute };
+//# sourceMappingURL=malva-ui-core-drawer.mjs.map