ngx-kit 6.2.0 → 7.0.0

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

@@ -1,190 +1,456 @@
 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 { 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,
+};
 
-/**
- * درور منو (side drawer) با ۶ جلوه‌ی بازوبسته‌شدنِ متفاوت (از ساده تا
- * سه‌بعدی/ژله‌ای) و ۳ رفتار برای محتوای صفحه (overlay/push/reveal) —
- * دقیقاً مدل کتابخونه‌های حرفه‌ای مثل react-burger-menu یا Ionic Menu، ولی
- * signal-based و بدون هیچ وابستگی خارجی.
- *
- * نکات معماری:
- *  - از 'start'/'end' منطقی استفاده می‌کنه، پس با CSS logical properties
- *    زیر RTL خودکار برعکس می‌شه؛ فقط ریاضیِ درگ (که برخلاف CSS جهت فیزیکیِ
- *    واقعی لازم داره) از DirectionService مشترک استفاده می‌کنه.
- *  - وضعیت باز/بسته با model() دوطرفه‌ست، پس هم با [(open)] قابل کنترله و
- *    هم می‌تونه به‌صورت خودکار و زنده با عرض صفحه هماهنگ بشه (respondToViewport)
- *    — یعنی رد شدن از breakpoint (نه فقط بار اول لود) می‌تونه خودکار باز/بسته‌ش کنه.
- *  - افکت‌های jelly/pull با keyframe سه‌مرحله‌ای (overshoot → نوسان → استقرار)
- *    پیاده شدن، نه فقط یه transition ساده.
- */
 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 */ []));
-    effect = input('slide', /* @ts-ignore */
+    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 */ []));
-    swipeEnabled = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "swipeEnabled" }] : /* istanbul ignore next */ []));
-    /** اگه true باشه، رد شدن از mobileBreakpoint به‌صورت زنده open رو با openOnDesktop/openOnMobile هماهنگ می‌کنه */
-    respondToViewport = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "respondToViewport" }] : /* 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 هست */
+    /**
+     * Main drawer state.
+     *
+     * Usage:
+     *
+     * [(open)]="sidebarOpen"
+     */
     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 */
-    ...(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 */
-    ...(ngDevMode ? [{ debugName: "strips" }] : /* istanbul ignore next */ []));
     /**
-     * +۱ یعنی این پنل فیزیکاً روی لبه‌ی چپِ صفحه‌ست، -۱ یعنی لبه‌ی راست —
-     * برای transform:translateX() محتوای اصلی (که برخلاف inset-inline، به
-     * dir=rtl خودکار واکنش نشون نمی‌ده) لازمه. reactive هست چون هم به side()
-     * و هم به جهتِ زنده‌ی صفحه (directionService.isRtl()) وابسته‌ست.
+     * Pinned state.
+     *
+     * Useful for desktop layouts.
+     *
+     * [(pinned)]="sidebarPinned"
+     */
+    pinned = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
+    responsive = input(DEFAULT_DRAWER_RESPONSIVE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "responsive" }] : /* 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.
      */
-    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;
-    dragStartX = 0;
-    dragStartRatio = 0;
-    prevOpen = false;
+    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 */ []));
+    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';
+        }
+        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: "isDocked" }] : /* istanbul ignore next */ []));
+    shouldShowBackdrop = computed(() => {
+        return this.isOverlay() && this.open();
+    }, /* @ts-ignore */
+    ...(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: "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() {
-        // قفل اسکرول پس‌زمینه حین باز بودن پنل (فقط در حالت 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;
-                });
+        this.setupResponsive();
+        effect(() => {
+            const mode = this.currentMode();
+            if (!this.initialized()) {
+                return;
             }
+            this.handleResponsiveModeChange(mode);
         });
-        // پخش انیمیشن 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 shouldLock = this.lockBodyScroll();
+            const shouldLockNow = this.isOverlay() && this.open();
+            if (!shouldLock) {
+                return;
+            }
+            if (shouldLockNow) {
+                this.lockScroll();
             }
+            else {
+                this.unlockScroll();
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            this.destroyResponsive();
+            this.unlockScroll();
         });
-        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);
-    }
-    closeFromBackdrop() {
-        if (this.backdropClose())
-            this.open.set(false);
     }
