ngx-kit 7.4.0 → 8.0.1

package/drawer-menu/README.md

@@ -1,125 +0,0 @@
-# ngx-kit/drawer-menu
-
-A gesture-first Angular navigation drawer designed for desktop and mobile.
-
-## Highlights
-
-- Logical `start` / `end` placement with RTL/LTR support.
-- Mouse + touch + pen drag using Pointer Events.
-- Open from the screen edge when closed.
-- Drag the drawer itself to close it.
-- Live 0..1 gesture progress — effects react while dragging.
-- Fabric / curtain / spring / elastic effects.
-- `overlay`, `push`, and `reveal` content modes.
-- Desktop/mobile responsive state.
-- True docked desktop sidebar: open means it occupies layout space and clicking the page never closes it.
-- Mobile overlay behavior with backdrop and edge swipe.
-- Pin/unpin support.
-- Controlled state with `[(open)]`.
-- Reduced-motion support.
-- Escape and backdrop closing.
-
-## Recommended configuration
-
-```html
-<ngx-drawer-menu
-  side="start"
-  mode="push"
-  effect="fabric"
-  [width]="300"
-  [openOnDesktop]="true"
-  [openOnMobile]="false"
-  [mobileBreakpoint]="960"
-  [(open)]="drawerOpen"
-  [(pinned)]="drawerPinned">
-  <router-outlet />
-
-  <div drawerContent>
-    <!-- navigation -->
-  </div>
-</ngx-drawer-menu>
-```
-
-## Behavior model
-
-The drawer owns one continuous `progress` value between `0` and `1`.
-
-- `0`: fully closed.
-- `1`: fully open.
-- Pointer dragging directly changes progress.
-- On release, velocity and the configured threshold decide the final state.
-
-This is the key to getting a physical-feeling drawer instead of a drawer that simply jumps between CSS classes.
-
-## Inputs
-
-| Input               | Default   | Purpose                                                      |
-| ------------------- | --------- | ------------------------------------------------------------ |
-| `side`              | `start`   | Logical drawer side.                                         |
-| `mode`              | `overlay` | `overlay`, `push`, or `reveal`.                              |
-| `effect`            | `fabric`  | `slide`, `spring`, `fabric`, `curtain`, `elastic`, `reveal`. |
-| `width`             | `300`     | Drawer width in px.                                          |
-| `maxWidth`          | `420`     | Safety cap for drawer width.                                 |
-| `edgeSize`          | `34`      | Edge swipe activation area.                                  |
-| `swipeEnabled`      | `true`    | Enables gesture interaction.                                 |
-| `backdropClose`     | `true`    | Close on backdrop press.                                     |
-| `escapeClose`       | `true`    | Close on Escape.                                             |
-| `open`              | `true`    | Two-way state via `[(open)]`.                                |
-| `pinned`            | `false`   | Persistent drawer state via `[(pinned)]`.                    |
-| `mobileBreakpoint`  | `768`     | Mobile breakpoint.                                           |
-| `openOnDesktop`     | `true`    | State on desktop.                                            |
-| `openOnMobile`      | `false`   | State on mobile/tablet.                                      |
-| `respondToViewport` | `true`    | Enables live responsive switching.                           |
-| `transitionMs`      | `420`     | Settle animation duration.                                   |
-
-## Responsive behavior
-
-By default:
-
-- Desktop >= 768px: open.
-- Mobile < 768px: closed.
-- Crossing the breakpoint updates the drawer live.
-- A pinned drawer is not closed by responsive rules.
-
-A full `responsive` object is also available when a single config object is preferable:
-
-```html
-<ngx-drawer-menu
-  [responsive]="{
-    mode: 'auto',
-    breakpoint: 960,
-    desktopOpen: true,
-    mobileOpen: false,
-    respectPinned: true
-  }"></ngx-drawer-menu>
-```
-
-## Recommended responsive behavior
-
-When `respondToViewport` is enabled, the drawer uses a real sidebar on desktop and an overlay drawer on mobile by default:
-
-```html
-<ngx-drawer-menu
-  side="start"
-  [responsive]="{
-    mode: 'auto',
-    breakpoint: 960,
-    desktopOpen: true,
-    mobileOpen: false,
-    desktopBehavior: 'dock',
-    mobileBehavior: 'overlay',
-    respectPinned: true
-  }"
-  effect="fabric"
-  [width]="300">
-  <router-outlet />
-  <nav drawerContent>...</nav>
-</ngx-drawer-menu>
-```
-
-In this setup:
-
-- `>= 960px`: the open drawer is a real docked sidebar; it owns layout width and does not create a backdrop.
-- `< 960px`: the drawer is an overlay; the page is dimmed and clicking the backdrop can close it.
-- On desktop the drawer can still be dragged closed from its full-height edge handle.
-- When closed, the screen edge remains a mouse/touch drag target and opens the drawer.

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

@@ -1,456 +0,0 @@
-import * as i0 from '@angular/core';
-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,
-};
-
-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('fabric', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effect" }] : /* istanbul ignore next */ []));
-    width = input(300, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    /**
-     * Main drawer state.
-     *
-     * Usage:
-     *
-     * [(open)]="sidebarOpen"
-     */
-    open = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    /**
-     * 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.
-     */
-    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() {
-        this.setupResponsive();
-        effect(() => {
-            const mode = this.currentMode();
-            if (!this.initialized()) {
-                return;
-            }
-            this.handleResponsiveModeChange(mode);
-        });
-        effect(() => {
-            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();
-        });
-    }
-    // ---------------------------------------------------------------------------
-    // Responsive
-    // ---------------------------------------------------------------------------
-    setupResponsive() {
-        if (!this.isBrowser) {
-            return;
-        }
-        afterNextRender(() => {
-            this.setupMediaQuery();
-            this.initialized.set(true);
-            const mode = this.currentMode();
-            this.previousResponsiveMode = mode;
-            this.applyInitialResponsiveState(mode);
-        });
-    }
-    setupMediaQuery() {
-        const config = this.responsiveConfig();
-        if (config.mode !== 'auto' || this.isBrowser) {
-            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 }, 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, 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 { DEFAULT_DRAWER_RESPONSIVE, NgxDrawerMenuComponent };
-//# sourceMappingURL=ngx-kit-drawer-menu.mjs.map