ngx-kit 6.1.0 → 6.3.0

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

@@ -1,186 +1,348 @@
 import * as i0 from '@angular/core';
-import { input, model, inject, DOCUMENT, DestroyRef, signal, computed, effect, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
-import { DirectionService, startDragSession } from 'ngx-kit/shared';
+import { input, signal, model, computed, inject, DOCUMENT, DestroyRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DirectionService } from 'ngx-kit/shared';
 
 /**
- * درور منو (side drawer) با ۶ جلوه‌ی بازوبسته‌شدنِ متفاوت (از ساده تا
- * سه‌بعدی/ژله‌ای) و ۳ رفتار برای محتوای صفحه (overlay/push/reveal) —
- * دقیقاً مدل کتابخونه‌های حرفه‌ای مثل react-burger-menu یا Ionic Menu، ولی
- * signal-based و بدون هیچ وابستگی خارجی.
+ * Structural (not reference) equality for the `responsive` config.
  *
- * نکات معماری:
- *  - از 'start'/'end' منطقی استفاده می‌کنه، پس با CSS logical properties
- *    زیر RTL خودکار برعکس می‌شه؛ فقط ریاضیِ درگ (که برخلاف CSS جهت فیزیکیِ
- *    واقعی لازم داره) از DirectionService مشترک استفاده می‌کنه.
- *  - وضعیت باز/بسته با model() دوطرفه‌ست، پس هم با [(open)] قابل کنترله و
- *    هم می‌تونه به‌صورت خودکار و زنده با عرض صفحه هماهنگ بشه (respondToViewport)
- *    — یعنی رد شدن از breakpoint (نه فقط بار اول لود) می‌تونه خودکار باز/بسته‌ش کنه.
- *  - افکت‌های jelly/pull با keyframe سه‌مرحله‌ای (overshoot → نوسان → استقرار)
- *    پیاده شدن، نه فقط یه transition ساده.
+ * 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 {
     side = input('start', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    effect = input('slide', /* @ts-ignore */
+    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 */ []));
-    contentBehavior = input('overlay', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentBehavior" }] : /* istanbul ignore next */ []));
-    width = input(280, /* @ts-ignore */
+    width = input(300, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    swipeEdgeSize = input(24, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "swipeEdgeSize" }] : /* istanbul ignore next */ []));
-    curtainStrips = input(7, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "curtainStrips" }] : /* istanbul ignore next */ []));
-    backdropClose = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "backdropClose" }] : /* 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 */ []));
-    /** اگه true باشه، رد شدن از mobileBreakpoint به‌صورت زنده open رو با openOnDesktop/openOnMobile هماهنگ می‌کنه */
+    /** 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 */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Pinned drawers are intended for persistent desktop navigation. */
+    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 */
+    ...(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 */ []));
-    mobileBreakpoint = input(768, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []));
-    /** state دوطرفه‌ی باز/بسته؛ با [(open)] قابل bind هست */
-    open = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    directionService = inject(DirectionService);
-    doc = inject(DOCUMENT);
-    destroyRef = inject(DestroyRef);
-    /** فقط حین یه درگِ واقعی مقدار داره؛ null یعنی از روی open() تصمیم بگیر */
-    dragRatio = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dragRatio" }] : /* istanbul ignore next */ []));
-    isDragging = computed(() => this.dragRatio() !== null, /* @ts-ignore */
+    /** 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 */ []));
+    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';
+        }
+        return this.isMobile()
+            ? (this.responsiveMobileBehavior() ?? this.mobileBehavior())
+            : (this.responsiveDesktopBehavior() ?? this.desktopBehavior());
+    }, /* @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 */ []));
-    visualOpen = computed(() => this.dragRatio() ?? (this.open() ? 1 : 0), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visualOpen" }] : /* istanbul ignore next */ []));
-    strips = computed(() => Array.from({ length: this.curtainStrips() }, (_, i) => i), /* @ts-ignore */
+    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 */ []));
-    /**
-     * +۱ یعنی این پنل فیزیکاً روی لبه‌ی چپِ صفحه‌ست، -۱ یعنی لبه‌ی راست —
-     * برای transform:translateX() محتوای اصلی (که برخلاف inset-inline، به
-     * dir=rtl خودکار واکنش نشون نمی‌ده) لازمه. reactive هست چون هم به side()
-     * و هم به جهتِ زنده‌ی صفحه (directionService.isRtl()) وابسته‌ست.
-     */
-    pushDirSign = computed(() => (this.isPhysicalLeftEdge() ? 1 : -1), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pushDirSign" }] : /* istanbul ignore next */ []));
-    /** برای افکت‌های keyframe‌محور (jelly/pull) — فقط لحظه‌ی رهاشدن (نه حین درگ زنده) پخش می‌شه */
-    playEffectClass = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "playEffectClass" }] : /* istanbul ignore next */ []));
-    stopDrag;
+    /** 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;
+    }, /* @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';
+    }, /* @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;
-    dragStartRatio = 0;
-    prevOpen = false;
+    dragStartProgress = 0;
+    dragLastX = 0;
+    dragLastTime = 0;
+    lastVelocity = 0;
+    activePointerTarget = null;
+    resizeObserver;
+    mediaQuery;
+    mediaQueryListener;
+    lastManagedViewportState = null;
     constructor() {
-        // قفل اسکرول پس‌زمینه حین باز بودن پنل (فقط در حالت overlay واقعاً لازمه،
-        // ولی در push/reveal هم بی‌ضرره و تجربه‌ی بهتری می‌ده)
         effect((onCleanup) => {
-            if (this.open() && this.contentBehavior() === 'overlay') {
-                const prevOverflow = this.doc.body.style.overflow;
-                this.doc.body.style.overflow = 'hidden';
-                onCleanup(() => {
-                    this.doc.body.style.overflow = prevOverflow;
-                });
-            }
+            const locked = this.open() && this.effectiveMode() === 'overlay';
+            if (!locked)
+                return;
+            const body = this.document.body;
+            const previous = body.style.overflow;
+            body.style.overflow = 'hidden';
+            onCleanup(() => (body.style.overflow = previous));
         });
-        // پخش انیمیشن keyframe‌محور فقط لحظه‌ای که open() واقعاً عوض می‌شه (نه هر CD)
         effect(() => {
-            const isOpen = this.open();
-            if (isOpen !== this.prevOpen) {
-                this.prevOpen = isOpen;
-                this.playEffectClass.set(true);
-                const id = setTimeout(() => this.playEffectClass.set(false), 700);
-                // پاک‌سازی در صورتی که کامپوننت زودتر destroy بشه
-                this.destroyRef.onDestroy(() => clearTimeout(id));
-            }
+            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);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.disposePointer();
+            this.disposeViewportSync();
         });
-        this.destroyRef.onDestroy(() => this.stopDrag?.());
-        // هماهنگیِ زنده با breakpoint
-        if (typeof window !== 'undefined') {
-            const mql = window.matchMedia(`(min-width: ${this.mobileBreakpoint()}px)`);
-            const applyForCurrentViewport = (isDesktop) => {
-                if (this.respondToViewport()) {
-                    this.open.set(isDesktop ? this.openOnDesktop() : this.openOnMobile());
-                }
-            };
-            applyForCurrentViewport(mql.matches);
-            const handler = (e) => applyForCurrentViewport(e.matches);
-            mql.addEventListener('change', handler);
-            this.destroyRef.onDestroy(() => mql.removeEventListener('change', handler));
-        }
     }
-    onEscape() {
-        if (this.open())
-            this.open.set(false);
+    toggle() {
+        if (this.pinned() && this.open())
+            return;
+        this.open.update((value) => !value);
     }
-    closeFromBackdrop() {
-        if (this.backdropClose())
+    openDrawer() {
+        this.open.set(true);
+    }
+    closeDrawer() {
+        if (!this.pinned())
             this.open.set(false);
     }
-    toggle() {
-        this.open.update((o) => !o);
+    pin() {
+        this.pinned.set(true);
+        this.open.set(true);
     }
-    /** true یعنی این پنل فیزیکاً روی لبه‌ی چپِ صفحه‌ست (صرف‌نظر از start/end منطقی) */
-    isPhysicalLeftEdge() {
-        const isRtl = this.directionService.isRtl();
-        return this.side() === 'start' ? !isRtl : isRtl;
+    unpin() {
+        this.pinned.set(false);
     }
-    stripDelay(index) {
-        const count = this.curtainStrips();
-        const order = this.open() ? index : count - 1 - index;
-        return `${order * 28}ms`;
+    onEscape() {
+        if (this.escapeClose() && !this.pinned())
+            this.closeDrawer();
     }
-    // ---------- درگ (هم برای باز کردن از لبه، هم بستن با کشیدنِ پنل) ----------
-    onEdgeDragStart(ev) {
-        if (!this.swipeEnabled() || this.open())
+    onBackdropPointerDown(event) {
+        if (!this.backdropClose() || this.pinned() || !this.usesOverlay())
             return;
-        this.beginDrag(ev, 0);
+        event.preventDefault();
+        this.closeDrawer();
     }
-    onPanelDragStart(ev) {
-        if (!this.open())
+    onEdgePointerDown(event) {
+        if (!this.swipeEnabled() || this.open() || this.pinned())
             return;
-        this.beginDrag(ev, 1);
+        this.beginDrag(event, 0);
     }
-    beginDrag(ev, startRatio) {
-        ev.preventDefault();
-        this.dragStartX = this.clientXOf(ev);
-        this.dragStartRatio = startRatio;
-        this.dragRatio.set(startRatio);
-        this.stopDrag?.();
-        this.stopDrag = startDragSession({
-            onMove: (moveEv) => {
-                const dx = this.clientXOf(moveEv) - this.dragStartX;
-                const opensToward = this.isPhysicalLeftEdge() ? 1 : -1;
-                const signedRatio = (dx * opensToward) / this.width();
-                const ratio = Math.min(1, Math.max(0, this.dragStartRatio + signedRatio));
-                this.dragRatio.set(ratio);
-            },
-            onEnd: () => {
-                const ratio = this.dragRatio() ?? this.dragStartRatio;
-                this.open.set(ratio > 0.4);
-                this.dragRatio.set(null);
-                this.stopDrag = undefined;
-            },
-        });
+    onPanelPointerDown(event) {
+        if (!this.swipeEnabled() || !this.open() || this.pinned())
+            return;
+        if (event.button !== 0)
+            return;
+        this.beginDrag(event, 1);
+    }
+    beginDrag(event, startProgress) {
+        if (this.pointerId !== null)
+            return;
+        const target = event.currentTarget;
+        if (!target)
+            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)
+            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)
+            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;
+    }
+    setupViewportSync(enabled, breakpoint, desktopOpen, mobileOpen, respectPinned) {
+        this.disposeViewportSync();
+        if (!enabled || typeof window === 'undefined') {
+            this.isMobile.set(false);
+            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);
+        }
+        this.mediaQuery = undefined;
+        this.mediaQueryListener = undefined;
+        this.lastManagedViewportState = null;
     }
-    clientXOf(ev) {
-        return 'touches' in ev
-            ? (ev.touches[0]?.clientX ?? ev.changedTouches[0]?.clientX ?? 0)
-            : ev.clientX;
+    clamp01(value) {
+        return Math.max(0, Math.min(1, value));
     }
     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 }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, contentBehavior: { classPropertyName: "contentBehavior", publicName: "contentBehavior", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, swipeEdgeSize: { classPropertyName: "swipeEdgeSize", publicName: "swipeEdgeSize", isSignal: true, isRequired: false, transformFunction: null }, curtainStrips: { classPropertyName: "curtainStrips", publicName: "curtainStrips", isSignal: true, isRequired: false, transformFunction: null }, backdropClose: { classPropertyName: "backdropClose", publicName: "backdropClose", isSignal: true, isRequired: false, transformFunction: null }, swipeEnabled: { classPropertyName: "swipeEnabled", publicName: "swipeEnabled", isSignal: true, isRequired: false, transformFunction: null }, respondToViewport: { classPropertyName: "respondToViewport", publicName: "respondToViewport", 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 }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "ngx-drawer-menu-host" }, ngImport: i0, template: "<div\n  class=\"ngx-drawer-root\"\n  [class]=\"'behavior-' + contentBehavior()\"\n  [style.perspective.px]=\"1200\">\n  @if (swipeEnabled() && !open()) {\n    <div\n      class=\"ngx-drawer-edge-zone\"\n      [class.edge-start]=\"side() === 'start'\"\n      [class.edge-end]=\"side() === 'end'\"\n      [style.--ngx-drawer-edge-size]=\"swipeEdgeSize() + 'px'\"\n      (mousedown)=\"onEdgeDragStart($event)\"\n      (touchstart)=\"onEdgeDragStart($event)\"></div>\n  }\n\n  @if (visualOpen() > 0 && contentBehavior() === 'overlay') {\n    <div\n      class=\"ngx-drawer-backdrop\"\n      [style.opacity]=\"visualOpen()\"\n      [class.no-transition]=\"isDragging()\"\n      (click)=\"closeFromBackdrop()\"></div>\n  }\n\n  <div\n    class=\"ngx-drawer-main\"\n    [class.no-transition]=\"isDragging()\"\n    [style.--ngx-drawer-width]=\"width() + 'px'\"\n    [style.--ngx-drawer-open]=\"visualOpen()\"\n    [style.--ngx-drawer-dir]=\"pushDirSign()\">\n    <ng-content></ng-content>\n\n    @if (visualOpen() > 0 && contentBehavior() !== 'overlay') {\n      <div\n        class=\"ngx-drawer-main-dim\"\n        [style.opacity]=\"visualOpen() * 0.35\"\n        (click)=\"closeFromBackdrop()\"></div>\n    }\n  </div>\n\n  <aside\n    class=\"ngx-drawer-panel\"\n    [class]=\"'effect-' + effect()\"\n    [class.side-start]=\"side() === 'start'\"\n    [class.side-end]=\"side() === 'end'\"\n    [class.no-transition]=\"isDragging()\"\n    [class.is-open]=\"open()\"\n    [class.playing]=\"playEffectClass()\"\n    [style.--ngx-drawer-width]=\"width() + 'px'\"\n    [style.--ngx-drawer-open]=\"visualOpen()\"\n    role=\"dialog\"\n    aria-modal=\"true\">\n    <div\n      class=\"ngx-drawer-drag-handle\"\n      [class.edge-start]=\"side() === 'start'\"\n      [class.edge-end]=\"side() === 'end'\"\n      (mousedown)=\"onPanelDragStart($event)\"\n      (touchstart)=\"onPanelDragStart($event)\"></div>\n\n    <div class=\"ngx-drawer-content\">\n      <ng-content select=\"[drawerContent]\"></ng-content>\n    </div>\n\n    @if (effect() === 'curtain') {\n      <div\n        class=\"ngx-drawer-curtain\"\n        [class.open]=\"open()\"\n        [class.revealed]=\"visualOpen() >= 1 && !isDragging()\">\n        @for (i of strips(); track i) {\n          <div\n            class=\"ngx-drawer-strip\"\n            [class.side-start]=\"side() === 'start'\"\n            [class.side-end]=\"side() === 'end'\"\n            [style.transition-delay]=\"stripDelay(i)\"></div>\n        }\n      </div>\n    }\n  </aside>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:host{display:block;position:relative}.ngx-drawer-root{display:block;position:relative;min-block-size:100%}.ngx-drawer-edge-zone{position:fixed;inset-block:0;inline-size:var(--ngx-drawer-edge-size, 24px);z-index:1400;touch-action:pan-y}.ngx-drawer-edge-zone.edge-start{inset-inline-start:0}.ngx-drawer-edge-zone.edge-end{inset-inline-end:0}.ngx-drawer-backdrop{position:fixed;inset:0;background:#00000080;z-index:1450;transition:opacity .22s ease}.ngx-drawer-backdrop.no-transition{transition:none}.ngx-drawer-main{position:relative;min-block-size:100%;transition:transform .32s cubic-bezier(.22,.9,.32,1)}.ngx-drawer-main.no-transition{transition:none}.ngx-drawer-main-dim{position:absolute;inset:0;background:#000;pointer-events:auto;transition:opacity .22s ease}.behavior-push .ngx-drawer-main{transform:translate(calc(var(--ngx-drawer-open, 0) * var(--ngx-drawer-width, 280px) * var(--ngx-drawer-dir, 1)))}.behavior-reveal .ngx-drawer-main{transform-origin:center;border-radius:calc(var(--ngx-drawer-open, 0) * 16px);overflow:hidden;transform:scale(calc(1 - .08 * var(--ngx-drawer-open, 0))) translate(calc(var(--ngx-drawer-open, 0) * var(--ngx-drawer-width, 280px) * .28 * var(--ngx-drawer-dir, 1)))}.ngx-drawer-panel{position:fixed;inset-block:0;inline-size:var(--ngx-drawer-width, 280px);background:light-dark(#ffffff,#1c1c20);color:light-dark(#111827,#f4f4f5);z-index:1500;box-shadow:0 0 24px #00000040;overflow:hidden;transition:inset-inline-start .32s cubic-bezier(.22,.9,.32,1),inset-inline-end .32s cubic-bezier(.22,.9,.32,1),transform .32s cubic-bezier(.22,.9,.32,1),opacity .32s ease}.ngx-drawer-panel.side-start{inset-inline-start:calc((var(--ngx-drawer-open, 0) - 1) * var(--ngx-drawer-width, 280px))}.ngx-drawer-panel.side-end{inset-inline-end:calc((var(--ngx-drawer-open, 0) - 1) * var(--ngx-drawer-width, 280px))}.ngx-drawer-panel.no-transition{transition:none}.ngx-drawer-drag-handle{position:absolute;inset-block:0;inline-size:20px;z-index:2;touch-action:pan-y}.ngx-drawer-drag-handle.edge-start{inset-inline-end:-10px}.ngx-drawer-drag-handle.edge-end{inset-inline-start:-10px}.ngx-drawer-content{position:relative;block-size:100%;overflow-y:auto}.effect-scale.side-start{inset-inline-start:0;inset-inline-end:auto}.effect-scale.side-end{inset-inline-start:auto;inset-inline-end:0}.effect-scale{transform-origin:center;transform:scale(calc(.72 + .28 * var(--ngx-drawer-open, 0)));opacity:var(--ngx-drawer-open, 0);pointer-events:none}.effect-scale.is-open{pointer-events:auto}.effect-rotate3d{transform-style:preserve-3d;opacity:calc(.35 + .65 * var(--ngx-drawer-open, 0))}.effect-rotate3d.side-start{inset-inline-start:0;inset-inline-end:auto;transform-origin:left center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * -100deg))}.effect-rotate3d.side-end{inset-inline-start:auto;inset-inline-end:0;transform-origin:right center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * 100deg))}.effect-flip3d{transform-style:preserve-3d;box-shadow:0 0 30px #00000059}.effect-flip3d.side-start{inset-inline-start:0;inset-inline-end:auto;transform-origin:left center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * -115deg)) translateZ(calc((1 - var(--ngx-drawer-open, 0)) * -50px))}.effect-flip3d.side-end{inset-inline-start:auto;inset-inline-end:0;transform-origin:right center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * 115deg)) translateZ(calc((1 - var(--ngx-drawer-open, 0)) * -50px))}@keyframes ngx-drawer-jelly-open{0%{transform:scaleX(.55) skewY(4deg)}35%{transform:scaleX(1.09) skewY(-2.5deg)}55%{transform:scaleX(.96) skewY(1.5deg)}75%{transform:scaleX(1.03) skewY(-.6deg)}to{transform:scaleX(1) skewY(0)}}@keyframes ngx-drawer-jelly-close{0%{transform:scaleX(1) skewY(0)}30%{transform:scaleX(1.07) skewY(2deg)}to{transform:scaleX(.4) skewY(-5deg)}}.effect-jelly.side-start{transform-origin:left center}.effect-jelly.side-end{transform-origin:right center}.effect-jelly.playing.is-open{animation:ngx-drawer-jelly-open .62s cubic-bezier(.34,1.56,.64,1) both}.effect-jelly.playing:not(.is-open){animation:ngx-drawer-jelly-close .48s ease-in both}@keyframes ngx-drawer-pull-open{0%{transform:scaleX(.5)}60%{transform:scaleX(1.14)}to{transform:scaleX(1)}}@keyframes ngx-drawer-pull-close{0%{transform:scaleX(1)}40%{transform:scaleX(1.12)}to{transform:scaleX(.5)}}.effect-pull.side-start{transform-origin:left center}.effect-pull.side-end{transform-origin:right center}.effect-pull.playing.is-open{animation:ngx-drawer-pull-open .42s cubic-bezier(.16,1,.3,1) both}.effect-pull.playing:not(.is-open){animation:ngx-drawer-pull-close .38s ease-in both}.ngx-drawer-curtain{position:absolute;inset:0;display:flex;z-index:1;pointer-events:none}.ngx-drawer-curtain.revealed{display:none}.ngx-drawer-strip{flex:1 1 0;background:light-dark(#ffffff,#1c1c20);transform:scaleX(1);transition:transform .32s cubic-bezier(.65,0,.35,1)}.ngx-drawer-strip.side-start{transform-origin:left center}.ngx-drawer-strip.side-end{transform-origin:right center}.ngx-drawer-curtain.open .ngx-drawer-strip{transform:scaleX(0)}\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 }, 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 });
 }
 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' }, template: "<div\n  class=\"ngx-drawer-root\"\n  [class]=\"'behavior-' + contentBehavior()\"\n  [style.perspective.px]=\"1200\">\n  @if (swipeEnabled() && !open()) {\n    <div\n      class=\"ngx-drawer-edge-zone\"\n      [class.edge-start]=\"side() === 'start'\"\n      [class.edge-end]=\"side() === 'end'\"\n      [style.--ngx-drawer-edge-size]=\"swipeEdgeSize() + 'px'\"\n      (mousedown)=\"onEdgeDragStart($event)\"\n      (touchstart)=\"onEdgeDragStart($event)\"></div>\n  }\n\n  @if (visualOpen() > 0 && contentBehavior() === 'overlay') {\n    <div\n      class=\"ngx-drawer-backdrop\"\n      [style.opacity]=\"visualOpen()\"\n      [class.no-transition]=\"isDragging()\"\n      (click)=\"closeFromBackdrop()\"></div>\n  }\n\n  <div\n    class=\"ngx-drawer-main\"\n    [class.no-transition]=\"isDragging()\"\n    [style.--ngx-drawer-width]=\"width() + 'px'\"\n    [style.--ngx-drawer-open]=\"visualOpen()\"\n    [style.--ngx-drawer-dir]=\"pushDirSign()\">\n    <ng-content></ng-content>\n\n    @if (visualOpen() > 0 && contentBehavior() !== 'overlay') {\n      <div\n        class=\"ngx-drawer-main-dim\"\n        [style.opacity]=\"visualOpen() * 0.35\"\n        (click)=\"closeFromBackdrop()\"></div>\n    }\n  </div>\n\n  <aside\n    class=\"ngx-drawer-panel\"\n    [class]=\"'effect-' + effect()\"\n    [class.side-start]=\"side() === 'start'\"\n    [class.side-end]=\"side() === 'end'\"\n    [class.no-transition]=\"isDragging()\"\n    [class.is-open]=\"open()\"\n    [class.playing]=\"playEffectClass()\"\n    [style.--ngx-drawer-width]=\"width() + 'px'\"\n    [style.--ngx-drawer-open]=\"visualOpen()\"\n    role=\"dialog\"\n    aria-modal=\"true\">\n    <div\n      class=\"ngx-drawer-drag-handle\"\n      [class.edge-start]=\"side() === 'start'\"\n      [class.edge-end]=\"side() === 'end'\"\n      (mousedown)=\"onPanelDragStart($event)\"\n      (touchstart)=\"onPanelDragStart($event)\"></div>\n\n    <div class=\"ngx-drawer-content\">\n      <ng-content select=\"[drawerContent]\"></ng-content>\n    </div>\n\n    @if (effect() === 'curtain') {\n      <div\n        class=\"ngx-drawer-curtain\"\n        [class.open]=\"open()\"\n        [class.revealed]=\"visualOpen() >= 1 && !isDragging()\">\n        @for (i of strips(); track i) {\n          <div\n            class=\"ngx-drawer-strip\"\n            [class.side-start]=\"side() === 'start'\"\n            [class.side-end]=\"side() === 'end'\"\n            [style.transition-delay]=\"stripDelay(i)\"></div>\n        }\n      </div>\n    }\n  </aside>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:host{display:block;position:relative}.ngx-drawer-root{display:block;position:relative;min-block-size:100%}.ngx-drawer-edge-zone{position:fixed;inset-block:0;inline-size:var(--ngx-drawer-edge-size, 24px);z-index:1400;touch-action:pan-y}.ngx-drawer-edge-zone.edge-start{inset-inline-start:0}.ngx-drawer-edge-zone.edge-end{inset-inline-end:0}.ngx-drawer-backdrop{position:fixed;inset:0;background:#00000080;z-index:1450;transition:opacity .22s ease}.ngx-drawer-backdrop.no-transition{transition:none}.ngx-drawer-main{position:relative;min-block-size:100%;transition:transform .32s cubic-bezier(.22,.9,.32,1)}.ngx-drawer-main.no-transition{transition:none}.ngx-drawer-main-dim{position:absolute;inset:0;background:#000;pointer-events:auto;transition:opacity .22s ease}.behavior-push .ngx-drawer-main{transform:translate(calc(var(--ngx-drawer-open, 0) * var(--ngx-drawer-width, 280px) * var(--ngx-drawer-dir, 1)))}.behavior-reveal .ngx-drawer-main{transform-origin:center;border-radius:calc(var(--ngx-drawer-open, 0) * 16px);overflow:hidden;transform:scale(calc(1 - .08 * var(--ngx-drawer-open, 0))) translate(calc(var(--ngx-drawer-open, 0) * var(--ngx-drawer-width, 280px) * .28 * var(--ngx-drawer-dir, 1)))}.ngx-drawer-panel{position:fixed;inset-block:0;inline-size:var(--ngx-drawer-width, 280px);background:light-dark(#ffffff,#1c1c20);color:light-dark(#111827,#f4f4f5);z-index:1500;box-shadow:0 0 24px #00000040;overflow:hidden;transition:inset-inline-start .32s cubic-bezier(.22,.9,.32,1),inset-inline-end .32s cubic-bezier(.22,.9,.32,1),transform .32s cubic-bezier(.22,.9,.32,1),opacity .32s ease}.ngx-drawer-panel.side-start{inset-inline-start:calc((var(--ngx-drawer-open, 0) - 1) * var(--ngx-drawer-width, 280px))}.ngx-drawer-panel.side-end{inset-inline-end:calc((var(--ngx-drawer-open, 0) - 1) * var(--ngx-drawer-width, 280px))}.ngx-drawer-panel.no-transition{transition:none}.ngx-drawer-drag-handle{position:absolute;inset-block:0;inline-size:20px;z-index:2;touch-action:pan-y}.ngx-drawer-drag-handle.edge-start{inset-inline-end:-10px}.ngx-drawer-drag-handle.edge-end{inset-inline-start:-10px}.ngx-drawer-content{position:relative;block-size:100%;overflow-y:auto}.effect-scale.side-start{inset-inline-start:0;inset-inline-end:auto}.effect-scale.side-end{inset-inline-start:auto;inset-inline-end:0}.effect-scale{transform-origin:center;transform:scale(calc(.72 + .28 * var(--ngx-drawer-open, 0)));opacity:var(--ngx-drawer-open, 0);pointer-events:none}.effect-scale.is-open{pointer-events:auto}.effect-rotate3d{transform-style:preserve-3d;opacity:calc(.35 + .65 * var(--ngx-drawer-open, 0))}.effect-rotate3d.side-start{inset-inline-start:0;inset-inline-end:auto;transform-origin:left center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * -100deg))}.effect-rotate3d.side-end{inset-inline-start:auto;inset-inline-end:0;transform-origin:right center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * 100deg))}.effect-flip3d{transform-style:preserve-3d;box-shadow:0 0 30px #00000059}.effect-flip3d.side-start{inset-inline-start:0;inset-inline-end:auto;transform-origin:left center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * -115deg)) translateZ(calc((1 - var(--ngx-drawer-open, 0)) * -50px))}.effect-flip3d.side-end{inset-inline-start:auto;inset-inline-end:0;transform-origin:right center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * 115deg)) translateZ(calc((1 - var(--ngx-drawer-open, 0)) * -50px))}@keyframes ngx-drawer-jelly-open{0%{transform:scaleX(.55) skewY(4deg)}35%{transform:scaleX(1.09) skewY(-2.5deg)}55%{transform:scaleX(.96) skewY(1.5deg)}75%{transform:scaleX(1.03) skewY(-.6deg)}to{transform:scaleX(1) skewY(0)}}@keyframes ngx-drawer-jelly-close{0%{transform:scaleX(1) skewY(0)}30%{transform:scaleX(1.07) skewY(2deg)}to{transform:scaleX(.4) skewY(-5deg)}}.effect-jelly.side-start{transform-origin:left center}.effect-jelly.side-end{transform-origin:right center}.effect-jelly.playing.is-open{animation:ngx-drawer-jelly-open .62s cubic-bezier(.34,1.56,.64,1) both}.effect-jelly.playing:not(.is-open){animation:ngx-drawer-jelly-close .48s ease-in both}@keyframes ngx-drawer-pull-open{0%{transform:scaleX(.5)}60%{transform:scaleX(1.14)}to{transform:scaleX(1)}}@keyframes ngx-drawer-pull-close{0%{transform:scaleX(1)}40%{transform:scaleX(1.12)}to{transform:scaleX(.5)}}.effect-pull.side-start{transform-origin:left center}.effect-pull.side-end{transform-origin:right center}.effect-pull.playing.is-open{animation:ngx-drawer-pull-open .42s cubic-bezier(.16,1,.3,1) both}.effect-pull.playing:not(.is-open){animation:ngx-drawer-pull-close .38s ease-in both}.ngx-drawer-curtain{position:absolute;inset:0;display:flex;z-index:1;pointer-events:none}.ngx-drawer-curtain.revealed{display:none}.ngx-drawer-strip{flex:1 1 0;background:light-dark(#ffffff,#1c1c20);transform:scaleX(1);transition:transform .32s cubic-bezier(.65,0,.35,1)}.ngx-drawer-strip.side-start{transform-origin:left center}.ngx-drawer-strip.side-end{transform-origin:right center}.ngx-drawer-curtain.open .ngx-drawer-strip{transform:scaleX(0)}\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 }] }], contentBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentBehavior", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], swipeEdgeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeEdgeSize", required: false }] }], curtainStrips: [{ type: i0.Input, args: [{ isSignal: true, alias: "curtainStrips", required: false }] }], backdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClose", required: false }] }], swipeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeEnabled", required: false }] }], respondToViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "respondToViewport", required: false }] }], openOnDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnDesktop", required: false }] }], openOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnMobile", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
+            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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.