-    toggle() {
-        this.open.update((o) => !o);
-    }
-    /** true یعنی این پنل فیزیکاً روی لبه‌ی چپِ صفحه‌ست (صرف‌نظر از start/end منطقی) */
-    isPhysicalLeftEdge() {
-        const isRtl = this.directionService.isRtl();
-        return this.side() === 'start' ? !isRtl : isRtl;
-    }
-    stripDelay(index) {
-        const count = this.curtainStrips();
-        const order = this.open() ? index : count - 1 - index;
-        return `${order * 28}ms`;
-    }
-    // ---------- درگ (هم برای باز کردن از لبه، هم بستن با کشیدنِ پنل) ----------
-    onEdgeDragStart(ev) {
-        if (!this.swipeEnabled() || this.open())
-            return;
-        this.beginDrag(ev, 0);
-    }
-    onPanelDragStart(ev) {
-        if (!this.open())
-            return;
-        this.beginDrag(ev, 1);
-    }
-    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;
-            },
+    // ---------------------------------------------------------------------------
+    // Responsive
+    // ---------------------------------------------------------------------------
+    setupResponsive() {
+        if (!this.isBrowser) {
+            return;
+        }
+        afterNextRender(() => {
+            this.setupMediaQuery();
+            this.initialized.set(true);
+            const mode = this.currentMode();
+            this.previousResponsiveMode = mode;
+            this.applyInitialResponsiveState(mode);
         });
     }
