ngx-kit 6.3.0 → 7.0.0

package/fesm2022/ngx-kit-drawer-menu.mjs

@@ -1,193 +1,334 @@
 import * as i0 from '@angular/core';
-import { input, signal, model, computed, inject, DOCUMENT, DestroyRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
-import { DirectionService } from 'ngx-kit/shared';
+import { inject, ElementRef, Renderer2, DestroyRef, PLATFORM_ID, input, model, signal, computed, effect, afterNextRender, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+const DEFAULT_DRAWER_RESPONSIVE = {
+    mode: 'auto',
+    breakpoint: 960,
+    desktopOpen: true,
+    mobileOpen: false,
+    desktopBehavior: 'dock',
+    mobileBehavior: 'overlay',
+    respectPinned: true,
+};
 
-/**
- * Structural (not reference) equality for the `responsive` config.
- *
- * Consumers are expected to pass this as an inline object literal (see README),
- * which means the parent template creates a brand-new object on every change
- * detection run. Without this comparator, the `responsive` input signal sees a
- * "change" on every such run even when nothing actually changed, which re-triggers
- * the viewport-sync effect and forcibly resets `open` back to the configured
- * desktop/mobile default — silently overriding whatever the user just did by
- * dragging, clicking, or toggling the drawer.
- */
-function responsiveConfigsEqual(a, b) {
-    return (a === b ||
-        (a.mode === b.mode &&
-            a.breakpoint === b.breakpoint &&
-            a.desktopOpen === b.desktopOpen &&
-            a.mobileOpen === b.mobileOpen &&
-            a.desktopBehavior === b.desktopBehavior &&
-            a.mobileBehavior === b.mobileBehavior &&
-            a.respectPinned === b.respectPinned));
-}
 class NgxDrawerMenuComponent {
+    elementRef = inject((ElementRef));
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    // ---------------------------------------------------------------------------
+    // Inputs
+    // ---------------------------------------------------------------------------
     side = input('start', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    mode = input('overlay', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    /** When responsive mode is active, desktop/mobile can use different layout behavior. */
-    desktopBehavior = input('dock', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "desktopBehavior" }] : /* istanbul ignore next */ []));
-    mobileBehavior = input('overlay', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileBehavior" }] : /* istanbul ignore next */ []));
-    responsiveDesktopBehavior = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "responsiveDesktopBehavior" }] : /* istanbul ignore next */ []));
-    responsiveMobileBehavior = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "responsiveMobileBehavior" }] : /* istanbul ignore next */ []));
     effect = input('fabric', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effect" }] : /* istanbul ignore next */ []));
     width = input(300, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    maxWidth = input(420, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
-    edgeSize = input(34, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "edgeSize" }] : /* istanbul ignore next */ []));
-    dragThreshold = input(0.38, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
-    velocityThreshold = input(0.45, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "velocityThreshold" }] : /* istanbul ignore next */ []));
-    /** Opens/closes the panel from the edge and while the panel itself is dragged. */
-    swipeEnabled = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "swipeEnabled" }] : /* istanbul ignore next */ []));
-    /** Allows closing by clicking the backdrop. */
-    backdropClose = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "backdropClose" }] : /* istanbul ignore next */ []));
-    /** Allows Escape to close the drawer. */
-    escapeClose = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "escapeClose" }] : /* istanbul ignore next */ []));
-    /** The drawer starts open unless explicitly configured otherwise. */
-    open = model(true, /* @ts-ignore */
+    /**
+     * Main drawer state.
+     *
+     * Usage:
+     *
+     * [(open)]="sidebarOpen"
+     */
+    open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    /** Pinned drawers are intended for persistent desktop navigation. */
+    /**
+     * Pinned state.
+     *
+     * Useful for desktop layouts.
+     *
+     * [(pinned)]="sidebarPinned"
+     */
     pinned = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
-    /** Responsive behavior. Can be overridden with individual inputs below. */
-    responsive = input({
-        mode: 'auto',
-        breakpoint: 768,
-        desktopOpen: true,
-        mobileOpen: false,
-        respectPinned: true,
-        desktopBehavior: 'dock',
-        mobileBehavior: 'overlay',
-    }, /* @ts-ignore */
+    responsive = input(DEFAULT_DRAWER_RESPONSIVE, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
-    /** Convenience aliases for the common responsive configuration. */
-    respondToViewport = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "respondToViewport" }] : /* istanbul ignore next */ []));
-    mobileBreakpoint = input(768, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []));
-    openOnDesktop = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "openOnDesktop" }] : /* istanbul ignore next */ []));
-    openOnMobile = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "openOnMobile" }] : /* istanbul ignore next */ []));
-    /** Visual tuning. */
-    curtainStrips = input(9, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "curtainStrips" }] : /* istanbul ignore next */ []));
-    backdropOpacity = input(0.46, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "backdropOpacity" }] : /* istanbul ignore next */ []));
-    transitionMs = input(420, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "transitionMs" }] : /* istanbul ignore next */ []));
-    focusOnOpen = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "focusOnOpen" }] : /* istanbul ignore next */ []));
-    dragProgress = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dragProgress" }] : /* istanbul ignore next */ []));
-    dragVelocity = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dragVelocity" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether clicking backdrop closes drawer.
+     */
+    closeOnBackdrop = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether Escape closes drawer.
+     */
+    closeOnEscape = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether body scrolling should be locked
+     * while an overlay drawer is open.
+     */
+    lockBodyScroll = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lockBodyScroll" }] : /* istanbul ignore next */ []));
+    /**
+     * Animation duration in milliseconds.
+     */
+    animationDuration = input(280, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
+    /**
+     * z-index.
+     */
+    zIndex = input(1000, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    // ---------------------------------------------------------------------------
+    // Internal state
+    // ---------------------------------------------------------------------------
+    isBrowser = isPlatformBrowser(this.platformId);
     isMobile = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
-    effectiveBehavior = computed(() => {
-        if (!this.respondToViewport() || this.responsive().mode === 'off') {
-            return this.mode() === 'push' ? 'dock' : 'overlay';
+    initialized = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to avoid applying responsive defaults repeatedly.
+     */
+    previousResponsiveMode = null;
+    mediaQuery;
+    removeMediaQueryListener;
+    // ---------------------------------------------------------------------------
+    // Computed
+    // ---------------------------------------------------------------------------
+    responsiveConfig = computed(() => {
+        const config = this.responsive();
+        return {
+            ...DEFAULT_DRAWER_RESPONSIVE,
+            ...config,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "responsiveConfig" }] : /* istanbul ignore next */ []));
+    currentMode = computed(() => {
+        const config = this.responsiveConfig();
+        if (config.mode === 'desktop') {
+            return 'desktop';
         }
-        return this.isMobile()
-            ? (this.responsiveMobileBehavior() ?? this.mobileBehavior())
-            : (this.responsiveDesktopBehavior() ?? this.desktopBehavior());
+        if (config.mode === 'mobile') {
+            return 'mobile';
+        }
+        return this.isMobile() ? 'mobile' : 'desktop';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentMode" }] : /* istanbul ignore next */ []));
+    currentBehavior = computed(() => {
+        const config = this.responsiveConfig();
+        return this.currentMode() === 'mobile' ? config.mobileBehavior : config.desktopBehavior;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentBehavior" }] : /* istanbul ignore next */ []));
+    isOverlay = computed(() => {
+        return this.currentBehavior() === 'overlay';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
+    isDocked = computed(() => {
+        return this.currentBehavior() === 'dock';
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveBehavior" }] : /* istanbul ignore next */ []));
-    isDocked = computed(() => this.respondToViewport() ? this.effectiveBehavior() === 'dock' : this.mode() === 'push', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDocked" }] : /* istanbul ignore next */ []));
-    usesOverlay = computed(() => !this.isDocked(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "usesOverlay" }] : /* istanbul ignore next */ []));
-    isDragging = computed(() => this.dragProgress() !== null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
-    progress = computed(() => this.dragProgress() ?? (this.open() ? 1 : 0), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
-    isActuallyOpen = computed(() => this.progress() > 0.001, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isActuallyOpen" }] : /* istanbul ignore next */ []));
-    strips = computed(() => Array.from({ length: Math.max(3, this.curtainStrips()) }, (_, i) => i), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "strips" }] : /* istanbul ignore next */ []));
-    /** Physical side: true means the drawer is attached to the physical left edge. */
-    isPhysicalLeft = computed(() => {
-        const rtl = this.directionService.isRtl();
-        return this.side() === 'start' ? !rtl : rtl;
+    shouldShowBackdrop = computed(() => {
+        return this.isOverlay() && this.open();
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isPhysicalLeft" }] : /* istanbul ignore next */ []));
-    physicalSign = computed(() => (this.isPhysicalLeft() ? 1 : -1), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "physicalSign" }] : /* istanbul ignore next */ []));
-    effectiveMode = computed(() => {
-        if (!this.respondToViewport() || this.responsive().mode === 'off')
-            return this.mode();
-        return this.effectiveBehavior() === 'dock' ? 'push' : 'overlay';
+    ...(ngDevMode ? [{ debugName: "shouldShowBackdrop" }] : /* istanbul ignore next */ []));
+    drawerWidth = computed(() => {
+        const width = this.width();
+        if (typeof width === 'number') {
+            return `${width}px`;
+        }
+        return width;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
-    duration = computed(() => `${this.transitionMs()}ms`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
-    directionService = inject(DirectionService);
-    document = inject(DOCUMENT);
-    destroyRef = inject(DestroyRef);
-    pointerId = null;
-    dragStartX = 0;
-    dragStartProgress = 0;
-    dragLastX = 0;
-    dragLastTime = 0;
-    lastVelocity = 0;
-    activePointerTarget = null;
-    resizeObserver;
-    mediaQuery;
-    mediaQueryListener;
-    lastManagedViewportState = null;
+    ...(ngDevMode ? [{ debugName: "drawerWidth" }] : /* istanbul ignore next */ []));
+    drawerVisible = computed(() => {
+        return this.open();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawerVisible" }] : /* istanbul ignore next */ []));
+    shouldPreservePinned = computed(() => {
+        return this.responsiveConfig().respectPinned;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldPreservePinned" }] : /* istanbul ignore next */ []));
+    isPinnedAndDesktop = computed(() => {
+        return this.currentMode() === 'desktop' && this.pinned() && this.shouldPreservePinned();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPinnedAndDesktop" }] : /* istanbul ignore next */ []));
+    // ---------------------------------------------------------------------------
+    // Host bindings
+    // ---------------------------------------------------------------------------
+    get drawerStart() {
+        return this.side() === 'start';
+    }
+    get drawerEnd() {
+        return this.side() === 'end';
+    }
+    get drawerOpen() {
+        return this.open();
+    }
+    get drawerMobile() {
+        return this.currentMode() === 'mobile';
+    }
+    get drawerDesktop() {
+        return this.currentMode() === 'desktop';
+    }
+    get drawerOverlay() {
+        return this.isOverlay();
+    }
+    get drawerDock() {
+        return this.isDocked();
+    }
+    get hostWidth() {
+        return this.drawerWidth();
+    }
+    get hostDuration() {
+        return `${this.animationDuration()}ms`;
+    }
+    get hostZIndex() {
+        return this.zIndex();
+    }
+    get effectNone() {
+        return this.effect() === 'none';
+    }
+    get effectFabric() {
+        return this.effect() === 'fabric';
+    }
+    get effectSlide() {
+        return this.effect() === 'slide';
+    }
+    get effectPush() {
+        return this.effect() === 'push';
+    }
+    get effectScale() {
+        return this.effect() === 'scale';
+    }
+    // ---------------------------------------------------------------------------
+    // Constructor
+    // ---------------------------------------------------------------------------
     constructor() {
-        effect((onCleanup) => {
-            const locked = this.open() && this.effectiveMode() === 'overlay';
-            if (!locked)
+        this.setupResponsive();
+        effect(() => {
+            const mode = this.currentMode();
+            if (!this.initialized()) {
                 return;
-            const body = this.document.body;
-            const previous = body.style.overflow;
-            body.style.overflow = 'hidden';
-            onCleanup(() => (body.style.overflow = previous));
+            }
+            this.handleResponsiveModeChange(mode);
         });
         effect(() => {
-            const config = this.responsive();
-            const enabled = this.respondToViewport() && config.mode !== 'off';
-            const breakpoint = config.breakpoint ?? this.mobileBreakpoint();
-            const desktopOpen = config.desktopOpen ?? this.openOnDesktop();
-            const mobileOpen = config.mobileOpen ?? this.openOnMobile();
-            const desktopBehavior = config.desktopBehavior ?? this.desktopBehavior();
-            const mobileBehavior = config.mobileBehavior ?? this.mobileBehavior();
-            this.responsiveDesktopBehavior.set(desktopBehavior);
-            this.responsiveMobileBehavior.set(mobileBehavior);
-            this.setupViewportSync(enabled, breakpoint, desktopOpen, mobileOpen, config.respectPinned ?? true);
+            const shouldLock = this.lockBodyScroll();
+            const shouldLockNow = this.isOverlay() && this.open();
+            if (!shouldLock) {
+                return;
+            }
+            if (shouldLockNow) {
+                this.lockScroll();
+            }
+            else {
+                this.unlockScroll();
+            }
         });
         this.destroyRef.onDestroy(() => {
-            this.disposePointer();
-            this.disposeViewportSync();
+            this.destroyResponsive();
+            this.unlockScroll();
         });
     }
-    toggle() {
-        if (this.pinned() && this.open())
+    // ---------------------------------------------------------------------------
+    // Responsive
+    // ---------------------------------------------------------------------------
+    setupResponsive() {
+        if (!this.isBrowser) {
+            return;
+        }
+        afterNextRender(() => {
+            this.setupMediaQuery();
+            this.initialized.set(true);
+            const mode = this.currentMode();
+            this.previousResponsiveMode = mode;
+            this.applyInitialResponsiveState(mode);
+        });
+    }
+    setupMediaQuery() {
+        const config = this.responsiveConfig();
+        if (config.mode !== 'auto') {
+            this.isMobile.set(config.mode === 'mobile');
             return;
-        this.open.update((value) => !value);
+        }
+        const breakpoint = config.breakpoint;
+        this.mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 0.02}px)`);
+        this.updateMobileState();
+        const listener = () => {
+            this.updateMobileState();
+        };
+        this.mediaQuery.addEventListener('change', listener);
+        this.removeMediaQueryListener = () => {
+            this.mediaQuery?.removeEventListener('change', listener);
+        };
+    }
+    updateMobileState() {
+        if (!this.mediaQuery) {
+            return;
+        }
+        this.isMobile.set(this.mediaQuery.matches);
+    }
+    handleResponsiveModeChange(mode) {
+        if (this.previousResponsiveMode === null) {
+            this.previousResponsiveMode = mode;
+            return;
+        }
+        if (this.previousResponsiveMode === mode) {
+            return;
+        }
+        const previousMode = this.previousResponsiveMode;
+        this.previousResponsiveMode = mode;
+        const config = this.responsiveConfig();
+        /**
+         * If pinned should be respected,
+         * don't overwrite the current open state.
+         */
+        if (config.respectPinned && this.pinned()) {
+            return;
+        }
+        if (mode === 'desktop') {
+            this.open.set(config.desktopOpen);
+        }
+        else {
+            this.open.set(config.mobileOpen);
+        }
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'data-previous-mode', previousMode);
+    }
+    applyInitialResponsiveState(mode) {
+        const config = this.responsiveConfig();
+        if (config.respectPinned && this.pinned()) {
+            return;
+        }
+        /**
+         * Don't blindly overwrite an explicitly bound
+         * [(open)] value after initialization.
+         *
+         * The default is only applied when the model
+         * has not already been initialized.
+         */
+        if (mode === 'desktop') {
+            this.open.set(config.desktopOpen);
+        }
+        else {
+            this.open.set(config.mobileOpen);
+        }
+    }
+    destroyResponsive() {
+        this.removeMediaQueryListener?.();
+        this.mediaQuery = undefined;
+    }
+    // ---------------------------------------------------------------------------
+    // Public API
+    // ---------------------------------------------------------------------------
+    toggle() {
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.openDrawer();
+        }
     }
     openDrawer() {
         this.open.set(true);
     }
-    closeDrawer() {
-        if (!this.pinned())
-            this.open.set(false);
+    close() {
+        if (this.pinned() && this.isPinnedAndDesktop()) {
+            return;
+        }
+        this.open.set(false);
     }
     pin() {
         this.pinned.set(true);
@@ -196,157 +337,120 @@ class NgxDrawerMenuComponent {
     unpin() {
         this.pinned.set(false);
     }
-    onEscape() {
-        if (this.escapeClose() && !this.pinned())
-            this.closeDrawer();
+    togglePinned() {
+        if (this.pinned()) {
+            this.unpin();
+        }
+        else {
+            this.pin();
+        }
     }
-    onBackdropPointerDown(event) {
-        if (!this.backdropClose() || this.pinned() || !this.usesOverlay())
+    // ---------------------------------------------------------------------------
+    // Events
+    // ---------------------------------------------------------------------------
+    onBackdropClick() {
+        if (!this.closeOnBackdrop()) {
             return;
-        event.preventDefault();
-        this.closeDrawer();
+        }
+        this.close();
     }
-    onEdgePointerDown(event) {
-        if (!this.swipeEnabled() || this.open() || this.pinned())
+    onKeyDown(event) {
+        if (event.key !== 'Escape') {
             return;
-        this.beginDrag(event, 0);
-    }
-    onPanelPointerDown(event) {
-        if (!this.swipeEnabled() || !this.open() || this.pinned())
+        }
+        if (!this.closeOnEscape()) {
             return;
-        if (event.button !== 0)
+        }
+        if (!this.open()) {
             return;
-        this.beginDrag(event, 1);
+        }
+        this.close();
     }
-    beginDrag(event, startProgress) {
-        if (this.pointerId !== null)
-            return;
-        const target = event.currentTarget;
-        if (!target)
+    // ---------------------------------------------------------------------------
+    // Scroll locking
+    // ---------------------------------------------------------------------------
+    lockScroll() {
+        if (!this.isBrowser) {
             return;
-        this.pointerId = event.pointerId;
-        this.activePointerTarget = target;
-        this.dragStartX = event.clientX;
-        this.dragLastX = event.clientX;
-        this.dragLastTime = performance.now();
-        this.dragStartProgress = startProgress;
-        this.lastVelocity = 0;
-        this.dragProgress.set(startProgress);
-        target.setPointerCapture?.(event.pointerId);
-        event.preventDefault();
-        target.addEventListener('pointermove', this.onPointerMove);
-        target.addEventListener('pointerup', this.onPointerUp);
-        target.addEventListener('pointercancel', this.onPointerCancel);
-    }
-    onPointerMove = (event) => {
-        if (event.pointerId !== this.pointerId)
-            return;
-        const now = performance.now();
-        const dx = event.clientX - this.dragStartX;
-        const signedDistance = dx * this.physicalSign();
-        const next = this.clamp01(this.dragStartProgress + signedDistance / this.width());
-        const dt = Math.max(8, now - this.dragLastTime);
-        this.lastVelocity = ((event.clientX - this.dragLastX) * this.physicalSign()) / dt;
-        this.dragVelocity.set(this.lastVelocity);
-        this.dragLastX = event.clientX;
-        this.dragLastTime = now;
-        this.dragProgress.set(next);
-        event.preventDefault();
-    };
-    onPointerUp = (event) => {
-        if (event.pointerId !== this.pointerId)
-            return;
-        const progress = this.dragProgress() ?? this.dragStartProgress;
-        const velocity = this.dragVelocity();
-        const opening = velocity > this.velocityThreshold();
-        const closing = velocity < -this.velocityThreshold();
-        let shouldOpen;
-        if (opening)
-            shouldOpen = true;
-        else if (closing)
-            shouldOpen = false;
-        else
-            shouldOpen = progress >= this.dragThreshold();
-        this.open.set(shouldOpen);
-        this.dragProgress.set(null);
-        this.dragVelocity.set(0);
-        this.disposePointer(event.pointerId);
-    };
-    onPointerCancel = (event) => {
-        if (event.pointerId !== this.pointerId)
+        }
+        if (!document.body) {
             return;
-        const progress = this.dragProgress() ?? this.dragStartProgress;
-        this.open.set(progress >= 0.5);
-        this.dragProgress.set(null);
-        this.dragVelocity.set(0);
-        this.disposePointer(event.pointerId);
-    };
-    disposePointer(pointerId) {
-        if (pointerId !== undefined && this.pointerId !== pointerId)
+        }
+        if (document.body.dataset['ngxDrawerScrollLocked'] === 'true') {
             return;
-        const target = this.activePointerTarget;
-        if (target) {
-            target.removeEventListener('pointermove', this.onPointerMove);
-            target.removeEventListener('pointerup', this.onPointerUp);
-            target.removeEventListener('pointercancel', this.onPointerCancel);
-            if (this.pointerId !== null) {
-                try {
-                    target.releasePointerCapture?.(this.pointerId);
-                }
-                catch {
-                    // Pointer capture may already be released by the browser.
-                }
-            }
         }
-        this.pointerId = null;
-        this.activePointerTarget = null;
+        this.renderer.setAttribute(document.body, 'data-ngx-drawer-scroll-locked', 'true');
+        this.renderer.setStyle(document.body, 'overflow', 'hidden');
     }
-    setupViewportSync(enabled, breakpoint, desktopOpen, mobileOpen, respectPinned) {
-        this.disposeViewportSync();
-        if (!enabled || typeof window === 'undefined') {
-            this.isMobile.set(false);
+    unlockScroll() {
+        if (!this.isBrowser) {
             return;
         }
-        this.mediaQuery = window.matchMedia(`(max-width: ${Math.max(0, breakpoint - 0.02)}px)`);
-        const apply = (isMobile) => {
-            this.isMobile.set(isMobile);
-            if (respectPinned && this.pinned())
-                return;
-            const next = isMobile ? mobileOpen : desktopOpen;
-            if (this.lastManagedViewportState === next)
-                return;
-            this.lastManagedViewportState = next;
-            this.open.set(next);
-        };
-        apply(this.mediaQuery.matches);
-        this.mediaQueryListener = (event) => apply(event.matches);
-        this.mediaQuery.addEventListener('change', this.mediaQueryListener);
-    }
-    disposeViewportSync() {
-        if (this.mediaQuery && this.mediaQueryListener) {
-            this.mediaQuery.removeEventListener('change', this.mediaQueryListener);
+        if (!document.body) {
+            return;
         }
-        this.mediaQuery = undefined;
-        this.mediaQueryListener = undefined;
-        this.lastManagedViewportState = null;
-    }
-    clamp01(value) {
-        return Math.max(0, Math.min(1, value));
+        if (document.body.dataset['ngxDrawerScrollLocked'] !== 'true') {
+            return;
+        }
+        this.renderer.removeAttribute(document.body, 'data-ngx-drawer-scroll-locked');
+        this.renderer.removeStyle(document.body, 'overflow');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDrawerMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDrawerMenuComponent, isStandalone: true, selector: "ngx-drawer-menu", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, desktopBehavior: { classPropertyName: "desktopBehavior", publicName: "desktopBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobileBehavior: { classPropertyName: "mobileBehavior", publicName: "mobileBehavior", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, edgeSize: { classPropertyName: "edgeSize", publicName: "edgeSize", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, velocityThreshold: { classPropertyName: "velocityThreshold", publicName: "velocityThreshold", isSignal: true, isRequired: false, transformFunction: null }, swipeEnabled: { classPropertyName: "swipeEnabled", publicName: "swipeEnabled", isSignal: true, isRequired: false, transformFunction: null }, backdropClose: { classPropertyName: "backdropClose", publicName: "backdropClose", isSignal: true, isRequired: false, transformFunction: null }, escapeClose: { classPropertyName: "escapeClose", publicName: "escapeClose", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, respondToViewport: { classPropertyName: "respondToViewport", publicName: "respondToViewport", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, openOnDesktop: { classPropertyName: "openOnDesktop", publicName: "openOnDesktop", isSignal: true, isRequired: false, transformFunction: null }, openOnMobile: { classPropertyName: "openOnMobile", publicName: "openOnMobile", isSignal: true, isRequired: false, transformFunction: null }, curtainStrips: { classPropertyName: "curtainStrips", publicName: "curtainStrips", isSignal: true, isRequired: false, transformFunction: null }, backdropOpacity: { classPropertyName: "backdropOpacity", publicName: "backdropOpacity", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, focusOnOpen: { classPropertyName: "focusOnOpen", publicName: "focusOnOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", pinned: "pinnedChange" }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "ngx-drawer-menu-host" }, ngImport: i0, template: "<div\n  class=\"ngx-drawer\"\n  [class.is-open]=\"isActuallyOpen()\"\n  [class.is-dragging]=\"isDragging()\"\n  [class.is-pinned]=\"pinned()\"\n  [class.is-docked]=\"isDocked()\"\n  [class.is-overlay]=\"usesOverlay()\"\n  [class.side-start]=\"side() === 'start'\"\n  [class.side-end]=\"side() === 'end'\"\n  [class.physical-left]=\"isPhysicalLeft()\"\n  [class.physical-right]=\"!isPhysicalLeft()\"\n  [class.mode-overlay]=\"effectiveMode() === 'overlay'\"\n  [class.mode-push]=\"effectiveMode() === 'push'\"\n  [class.mode-reveal]=\"effectiveMode() === 'reveal'\"\n  [class.effect-slide]=\"effect() === 'slide'\"\n  [class.effect-spring]=\"effect() === 'spring'\"\n  [class.effect-fabric]=\"effect() === 'fabric'\"\n  [class.effect-curtain]=\"effect() === 'curtain'\"\n  [class.effect-elastic]=\"effect() === 'elastic'\"\n  [class.effect-reveal]=\"effect() === 'reveal'\"\n  [style.--ngx-progress]=\"progress()\"\n  [style.--ngx-width.px]=\"width()\"\n  [style.--ngx-edge-size.px]=\"edgeSize()\"\n  [style.--ngx-max-width.px]=\"maxWidth()\"\n  [style.--ngx-duration]=\"duration()\"\n  [style.--ngx-backdrop-opacity]=\"backdropOpacity()\"\n  [style.--ngx-physical-sign]=\"physicalSign()\"\n  [style.--ngx-closed-translate.px]=\"(1 - progress()) * -width() * physicalSign()\"\n  [style.--ngx-transform-origin]=\"isPhysicalLeft() ? 'left center' : 'right center'\"\n  [style.--ngx-fabric-skew]=\"(1 - progress()) * 10 + 'deg'\">\n  @if (swipeEnabled() && !isActuallyOpen() && !pinned()) {\n    <div\n      class=\"ngx-drawer-edge-zone\"\n      [class.edge-start]=\"side() === 'start'\"\n      [class.edge-end]=\"side() === 'end'\"\n      (pointerdown)=\"onEdgePointerDown($event)\"\n      aria-hidden=\"true\"></div>\n  }\n\n  @if (isActuallyOpen() && usesOverlay()) {\n    <button\n      class=\"ngx-drawer-backdrop\"\n      type=\"button\"\n      tabindex=\"-1\"\n      aria-label=\"Close navigation\"\n      (pointerdown)=\"onBackdropPointerDown($event)\"></button>\n  }\n\n  <main class=\"ngx-drawer-main\">\n    <ng-content></ng-content>\n  </main>\n\n  <aside\n    class=\"ngx-drawer-panel\"\n    [attr.aria-hidden]=\"!isActuallyOpen()\"\n    [attr.inert]=\"!isActuallyOpen() ? '' : null\"\n    role=\"navigation\">\n    <div class=\"ngx-drawer-fabric\" aria-hidden=\"true\">\n      <div class=\"ngx-fabric-fold fold-1\"></div>\n      <div class=\"ngx-fabric-fold fold-2\"></div>\n      <div class=\"ngx-fabric-fold fold-3\"></div>\n      <div class=\"ngx-fabric-fold fold-4\"></div>\n      <div class=\"ngx-fabric-edge\"></div>\n    </div>\n\n    <!-- Full-height drag affordance at the physical edge of the panel. -->\n    @if (swipeEnabled() && !pinned()) {\n      <div\n        class=\"ngx-drawer-drag-handle\"\n        [class.handle-start]=\"side() === 'start'\"\n        [class.handle-end]=\"side() === 'end'\"\n        (pointerdown)=\"onPanelPointerDown($event)\"\n        aria-hidden=\"true\">\n        <span></span>\n      </div>\n    }\n\n    <div class=\"ngx-drawer-inner\">\n      <div class=\"ngx-drawer-content\">\n        <ng-content select=\"[drawerContent]\"></ng-content>\n      </div>\n    </div>\n\n    @if (effect() === 'curtain') {\n      <div class=\"ngx-drawer-curtain\" aria-hidden=\"true\">\n        @for (i of strips(); track i) {\n          <span\n            class=\"ngx-drawer-strip\"\n            [style.--strip-index]=\"i\"\n            [style.--strip-count]=\"curtainStrips()\"></span>\n        }\n      </div>\n    }\n  </aside>\n</div>\n", styles: [":host{display:block;min-block-size:100%;--ngx-ease: cubic-bezier(.22, .9, .28, 1);--ngx-spring: cubic-bezier(.17, .88, .32, 1.24)}.ngx-drawer{position:relative;min-block-size:100%;isolation:isolate;color:light-dark(#101114,#f5f7fb);--progress: var(--ngx-progress, 0);--closed-offset: var(--ngx-closed-translate, 0px)}.ngx-drawer-edge-zone{position:fixed;inset-block:0;inline-size:max(var(--ngx-edge-size, 34px),env(safe-area-inset-left),env(safe-area-inset-right));z-index:1600;touch-action:none;cursor:ew-resize}.ngx-drawer-edge-zone.edge-start{inset-inline-start:0}.ngx-drawer-edge-zone.edge-end{inset-inline-end:0}.ngx-drawer.is-docked{display:grid;grid-template-rows:minmax(0,1fr);min-inline-size:0;overflow:clip}.ngx-drawer.is-docked.side-start{grid-template-columns:calc(var(--progress) * min(var(--ngx-width),var(--ngx-max-width))) minmax(0,1fr)}.ngx-drawer.is-docked.side-end{grid-template-columns:minmax(0,1fr) calc(var(--progress) * min(var(--ngx-width),var(--ngx-max-width)))}.ngx-drawer.is-docked .ngx-drawer-main{position:relative;min-inline-size:0;min-block-size:100%;grid-row:1;transition:min-inline-size var(--ngx-duration) var(--ngx-ease),transform var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-docked.side-start .ngx-drawer-main{grid-column:2}.ngx-drawer.is-docked.side-end .ngx-drawer-main{grid-column:1}.ngx-drawer.is-docked .ngx-drawer-panel{position:relative;inset:auto!important;grid-row:1;inline-size:auto;min-inline-size:0;max-inline-size:none;block-size:100%;overflow:hidden;z-index:2;transform:none!important;box-shadow:none;border-radius:0}.ngx-drawer.is-docked.side-start .ngx-drawer-panel{grid-column:1}.ngx-drawer.is-docked.side-end .ngx-drawer-panel{grid-column:2}.ngx-drawer.is-overlay{min-block-size:100%;overflow:clip}.ngx-drawer-backdrop{position:fixed;inset:0;z-index:1450;appearance:none;border:0;padding:0;background:#000;cursor:default;opacity:calc(var(--progress) * var(--ngx-backdrop-opacity));transition:opacity var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-overlay .ngx-drawer-main{position:relative;min-block-size:100%;min-inline-size:0;z-index:1}.ngx-drawer.is-dragging .ngx-drawer-main,.ngx-drawer.is-dragging .ngx-drawer-backdrop,.ngx-drawer.is-dragging .ngx-drawer-panel{transition:none!important}.ngx-drawer-panel{position:fixed;inset-block:0;z-index:1500;inline-size:min(var(--ngx-width),var(--ngx-max-width));max-inline-size:calc(100vw - 12px);overflow:visible;background:light-dark(#fff,#181a1f);box-shadow:0 18px 55px #00000029,0 4px 18px #0000001f;will-change:transform;transition:transform var(--ngx-duration) var(--ngx-ease),box-shadow .26s ease;contain:layout}.ngx-drawer.is-overlay.side-start .ngx-drawer-panel{inset-inline-start:0;transform:translate3d(var(--closed-offset),0,0)}.ngx-drawer.is-overlay.side-end .ngx-drawer-panel{inset-inline-end:0;transform:translate3d(var(--closed-offset),0,0)}.ngx-drawer-drag-handle{position:absolute;inset-block:0;inline-size:42px;z-index:30;touch-action:none;cursor:ew-resize}.ngx-drawer-drag-handle.handle-start{inset-inline-end:-18px}.ngx-drawer-drag-handle.handle-end{inset-inline-start:-18px}.ngx-drawer-drag-handle span{position:absolute;inset-block-start:50%;inline-size:4px;block-size:54px;border-radius:999px;background:color-mix(in srgb,currentColor 18%,transparent);opacity:0;transform:translateY(-50%);transition:opacity .14s ease,block-size .14s ease}.ngx-drawer-drag-handle.handle-start span{inset-inline-start:0}.ngx-drawer-drag-handle.handle-end span{inset-inline-end:0}.ngx-drawer-drag-handle:hover span,.ngx-drawer-drag-handle:active span{opacity:.9;block-size:68px}.ngx-drawer-inner{position:relative;block-size:100%;min-block-size:100%;z-index:5;overflow:hidden}.ngx-drawer-content{position:relative;block-size:100%;min-block-size:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.ngx-drawer.is-overlay.mode-push .ngx-drawer-main{transition:transform var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-overlay.mode-push.physical-left .ngx-drawer-main{transform:translate3d(calc(var(--progress) * var(--ngx-width)),0,0)}.ngx-drawer.is-overlay.mode-push.physical-right .ngx-drawer-main{transform:translate3d(calc(var(--progress) * var(--ngx-width) * -1),0,0)}.ngx-drawer.is-overlay.mode-reveal .ngx-drawer-main{border-radius:calc(var(--progress) * 20px);transform:scale(calc(1 - var(--progress) * .055));overflow:clip}.effect-slide .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0)}.effect-spring .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(.92 + var(--progress) * .08));transform-origin:center}.effect-elastic .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(1 + sin((var(--progress) - .5) * 3.14)*.035))}.effect-fabric .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) skewY(calc((1 - var(--progress)) * var(--ngx-fabric-skew))) scaleX(calc(.78 + var(--progress) * .22))}.effect-curtain .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(.82 + var(--progress) * .18))}.effect-reveal .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleY(calc(.96 + var(--progress) * .04))}.ngx-drawer.is-docked .ngx-drawer-panel,.ngx-drawer.is-docked.effect-fabric .ngx-drawer-panel,.ngx-drawer.is-docked.effect-spring .ngx-drawer-panel,.ngx-drawer.is-docked.effect-elastic .ngx-drawer-panel,.ngx-drawer.is-docked.effect-curtain .ngx-drawer-panel,.ngx-drawer.is-docked.effect-reveal .ngx-drawer-panel{transform:none!important}.ngx-drawer-fabric{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden;opacity:calc((1 - var(--progress)) * .9);transition:opacity .22s ease;mix-blend-mode:multiply}.ngx-fabric-fold{position:absolute;inset-block:-5%;inline-size:19%;transform-origin:center;background:linear-gradient(90deg,#fff0,#ffffff29 28%,#00000024 52%,#ffffff1a 72%,#fff0);filter:blur(.4px)}.ngx-fabric-fold.fold-1{inset-inline-start:1%;transform:skewY(6deg)}.ngx-fabric-fold.fold-2{inset-inline-start:21%;transform:skewY(-4deg)}.ngx-fabric-fold.fold-3{inset-inline-start:43%;transform:skewY(5deg)}.ngx-fabric-fold.fold-4{inset-inline-start:65%;transform:skewY(-3deg)}.ngx-fabric-edge{position:absolute;inset-block:0;inline-size:18px;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent);filter:blur(3px)}.ngx-drawer.side-end .ngx-fabric-edge{inset-inline-end:0}.ngx-drawer.side-start .ngx-fabric-edge{inset-inline-start:0}.ngx-drawer-curtain{position:absolute;inset:0;z-index:11;display:flex;pointer-events:none;overflow:hidden}.ngx-drawer-strip{flex:1 1 0;block-size:100%;background:linear-gradient(90deg,#ffffff0f,#ffffff3d,#00000014,#ffffff14);transform-origin:center;transform:scaleX(calc(1 - var(--progress)));transition:transform var(--ngx-duration) var(--ngx-ease);transition-delay:calc(var(--strip-index) / var(--strip-count) * 60ms)}.ngx-drawer.is-dragging .ngx-drawer-strip{transition:none}@media(prefers-reduced-motion:reduce){.ngx-drawer *,.ngx-drawer{transition-duration:1ms!important;animation-duration:1ms!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDrawerMenuComponent, isStandalone: true, selector: "ngx-drawer-menu", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, lockBodyScroll: { classPropertyName: "lockBodyScroll", publicName: "lockBodyScroll", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", pinned: "pinnedChange" }, host: { properties: { "class.drawer-start": "this.drawerStart", "class.drawer-end": "this.drawerEnd", "class.drawer-open": "this.drawerOpen", "class.drawer-mobile": "this.drawerMobile", "class.drawer-desktop": "this.drawerDesktop", "class.drawer-overlay": "this.drawerOverlay", "class.drawer-dock": "this.drawerDock", "style.--ngx-drawer-width": "this.hostWidth", "style.--ngx-drawer-duration": "this.hostDuration", "style.--ngx-drawer-z-index": "this.hostZIndex", "class.effect-none": "this.effectNone", "class.effect-fabric": "this.effectFabric", "class.effect-slide": "this.effectSlide", "class.effect-push": "this.effectPush", "class.effect-scale": "this.effectScale" } }, ngImport: i0, template: "<div\n  class=\"ngx-drawer-root\"\n  [class.is-open]=\"drawerVisible()\"\n  [class.is-closed]=\"!drawerVisible()\"\n  [class.is-overlay]=\"isOverlay()\"\n  [class.is-dock]=\"isDocked()\"\n  [class.is-pinned]=\"pinned()\"\n  [class.is-mobile]=\"currentMode() === 'mobile'\"\n  [class.is-desktop]=\"currentMode() === 'desktop'\"\n  (keydown)=\"onKeyDown($event)\"\n  tabindex=\"-1\">\n  <!-- ===================================================================== -->\n  <!-- Backdrop                                                               -->\n  <!-- ===================================================================== -->\n\n  @if (shouldShowBackdrop()) {\n    <div class=\"ngx-drawer-backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\n  }\n\n  <!-- ===================================================================== -->\n  <!-- Drawer                                                                 -->\n  <!-- ===================================================================== -->\n\n  <aside\n    class=\"ngx-drawer\"\n    [attr.aria-hidden]=\"!drawerVisible()\"\n    [attr.data-side]=\"side()\"\n    [attr.data-mode]=\"currentMode()\"\n    [attr.data-behavior]=\"currentBehavior()\"\n    [attr.data-effect]=\"effect()\"\n    [attr.data-pinned]=\"pinned()\">\n    <div class=\"ngx-drawer-surface\">\n      <!-- Drawer Content -->\n      <div class=\"ngx-drawer-content\">\n        <ng-content select=\"[drawerContent]\"></ng-content>\n      </div>\n    </div>\n  </aside>\n\n  <!-- ===================================================================== -->\n  <!-- Main Content                                                           -->\n  <!-- ===================================================================== -->\n\n  <main class=\"ngx-drawer-main\">\n    <div class=\"ngx-drawer-main-content\">\n      <ng-content></ng-content>\n    </div>\n  </main>\n</div>\n", styles: [":host{--ngx-drawer-width: 300px;--ngx-drawer-duration: .28s;--ngx-drawer-z-index: 1000;display:block;width:100%;position:relative;isolation:isolate}:host,:host *,:host *:before,:host *:after{box-sizing:border-box}.ngx-drawer-root{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;outline:none}.ngx-drawer-main{position:relative;flex:1 1 auto;width:100%;min-width:0;min-height:0;overflow:hidden;display:flex;transition:width var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),margin var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),transform var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),opacity var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1)}.ngx-drawer-main-content{width:100%;min-width:0;min-height:0;overflow:auto}.ngx-drawer{position:relative;flex:0 0 var(--ngx-drawer-width);width:var(--ngx-drawer-width);min-width:var(--ngx-drawer-width);max-width:var(--ngx-drawer-width);height:100%;z-index:calc(var(--ngx-drawer-z-index) + 2);transition:transform var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),width var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),opacity var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),box-shadow var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1)}.ngx-drawer-surface{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--ngx-drawer-background, #fff);color:var(--ngx-drawer-color, #1f2937);border:0;box-shadow:0 0 #0000}.ngx-drawer-content{width:100%;height:100%;min-width:0;min-height:0;overflow:auto}:host.drawer-start .ngx-drawer{order:0}:host.drawer-start .ngx-drawer-main{order:1}:host.drawer-end .ngx-drawer{order:1}:host.drawer-end .ngx-drawer-main{order:0}:host.drawer-dock .ngx-drawer{transform:translate(0);opacity:1;visibility:visible}:host.drawer-dock.drawer-start.drawer-open .ngx-drawer{transform:translate(0)}:host.drawer-dock.drawer-start:not(.drawer-open) .ngx-drawer{transform:translate(-100%)}:host.drawer-dock.drawer-end.drawer-open .ngx-drawer{transform:translate(0)}:host.drawer-dock.drawer-end:not(.drawer-open) .ngx-drawer{transform:translate(100%)}:host.drawer-overlay .ngx-drawer{position:absolute;top:0;bottom:0;z-index:calc(var(--ngx-drawer-z-index) + 2);box-shadow:0 12px 40px #0000002e}:host.drawer-start.drawer-overlay .ngx-drawer{left:0}:host.drawer-end.drawer-overlay .ngx-drawer{right:0}:host.drawer-overlay.drawer-start.drawer-open .ngx-drawer{transform:translate(0)}:host.drawer-overlay.drawer-start:not(.drawer-open) .ngx-drawer{transform:translate(-105%)}:host.drawer-overlay.drawer-end.drawer-open .ngx-drawer{transform:translate(0)}:host.drawer-overlay.drawer-end:not(.drawer-open) .ngx-drawer{transform:translate(105%)}.ngx-drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--ngx-drawer-z-index) + 1);background:#00000061;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:1;animation:ngx-drawer-backdrop-in var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1);cursor:default}@keyframes ngx-drawer-backdrop-in{0%{opacity:0}to{opacity:1}}:host.effect-fabric .ngx-drawer-surface{position:relative;overflow:hidden}:host.effect-fabric .ngx-drawer-surface:before{content:\"\";position:absolute;top:0;bottom:0;width:100px;pointer-events:none;opacity:0;transition:opacity var(--ngx-drawer-duration) ease,transform var(--ngx-drawer-duration) ease;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.08) 55%,transparent 100%)}:host.effect-fabric.drawer-start .ngx-drawer-surface:before{right:-100px}:host.effect-fabric.drawer-end .ngx-drawer-surface:before{left:-100px}:host.effect-fabric.drawer-open .ngx-drawer-surface:before{opacity:1}:host.effect-slide .ngx-drawer{will-change:transform}:host.effect-push.drawer-start.drawer-open .ngx-drawer-main{transform:translate(calc(var(--ngx-drawer-width) / 2))}:host.effect-push.drawer-end.drawer-open .ngx-drawer-main{transform:translate(calc(var(--ngx-drawer-width) / -2))}:host.effect-scale.drawer-open .ngx-drawer-main-content{transform:scale(.985);opacity:.92}.ngx-drawer-main-content{transition:transform var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),opacity var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1)}:host.drawer-dock.drawer-open.drawer-desktop.drawer-start{--ngx-drawer-shadow: 8px 0 24px rgba(0, 0, 0, .06)}:host.drawer-dock.drawer-open.drawer-desktop.drawer-end{--ngx-drawer-shadow: -8px 0 24px rgba(0, 0, 0, .06)}:host.drawer-dock .ngx-drawer-surface{box-shadow:var(--ngx-drawer-shadow, none)}:host.drawer-dock.drawer-desktop.drawer-open .ngx-drawer{box-shadow:none}:host.drawer-mobile{--ngx-drawer-duration: .26s}:host.drawer-mobile .ngx-drawer{box-shadow:0 12px 40px #0003}@media(prefers-color-scheme:dark){:host{--ngx-drawer-background: #111827;--ngx-drawer-color: #f3f4f6}.ngx-drawer-surface{border-color:#ffffff14}.ngx-drawer-backdrop{background:#0009}}@media(prefers-reduced-motion:reduce){:host{--ngx-drawer-duration: 0ms}.ngx-drawer,.ngx-drawer-main,.ngx-drawer-main-content,.ngx-drawer-backdrop{transition:none!important;animation:none!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDrawerMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-drawer-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'ngx-drawer-menu-host',
-                        '(keydown.escape)': 'onEscape()',
-                    }, template: "<div\n  class=\"ngx-drawer\"\n  [class.is-open]=\"isActuallyOpen()\"\n  [class.is-dragging]=\"isDragging()\"\n  [class.is-pinned]=\"pinned()\"\n  [class.is-docked]=\"isDocked()\"\n  [class.is-overlay]=\"usesOverlay()\"\n  [class.side-start]=\"side() === 'start'\"\n  [class.side-end]=\"side() === 'end'\"\n  [class.physical-left]=\"isPhysicalLeft()\"\n  [class.physical-right]=\"!isPhysicalLeft()\"\n  [class.mode-overlay]=\"effectiveMode() === 'overlay'\"\n  [class.mode-push]=\"effectiveMode() === 'push'\"\n  [class.mode-reveal]=\"effectiveMode() === 'reveal'\"\n  [class.effect-slide]=\"effect() === 'slide'\"\n  [class.effect-spring]=\"effect() === 'spring'\"\n  [class.effect-fabric]=\"effect() === 'fabric'\"\n  [class.effect-curtain]=\"effect() === 'curtain'\"\n  [class.effect-elastic]=\"effect() === 'elastic'\"\n  [class.effect-reveal]=\"effect() === 'reveal'\"\n  [style.--ngx-progress]=\"progress()\"\n  [style.--ngx-width.px]=\"width()\"\n  [style.--ngx-edge-size.px]=\"edgeSize()\"\n  [style.--ngx-max-width.px]=\"maxWidth()\"\n  [style.--ngx-duration]=\"duration()\"\n  [style.--ngx-backdrop-opacity]=\"backdropOpacity()\"\n  [style.--ngx-physical-sign]=\"physicalSign()\"\n  [style.--ngx-closed-translate.px]=\"(1 - progress()) * -width() * physicalSign()\"\n  [style.--ngx-transform-origin]=\"isPhysicalLeft() ? 'left center' : 'right center'\"\n  [style.--ngx-fabric-skew]=\"(1 - progress()) * 10 + 'deg'\">\n  @if (swipeEnabled() && !isActuallyOpen() && !pinned()) {\n    <div\n      class=\"ngx-drawer-edge-zone\"\n      [class.edge-start]=\"side() === 'start'\"\n      [class.edge-end]=\"side() === 'end'\"\n      (pointerdown)=\"onEdgePointerDown($event)\"\n      aria-hidden=\"true\"></div>\n  }\n\n  @if (isActuallyOpen() && usesOverlay()) {\n    <button\n      class=\"ngx-drawer-backdrop\"\n      type=\"button\"\n      tabindex=\"-1\"\n      aria-label=\"Close navigation\"\n      (pointerdown)=\"onBackdropPointerDown($event)\"></button>\n  }\n\n  <main class=\"ngx-drawer-main\">\n    <ng-content></ng-content>\n  </main>\n\n  <aside\n    class=\"ngx-drawer-panel\"\n    [attr.aria-hidden]=\"!isActuallyOpen()\"\n    [attr.inert]=\"!isActuallyOpen() ? '' : null\"\n    role=\"navigation\">\n    <div class=\"ngx-drawer-fabric\" aria-hidden=\"true\">\n      <div class=\"ngx-fabric-fold fold-1\"></div>\n      <div class=\"ngx-fabric-fold fold-2\"></div>\n      <div class=\"ngx-fabric-fold fold-3\"></div>\n      <div class=\"ngx-fabric-fold fold-4\"></div>\n      <div class=\"ngx-fabric-edge\"></div>\n    </div>\n\n    <!-- Full-height drag affordance at the physical edge of the panel. -->\n    @if (swipeEnabled() && !pinned()) {\n      <div\n        class=\"ngx-drawer-drag-handle\"\n        [class.handle-start]=\"side() === 'start'\"\n        [class.handle-end]=\"side() === 'end'\"\n        (pointerdown)=\"onPanelPointerDown($event)\"\n        aria-hidden=\"true\">\n        <span></span>\n      </div>\n    }\n\n    <div class=\"ngx-drawer-inner\">\n      <div class=\"ngx-drawer-content\">\n        <ng-content select=\"[drawerContent]\"></ng-content>\n      </div>\n    </div>\n\n    @if (effect() === 'curtain') {\n      <div class=\"ngx-drawer-curtain\" aria-hidden=\"true\">\n        @for (i of strips(); track i) {\n          <span\n            class=\"ngx-drawer-strip\"\n            [style.--strip-index]=\"i\"\n            [style.--strip-count]=\"curtainStrips()\"></span>\n        }\n      </div>\n    }\n  </aside>\n</div>\n", styles: [":host{display:block;min-block-size:100%;--ngx-ease: cubic-bezier(.22, .9, .28, 1);--ngx-spring: cubic-bezier(.17, .88, .32, 1.24)}.ngx-drawer{position:relative;min-block-size:100%;isolation:isolate;color:light-dark(#101114,#f5f7fb);--progress: var(--ngx-progress, 0);--closed-offset: var(--ngx-closed-translate, 0px)}.ngx-drawer-edge-zone{position:fixed;inset-block:0;inline-size:max(var(--ngx-edge-size, 34px),env(safe-area-inset-left),env(safe-area-inset-right));z-index:1600;touch-action:none;cursor:ew-resize}.ngx-drawer-edge-zone.edge-start{inset-inline-start:0}.ngx-drawer-edge-zone.edge-end{inset-inline-end:0}.ngx-drawer.is-docked{display:grid;grid-template-rows:minmax(0,1fr);min-inline-size:0;overflow:clip}.ngx-drawer.is-docked.side-start{grid-template-columns:calc(var(--progress) * min(var(--ngx-width),var(--ngx-max-width))) minmax(0,1fr)}.ngx-drawer.is-docked.side-end{grid-template-columns:minmax(0,1fr) calc(var(--progress) * min(var(--ngx-width),var(--ngx-max-width)))}.ngx-drawer.is-docked .ngx-drawer-main{position:relative;min-inline-size:0;min-block-size:100%;grid-row:1;transition:min-inline-size var(--ngx-duration) var(--ngx-ease),transform var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-docked.side-start .ngx-drawer-main{grid-column:2}.ngx-drawer.is-docked.side-end .ngx-drawer-main{grid-column:1}.ngx-drawer.is-docked .ngx-drawer-panel{position:relative;inset:auto!important;grid-row:1;inline-size:auto;min-inline-size:0;max-inline-size:none;block-size:100%;overflow:hidden;z-index:2;transform:none!important;box-shadow:none;border-radius:0}.ngx-drawer.is-docked.side-start .ngx-drawer-panel{grid-column:1}.ngx-drawer.is-docked.side-end .ngx-drawer-panel{grid-column:2}.ngx-drawer.is-overlay{min-block-size:100%;overflow:clip}.ngx-drawer-backdrop{position:fixed;inset:0;z-index:1450;appearance:none;border:0;padding:0;background:#000;cursor:default;opacity:calc(var(--progress) * var(--ngx-backdrop-opacity));transition:opacity var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-overlay .ngx-drawer-main{position:relative;min-block-size:100%;min-inline-size:0;z-index:1}.ngx-drawer.is-dragging .ngx-drawer-main,.ngx-drawer.is-dragging .ngx-drawer-backdrop,.ngx-drawer.is-dragging .ngx-drawer-panel{transition:none!important}.ngx-drawer-panel{position:fixed;inset-block:0;z-index:1500;inline-size:min(var(--ngx-width),var(--ngx-max-width));max-inline-size:calc(100vw - 12px);overflow:visible;background:light-dark(#fff,#181a1f);box-shadow:0 18px 55px #00000029,0 4px 18px #0000001f;will-change:transform;transition:transform var(--ngx-duration) var(--ngx-ease),box-shadow .26s ease;contain:layout}.ngx-drawer.is-overlay.side-start .ngx-drawer-panel{inset-inline-start:0;transform:translate3d(var(--closed-offset),0,0)}.ngx-drawer.is-overlay.side-end .ngx-drawer-panel{inset-inline-end:0;transform:translate3d(var(--closed-offset),0,0)}.ngx-drawer-drag-handle{position:absolute;inset-block:0;inline-size:42px;z-index:30;touch-action:none;cursor:ew-resize}.ngx-drawer-drag-handle.handle-start{inset-inline-end:-18px}.ngx-drawer-drag-handle.handle-end{inset-inline-start:-18px}.ngx-drawer-drag-handle span{position:absolute;inset-block-start:50%;inline-size:4px;block-size:54px;border-radius:999px;background:color-mix(in srgb,currentColor 18%,transparent);opacity:0;transform:translateY(-50%);transition:opacity .14s ease,block-size .14s ease}.ngx-drawer-drag-handle.handle-start span{inset-inline-start:0}.ngx-drawer-drag-handle.handle-end span{inset-inline-end:0}.ngx-drawer-drag-handle:hover span,.ngx-drawer-drag-handle:active span{opacity:.9;block-size:68px}.ngx-drawer-inner{position:relative;block-size:100%;min-block-size:100%;z-index:5;overflow:hidden}.ngx-drawer-content{position:relative;block-size:100%;min-block-size:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.ngx-drawer.is-overlay.mode-push .ngx-drawer-main{transition:transform var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-overlay.mode-push.physical-left .ngx-drawer-main{transform:translate3d(calc(var(--progress) * var(--ngx-width)),0,0)}.ngx-drawer.is-overlay.mode-push.physical-right .ngx-drawer-main{transform:translate3d(calc(var(--progress) * var(--ngx-width) * -1),0,0)}.ngx-drawer.is-overlay.mode-reveal .ngx-drawer-main{border-radius:calc(var(--progress) * 20px);transform:scale(calc(1 - var(--progress) * .055));overflow:clip}.effect-slide .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0)}.effect-spring .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(.92 + var(--progress) * .08));transform-origin:center}.effect-elastic .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(1 + sin((var(--progress) - .5) * 3.14)*.035))}.effect-fabric .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) skewY(calc((1 - var(--progress)) * var(--ngx-fabric-skew))) scaleX(calc(.78 + var(--progress) * .22))}.effect-curtain .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(.82 + var(--progress) * .18))}.effect-reveal .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleY(calc(.96 + var(--progress) * .04))}.ngx-drawer.is-docked .ngx-drawer-panel,.ngx-drawer.is-docked.effect-fabric .ngx-drawer-panel,.ngx-drawer.is-docked.effect-spring .ngx-drawer-panel,.ngx-drawer.is-docked.effect-elastic .ngx-drawer-panel,.ngx-drawer.is-docked.effect-curtain .ngx-drawer-panel,.ngx-drawer.is-docked.effect-reveal .ngx-drawer-panel{transform:none!important}.ngx-drawer-fabric{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden;opacity:calc((1 - var(--progress)) * .9);transition:opacity .22s ease;mix-blend-mode:multiply}.ngx-fabric-fold{position:absolute;inset-block:-5%;inline-size:19%;transform-origin:center;background:linear-gradient(90deg,#fff0,#ffffff29 28%,#00000024 52%,#ffffff1a 72%,#fff0);filter:blur(.4px)}.ngx-fabric-fold.fold-1{inset-inline-start:1%;transform:skewY(6deg)}.ngx-fabric-fold.fold-2{inset-inline-start:21%;transform:skewY(-4deg)}.ngx-fabric-fold.fold-3{inset-inline-start:43%;transform:skewY(5deg)}.ngx-fabric-fold.fold-4{inset-inline-start:65%;transform:skewY(-3deg)}.ngx-fabric-edge{position:absolute;inset-block:0;inline-size:18px;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent);filter:blur(3px)}.ngx-drawer.side-end .ngx-fabric-edge{inset-inline-end:0}.ngx-drawer.side-start .ngx-fabric-edge{inset-inline-start:0}.ngx-drawer-curtain{position:absolute;inset:0;z-index:11;display:flex;pointer-events:none;overflow:hidden}.ngx-drawer-strip{flex:1 1 0;block-size:100%;background:linear-gradient(90deg,#ffffff0f,#ffffff3d,#00000014,#ffffff14);transform-origin:center;transform:scaleX(calc(1 - var(--progress)));transition:transform var(--ngx-duration) var(--ngx-ease);transition-delay:calc(var(--strip-index) / var(--strip-count) * 60ms)}.ngx-drawer.is-dragging .ngx-drawer-strip{transition:none}@media(prefers-reduced-motion:reduce){.ngx-drawer *,.ngx-drawer{transition-duration:1ms!important;animation-duration:1ms!important}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], desktopBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "desktopBehavior", required: false }] }], mobileBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBehavior", required: false }] }], effect: [{ type: i0.Input, args: [{ isSignal: true, alias: "effect", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], edgeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeSize", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], velocityThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "velocityThreshold", required: false }] }], swipeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeEnabled", required: false }] }], backdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClose", required: false }] }], escapeClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "escapeClose", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }, { type: i0.Output, args: ["pinnedChange"] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], respondToViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "respondToViewport", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], openOnDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnDesktop", required: false }] }], openOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnMobile", required: false }] }], curtainStrips: [{ type: i0.Input, args: [{ isSignal: true, alias: "curtainStrips", required: false }] }], backdropOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropOpacity", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], focusOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnOpen", required: false }] }] } });
+            args: [{ selector: 'ngx-drawer-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ngx-drawer-root\"\n  [class.is-open]=\"drawerVisible()\"\n  [class.is-closed]=\"!drawerVisible()\"\n  [class.is-overlay]=\"isOverlay()\"\n  [class.is-dock]=\"isDocked()\"\n  [class.is-pinned]=\"pinned()\"\n  [class.is-mobile]=\"currentMode() === 'mobile'\"\n  [class.is-desktop]=\"currentMode() === 'desktop'\"\n  (keydown)=\"onKeyDown($event)\"\n  tabindex=\"-1\">\n  <!-- ===================================================================== -->\n  <!-- Backdrop                                                               -->\n  <!-- ===================================================================== -->\n\n  @if (shouldShowBackdrop()) {\n    <div class=\"ngx-drawer-backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\n  }\n\n  <!-- ===================================================================== -->\n  <!-- Drawer                                                                 -->\n  <!-- ===================================================================== -->\n\n  <aside\n    class=\"ngx-drawer\"\n    [attr.aria-hidden]=\"!drawerVisible()\"\n    [attr.data-side]=\"side()\"\n    [attr.data-mode]=\"currentMode()\"\n    [attr.data-behavior]=\"currentBehavior()\"\n    [attr.data-effect]=\"effect()\"\n    [attr.data-pinned]=\"pinned()\">\n    <div class=\"ngx-drawer-surface\">\n      <!-- Drawer Content -->\n      <div class=\"ngx-drawer-content\">\n        <ng-content select=\"[drawerContent]\"></ng-content>\n      </div>\n    </div>\n  </aside>\n\n  <!-- ===================================================================== -->\n  <!-- Main Content                                                           -->\n  <!-- ===================================================================== -->\n\n  <main class=\"ngx-drawer-main\">\n    <div class=\"ngx-drawer-main-content\">\n      <ng-content></ng-content>\n    </div>\n  </main>\n</div>\n", styles: [":host{--ngx-drawer-width: 300px;--ngx-drawer-duration: .28s;--ngx-drawer-z-index: 1000;display:block;width:100%;position:relative;isolation:isolate}:host,:host *,:host *:before,:host *:after{box-sizing:border-box}.ngx-drawer-root{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;outline:none}.ngx-drawer-main{position:relative;flex:1 1 auto;width:100%;min-width:0;min-height:0;overflow:hidden;display:flex;transition:width var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),margin var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),transform var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),opacity var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1)}.ngx-drawer-main-content{width:100%;min-width:0;min-height:0;overflow:auto}.ngx-drawer{position:relative;flex:0 0 var(--ngx-drawer-width);width:var(--ngx-drawer-width);min-width:var(--ngx-drawer-width);max-width:var(--ngx-drawer-width);height:100%;z-index:calc(var(--ngx-drawer-z-index) + 2);transition:transform var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),width var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),opacity var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),box-shadow var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1)}.ngx-drawer-surface{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--ngx-drawer-background, #fff);color:var(--ngx-drawer-color, #1f2937);border:0;box-shadow:0 0 #0000}.ngx-drawer-content{width:100%;height:100%;min-width:0;min-height:0;overflow:auto}:host.drawer-start .ngx-drawer{order:0}:host.drawer-start .ngx-drawer-main{order:1}:host.drawer-end .ngx-drawer{order:1}:host.drawer-end .ngx-drawer-main{order:0}:host.drawer-dock .ngx-drawer{transform:translate(0);opacity:1;visibility:visible}:host.drawer-dock.drawer-start.drawer-open .ngx-drawer{transform:translate(0)}:host.drawer-dock.drawer-start:not(.drawer-open) .ngx-drawer{transform:translate(-100%)}:host.drawer-dock.drawer-end.drawer-open .ngx-drawer{transform:translate(0)}:host.drawer-dock.drawer-end:not(.drawer-open) .ngx-drawer{transform:translate(100%)}:host.drawer-overlay .ngx-drawer{position:absolute;top:0;bottom:0;z-index:calc(var(--ngx-drawer-z-index) + 2);box-shadow:0 12px 40px #0000002e}:host.drawer-start.drawer-overlay .ngx-drawer{left:0}:host.drawer-end.drawer-overlay .ngx-drawer{right:0}:host.drawer-overlay.drawer-start.drawer-open .ngx-drawer{transform:translate(0)}:host.drawer-overlay.drawer-start:not(.drawer-open) .ngx-drawer{transform:translate(-105%)}:host.drawer-overlay.drawer-end.drawer-open .ngx-drawer{transform:translate(0)}:host.drawer-overlay.drawer-end:not(.drawer-open) .ngx-drawer{transform:translate(105%)}.ngx-drawer-backdrop{position:absolute;inset:0;z-index:calc(var(--ngx-drawer-z-index) + 1);background:#00000061;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:1;animation:ngx-drawer-backdrop-in var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1);cursor:default}@keyframes ngx-drawer-backdrop-in{0%{opacity:0}to{opacity:1}}:host.effect-fabric .ngx-drawer-surface{position:relative;overflow:hidden}:host.effect-fabric .ngx-drawer-surface:before{content:\"\";position:absolute;top:0;bottom:0;width:100px;pointer-events:none;opacity:0;transition:opacity var(--ngx-drawer-duration) ease,transform var(--ngx-drawer-duration) ease;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.08) 55%,transparent 100%)}:host.effect-fabric.drawer-start .ngx-drawer-surface:before{right:-100px}:host.effect-fabric.drawer-end .ngx-drawer-surface:before{left:-100px}:host.effect-fabric.drawer-open .ngx-drawer-surface:before{opacity:1}:host.effect-slide .ngx-drawer{will-change:transform}:host.effect-push.drawer-start.drawer-open .ngx-drawer-main{transform:translate(calc(var(--ngx-drawer-width) / 2))}:host.effect-push.drawer-end.drawer-open .ngx-drawer-main{transform:translate(calc(var(--ngx-drawer-width) / -2))}:host.effect-scale.drawer-open .ngx-drawer-main-content{transform:scale(.985);opacity:.92}.ngx-drawer-main-content{transition:transform var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1),opacity var(--ngx-drawer-duration) cubic-bezier(.4,0,.2,1)}:host.drawer-dock.drawer-open.drawer-desktop.drawer-start{--ngx-drawer-shadow: 8px 0 24px rgba(0, 0, 0, .06)}:host.drawer-dock.drawer-open.drawer-desktop.drawer-end{--ngx-drawer-shadow: -8px 0 24px rgba(0, 0, 0, .06)}:host.drawer-dock .ngx-drawer-surface{box-shadow:var(--ngx-drawer-shadow, none)}:host.drawer-dock.drawer-desktop.drawer-open .ngx-drawer{box-shadow:none}:host.drawer-mobile{--ngx-drawer-duration: .26s}:host.drawer-mobile .ngx-drawer{box-shadow:0 12px 40px #0003}@media(prefers-color-scheme:dark){:host{--ngx-drawer-background: #111827;--ngx-drawer-color: #f3f4f6}.ngx-drawer-surface{border-color:#ffffff14}.ngx-drawer-backdrop{background:#0009}}@media(prefers-reduced-motion:reduce){:host{--ngx-drawer-duration: 0ms}.ngx-drawer,.ngx-drawer-main,.ngx-drawer-main-content,.ngx-drawer-backdrop{transition:none!important;animation:none!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], effect: [{ type: i0.Input, args: [{ isSignal: true, alias: "effect", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }, { type: i0.Output, args: ["pinnedChange"] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], lockBodyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockBodyScroll", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], drawerStart: [{
+                type: HostBinding,
+                args: ['class.drawer-start']
+            }], drawerEnd: [{
+                type: HostBinding,
+                args: ['class.drawer-end']
+            }], drawerOpen: [{
+                type: HostBinding,
+                args: ['class.drawer-open']
+            }], drawerMobile: [{
+                type: HostBinding,
+                args: ['class.drawer-mobile']
+            }], drawerDesktop: [{
+                type: HostBinding,
+                args: ['class.drawer-desktop']
+            }], drawerOverlay: [{
+                type: HostBinding,
+                args: ['class.drawer-overlay']
+            }], drawerDock: [{
+                type: HostBinding,
+                args: ['class.drawer-dock']
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.--ngx-drawer-width']
+            }], hostDuration: [{
+                type: HostBinding,
+                args: ['style.--ngx-drawer-duration']
+            }], hostZIndex: [{
+                type: HostBinding,
+                args: ['style.--ngx-drawer-z-index']
+            }], effectNone: [{
+                type: HostBinding,
+                args: ['class.effect-none']
+            }], effectFabric: [{
+                type: HostBinding,
+                args: ['class.effect-fabric']
+            }], effectSlide: [{
+                type: HostBinding,
+                args: ['class.effect-slide']
+            }], effectPush: [{
+                type: HostBinding,
+                args: ['class.effect-push']
+            }], effectScale: [{
+                type: HostBinding,
+                args: ['class.effect-scale']
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgxDrawerMenuComponent };
+export { DEFAULT_DRAWER_RESPONSIVE, NgxDrawerMenuComponent };
 //# sourceMappingURL=ngx-kit-drawer-menu.mjs.map