-    clientXOf(ev) {
-        return 'touches' in ev
-            ? (ev.touches[0]?.clientX ?? ev.changedTouches[0]?.clientX ?? 0)
-            : ev.clientX;
+    setupMediaQuery() {
+        const config = this.responsiveConfig();
+        if (config.mode !== 'auto') {
+            this.isMobile.set(config.mode === 'mobile');
+            return;
+        }
+        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);
+    }
+    close() {
+        if (this.pinned() && this.isPinnedAndDesktop()) {
+            return;
+        }
+        this.open.set(false);
+    }
+    pin() {
+        this.pinned.set(true);
+        this.open.set(true);
+    }
+    unpin() {
+        this.pinned.set(false);
+    }
+    togglePinned() {
+        if (this.pinned()) {
+            this.unpin();
+        }
+        else {
+            this.pin();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Events
+    // ---------------------------------------------------------------------------
+    onBackdropClick() {
+        if (!this.closeOnBackdrop()) {
+            return;
+        }
+        this.close();
+    }
+    onKeyDown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        if (!this.closeOnEscape()) {
+            return;
+        }
+        if (!this.open()) {
+            return;
+        }
+        this.close();
+    }
+    // ---------------------------------------------------------------------------
+    // Scroll locking
+    // ---------------------------------------------------------------------------
+    lockScroll() {
+        if (!this.isBrowser) {
+            return;
+        }
+        if (!document.body) {
+            return;
+        }
+        if (document.body.dataset['ngxDrawerScrollLocked'] === 'true') {
+            return;
+        }
+        this.renderer.setAttribute(document.body, 'data-ngx-drawer-scroll-locked', 'true');
+        this.renderer.setStyle(document.body, 'overflow', 'hidden');
+    }
+    unlockScroll() {
+        if (!this.isBrowser) {
+            return;
+        }
+        if (!document.body) {
+            return;
+        }
+        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 }, 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\r\n  class=\"ngx-drawer-root\"\r\n  [class]=\"'behavior-' + contentBehavior()\"\r\n  [style.perspective.px]=\"1200\">\r\n  @if (swipeEnabled() && !open()) {\r\n    <div\r\n      class=\"ngx-drawer-edge-zone\"\r\n      [class.edge-start]=\"side() === 'start'\"\r\n      [class.edge-end]=\"side() === 'end'\"\r\n      [style.--ngx-drawer-edge-size]=\"swipeEdgeSize() + 'px'\"\r\n      (mousedown)=\"onEdgeDragStart($event)\"\r\n      (touchstart)=\"onEdgeDragStart($event)\"></div>\r\n  }\r\n\r\n  @if (visualOpen() > 0 && contentBehavior() === 'overlay') {\r\n    <div\r\n      class=\"ngx-drawer-backdrop\"\r\n      [style.opacity]=\"visualOpen()\"\r\n      [class.no-transition]=\"isDragging()\"\r\n      (click)=\"closeFromBackdrop()\"></div>\r\n  }\r\n\r\n  <div\r\n    class=\"ngx-drawer-main\"\r\n    [class.no-transition]=\"isDragging()\"\r\n    [style.--ngx-drawer-width]=\"width() + 'px'\"\r\n    [style.--ngx-drawer-open]=\"visualOpen()\"\r\n    [style.--ngx-drawer-dir]=\"pushDirSign()\">\r\n    <ng-content></ng-content>\r\n\r\n    @if (visualOpen() > 0 && contentBehavior() !== 'overlay') {\r\n      <div\r\n        class=\"ngx-drawer-main-dim\"\r\n        [style.opacity]=\"visualOpen() * 0.35\"\r\n        (click)=\"closeFromBackdrop()\"></div>\r\n    }\r\n  </div>\r\n\r\n  <aside\r\n    class=\"ngx-drawer-panel\"\r\n    [class]=\"'effect-' + effect()\"\r\n    [class.side-start]=\"side() === 'start'\"\r\n    [class.side-end]=\"side() === 'end'\"\r\n    [class.no-transition]=\"isDragging()\"\r\n    [class.is-open]=\"open()\"\r\n    [class.playing]=\"playEffectClass()\"\r\n    [style.--ngx-drawer-width]=\"width() + 'px'\"\r\n    [style.--ngx-drawer-open]=\"visualOpen()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\">\r\n    <div\r\n      class=\"ngx-drawer-drag-handle\"\r\n      [class.edge-start]=\"side() === 'start'\"\r\n      [class.edge-end]=\"side() === 'end'\"\r\n      (mousedown)=\"onPanelDragStart($event)\"\r\n      (touchstart)=\"onPanelDragStart($event)\"></div>\r\n\r\n    <div class=\"ngx-drawer-content\">\r\n      <ng-content select=\"[drawerContent]\"></ng-content>\r\n    </div>\r\n\r\n    @if (effect() === 'curtain') {\r\n      <div\r\n        class=\"ngx-drawer-curtain\"\r\n        [class.open]=\"open()\"\r\n        [class.revealed]=\"visualOpen() >= 1 && !isDragging()\">\r\n        @for (i of strips(); track i) {\r\n          <div\r\n            class=\"ngx-drawer-strip\"\r\n            [class.side-start]=\"side() === 'start'\"\r\n            [class.side-end]=\"side() === 'end'\"\r\n            [style.transition-delay]=\"stripDelay(i)\"></div>\r\n        }\r\n      </div>\r\n    }\r\n  </aside>\r\n</div>\r\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 }, 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' }, template: "<div\r\n  class=\"ngx-drawer-root\"\r\n  [class]=\"'behavior-' + contentBehavior()\"\r\n  [style.perspective.px]=\"1200\">\r\n  @if (swipeEnabled() && !open()) {\r\n    <div\r\n      class=\"ngx-drawer-edge-zone\"\r\n      [class.edge-start]=\"side() === 'start'\"\r\n      [class.edge-end]=\"side() === 'end'\"\r\n      [style.--ngx-drawer-edge-size]=\"swipeEdgeSize() + 'px'\"\r\n      (mousedown)=\"onEdgeDragStart($event)\"\r\n      (touchstart)=\"onEdgeDragStart($event)\"></div>\r\n  }\r\n\r\n  @if (visualOpen() > 0 && contentBehavior() === 'overlay') {\r\n    <div\r\n      class=\"ngx-drawer-backdrop\"\r\n      [style.opacity]=\"visualOpen()\"\r\n      [class.no-transition]=\"isDragging()\"\r\n      (click)=\"closeFromBackdrop()\"></div>\r\n  }\r\n\r\n  <div\r\n    class=\"ngx-drawer-main\"\r\n    [class.no-transition]=\"isDragging()\"\r\n    [style.--ngx-drawer-width]=\"width() + 'px'\"\r\n    [style.--ngx-drawer-open]=\"visualOpen()\"\r\n    [style.--ngx-drawer-dir]=\"pushDirSign()\">\r\n    <ng-content></ng-content>\r\n\r\n    @if (visualOpen() > 0 && contentBehavior() !== 'overlay') {\r\n      <div\r\n        class=\"ngx-drawer-main-dim\"\r\n        [style.opacity]=\"visualOpen() * 0.35\"\r\n        (click)=\"closeFromBackdrop()\"></div>\r\n    }\r\n  </div>\r\n\r\n  <aside\r\n    class=\"ngx-drawer-panel\"\r\n    [class]=\"'effect-' + effect()\"\r\n    [class.side-start]=\"side() === 'start'\"\r\n    [class.side-end]=\"side() === 'end'\"\r\n    [class.no-transition]=\"isDragging()\"\r\n    [class.is-open]=\"open()\"\r\n    [class.playing]=\"playEffectClass()\"\r\n    [style.--ngx-drawer-width]=\"width() + 'px'\"\r\n    [style.--ngx-drawer-open]=\"visualOpen()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\">\r\n    <div\r\n      class=\"ngx-drawer-drag-handle\"\r\n      [class.edge-start]=\"side() === 'start'\"\r\n      [class.edge-end]=\"side() === 'end'\"\r\n      (mousedown)=\"onPanelDragStart($event)\"\r\n      (touchstart)=\"onPanelDragStart($event)\"></div>\r\n\r\n    <div class=\"ngx-drawer-content\">\r\n      <ng-content select=\"[drawerContent]\"></ng-content>\r\n    </div>\r\n\r\n    @if (effect() === 'curtain') {\r\n      <div\r\n        class=\"ngx-drawer-curtain\"\r\n        [class.open]=\"open()\"\r\n        [class.revealed]=\"visualOpen() >= 1 && !isDragging()\">\r\n        @for (i of strips(); track i) {\r\n          <div\r\n            class=\"ngx-drawer-strip\"\r\n            [class.side-start]=\"side() === 'start'\"\r\n            [class.side-end]=\"side() === 'end'\"\r\n            [style.transition-delay]=\"stripDelay(i)\"></div>\r\n        }\r\n      </div>\r\n    }\r\n  </aside>\r\n</div>\r\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, 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