ngx-kit 6.2.0 → 7.0.0

package/types/ngx-kit-drag-resize.d.ts

@@ -0,0 +1,368 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, EventEmitter, InjectionToken, OnInit, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
+
+interface IPosition {
+    x: number;
+    y: number;
+}
+
+/**
+ * Groups multiple drop lists so items can be dragged between them without
+ * needing an explicit `connectedTo` list on every single one.
+ * Lists register themselves automatically when `NgxDropListGroup` wraps them.
+ */
+declare class DropListGroupRef {
+    readonly lists: Set<DropListRef<any>>;
+    add(list: DropListRef<any>): void;
+    remove(list: DropListRef<any>): void;
+    has(list: DropListRef<any> | null | undefined): boolean;
+}
+
+declare class PlaceHolderRef {
+    tpl?: TemplateRef<unknown>;
+    dropList?: DropListRef;
+    element?: HTMLElement;
+    private _visible;
+    attach(container: HTMLElement, source: HTMLElement, reference?: Node | null): HTMLElement;
+    detach(): void;
+    get visible(): boolean;
+}
+
+/**
+ * DropListRef is intentionally generic, while the positional sorting strategy
+ * works on DragRef<any>. The public DropList/DragRef relationship is invariant
+ * because IDropEvent<T> contains T in a callback position. Keep the strongly
+ * typed Set here, and narrow only at the DOM-local bridge / strategy boundary.
+ */
+declare class DropListRef<T = any> {
+    data?: T;
+    el: HTMLElement;
+    disableSort: boolean;
+    connectedTo: HTMLElement[];
+    dropListGroup?: DropListGroupRef | null;
+    readonly _draggables: Set<DragRef<T>>;
+    readonly onDrop: EventEmitter<IDropEvent<T>>;
+    private strategy;
+    private active;
+    private previousIndex;
+    private placeholder?;
+    addItem(item: DragRef<T>): void;
+    removeItem(item: DragRef<T>): void;
+    isConnectedTo(other: DropListRef<any>): boolean;
+    createPlaceholder(drag: DragRef<T>): PlaceHolderRef;
+    enter(drag: DragRef<T>, x?: number, y?: number): void;
+    sortItem(drag: DragRef<T>, position: IPosition): number | null;
+    finishDrag(drag: DragRef<T>): void;
+    exit(_drag: DragRef<T>): void;
+    resetSortTransforms(): void;
+    getFinalIndex(): number;
+    getItemIndex(item: DragRef<T>): number;
+    private indexOf;
+    private reset;
+    private copyPlaceholderGeometry;
+    /**
+     * The sorting strategy only needs a read-only collection of draggable refs.
+     * Using DragRef<any> at this internal boundary avoids the invariant generic
+     * relationship between DragRef<T> and DragRef<unknown>.
+     */
+    private getStrategyItems;
+    private asStrategyDrag;
+    private publishDragItems;
+}
+
+type DragAxis = 'x' | 'y' | undefined;
+declare class DragRef<T = unknown> {
+    data?: T;
+    el: HTMLElement;
+    boundary?: HTMLElement;
+    lockAxis?: DragAxis;
+    dropList: DropListRef<T> | null;
+    dropListGroup?: DropListGroupRef | null;
+    placeholder?: PlaceHolderRef;
+    originDropList: DropListRef<T> | null;
+    originIndex: number;
+    readonly isDragging: i0.WritableSignal<boolean>;
+    readonly position: i0.WritableSignal<IPosition>;
+    private startPointer;
+    private startRect;
+    private lastPointer;
+    private previousTransform;
+    private previousZIndex;
+    private moveDx;
+    private moveDy;
+    private preview?;
+    private previewOffsetX;
+    private previewOffsetY;
+    private sourceVisibility;
+    private sourceDisplay;
+    private sourcePointerEvents;
+    init(): void;
+    withDropList(list: DropListRef<T> | null): this;
+    clearDropList(): void;
+    pointerDown(pointer: IPosition): void;
+    startDrag(pointer: IPosition): void;
+    dragMove(pointer: IPosition): void;
+    nudge(dx: number, dy: number): void;
+    endDrag(): void;
+    cancelDrag(): void;
+    get x(): number;
+    get y(): number;
+    get pointer(): IPosition;
+    get start(): DOMRect;
+    getPlaceholderElement(): HTMLElement | undefined;
+    private applyTransform;
+    private updatePreview;
+}
+
+interface IDropEvent<T = any> {
+    previousIndex: number;
+    currentIndex: number;
+    item: DragRef<T>;
+    container: DropListRef<T>;
+    previousContainer: DropListRef<T>;
+    isPointerOverContainer?: boolean;
+}
+
+/** Physical (viewport-space) resize directions — always in LTR screen coordinates. */
+type ResizeDirection = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+/**
+ * Logical (writing-direction aware) resize directions.
+ * `start`/`end` resolve to `w`/`e` depending on the host's computed `direction`,
+ * so a single template works unchanged in both LTR and RTL layouts.
+ */
+type LogicalResizeDirection = ResizeDirection | 'n-start' | 'n-end' | 's-start' | 's-end' | 'start' | 'end';
+interface IResizableOutput {
+    width: number;
+    height: number;
+    moveLeft: number;
+    moveTop: number;
+    left: number;
+    top: number;
+    direction: ResizeDirection;
+}
+
+declare class DragDropService {
+    readonly drags: i0.WritableSignal<readonly DragRef<unknown>[]>;
+    readonly dropLists: i0.WritableSignal<readonly DropListRef<any>[]>;
+    readonly activeDrag: i0.WritableSignal<DragRef<unknown> | null>;
+    registerDragItem(ref: DragRef<any>): void;
+    removeDragItem(ref: DragRef<any>): void;
+    registerDropList(ref: DropListRef): void;
+    removeDropList(ref: DropListRef<any>): void;
+    begin(ref: DragRef<any>): void;
+    end(ref: DragRef<any>): void;
+    cancelActive(): void;
+    findDropList(point: {
+        x: number;
+        y: number;
+    }, current?: DropListRef | null): DropListRef | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DragDropService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DragDropService>;
+}
+
+declare const NGX_DRAGGABLE: InjectionToken<NgxDraggable<unknown>>;
+declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy {
+    private readonly host;
+    private readonly renderer;
+    disabled: boolean;
+    /** Element whose rect constrains the drag. Now actually enforced. */
+    boundary?: HTMLElement;
+    dragRootElement: string;
+    /** CSS selector for a drag handle. When set, only pointerdowns inside it start a drag. */
+    dragHandle: string;
+    /** Restrict movement to a single axis. */
+    lockAxis: DragAxis;
+    /** Minimum pointer travel (px) before a drag starts, so clicks still register normally. */
+    dragThreshold: number;
+    /** Pixel step used when dragging via the keyboard (arrow keys, focus required). */
+    keyboardStep: number;
+    /** Auto-scroll the nearest scrollable ancestor while dragging near its edge. */
+    autoScroll: boolean;
+    set data(v: T);
+    readonly dragStart: EventEmitter<IPosition>;
+    readonly dragMove: EventEmitter<IPosition>;
+    readonly dragEnd: EventEmitter<IPosition>;
+    readonly _ref: DragRef<T>;
+    readonly dragging: i0.WritableSignal<boolean>;
+    private readonly doc;
+    private readonly service;
+    private readonly list;
+    private readonly group;
+    private readonly scroller;
+    private down;
+    private start;
+    private pointerId;
+    private removeDown?;
+    private removeMove?;
+    private removeUp?;
+    private removeKeydown?;
+    private removeEscape?;
+    constructor(host: ElementRef<HTMLElement>, renderer: Renderer2);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private pointerDown;
+    private pointerMove;
+    private pointerUp;
+    private cancel;
+    private finish;
+    /** Arrow-key movement for keyboard/assistive-tech users. Shift multiplies the step by 4. */
+    private keyDown;
+    private isOnHandle;
+    private isInteractive;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDraggable<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDraggable<any>, "[NgxDraggable],[ngxDraggable]", never, { "disabled": { "alias": "disabled"; "required": false; }; "boundary": { "alias": "boundary"; "required": false; }; "dragRootElement": { "alias": "dragRootElement"; "required": false; }; "dragHandle": { "alias": "dragHandle"; "required": false; }; "lockAxis": { "alias": "lockAxis"; "required": false; }; "dragThreshold": { "alias": "dragThreshold"; "required": false; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; }; "autoScroll": { "alias": "autoScroll"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "dragStart": "dragStart"; "dragMove": "dragMove"; "dragEnd": "dragEnd"; }, never, never, true, never>;
+}
+
+declare class NgxResizable {
+    private readonly el;
+    disabled: boolean;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    directions: LogicalResizeDirection[];
+    grid?: number | {
+        x: number;
+        y: number;
+    };
+    /** Element whose rect constrains the resize. Previously accepted nowhere on this directive. */
+    boundary?: HTMLElement;
+    /** Pixel step used when resizing via the keyboard (arrow keys, focus required). */
+    keyboardStep: number;
+    readonly resizeStart: EventEmitter<IResizableOutput>;
+    readonly resizeMove: EventEmitter<IResizableOutput>;
+    readonly resizeEnd: EventEmitter<IResizableOutput>;
+    readonly resizing: i0.WritableSignal<boolean>;
+    private direction;
+    private start;
+    private pointer;
+    private beforeTransition;
+    private beforeWidth;
+    private beforeHeight;
+    private beforeTransform;
+    private pointerId;
+    constructor(el: ElementRef<HTMLElement>);
+    onPointerDown(e: PointerEvent): void;
+    onPointerMove(e: PointerEvent): void;
+    onPointerUp(e: PointerEvent): void;
+    onDocumentKeyDown(e: KeyboardEvent): void;
+    onHandleKeyDown(e: KeyboardEvent): void;
+    private calculate;
+    private apply;
+    private clampGrid;
+    private finish;
+    private resolvedDirections;
+    private hitDirection;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxResizable, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxResizable, "[NgxResizable],[ngxResizable]", never, { "disabled": { "alias": "disabled"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "directions": { "alias": "directions"; "required": false; }; "grid": { "alias": "grid"; "required": false; }; "boundary": { "alias": "boundary"; "required": false; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; }; }, { "resizeStart": "resizeStart"; "resizeMove": "resizeMove"; "resizeEnd": "resizeEnd"; }, never, never, true, never>;
+}
+
+declare const NGX_DROPLIST: InjectionToken<NgxDropList<any>>;
+declare class NgxDropList<T = any> implements OnInit, OnDestroy {
+    private readonly el;
+    readonly _ref: DropListRef<T>;
+    set data(value: T);
+    set connectedTo(value: HTMLElement[] | null | undefined);
+    set disableSort(value: boolean);
+    readonly drop: EventEmitter<IDropEvent<T>>;
+    private readonly service;
+    private readonly group;
+    constructor(el: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDropList<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDropList<any>, "[NgxDropList],[ngxDropList]", never, { "data": { "alias": "data"; "required": false; }; "connectedTo": { "alias": "connectedTo"; "required": false; }; "disableSort": { "alias": "disableSort"; "required": false; }; }, { "drop": "drop"; }, never, never, true, never>;
+}
+
+declare const NGX_DROPLIST_GROUP: InjectionToken<NgxDropListGroup>;
+/** Wrap several `ngxDropList`s to let items move freely between them. */
+declare class NgxDropListGroup implements OnDestroy {
+    readonly _ref: DropListGroupRef;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDropListGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDropListGroup, "[NgxDropListGroup],[ngxDropListGroup]", never, {}, {}, never, never, true, never>;
+}
+
+declare const NGX_PLACEHOLDER: InjectionToken<PlaceHolderRef>;
+declare class NgxPlaceholder {
+    readonly tpl: TemplateRef<unknown>;
+    readonly _ref: PlaceHolderRef;
+    private readonly list;
+    constructor(tpl: TemplateRef<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxPlaceholder, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxPlaceholder, "[NgxPlaceholder],[ngxPlaceholder]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * True when `element` sits inside a right-to-left context.
+ *
+ * Reads the *computed* `direction` style instead of `element.dir`, because
+ * `direction` is inherited and is almost never set on the resizable element
+ * itself - it's usually set on `<html>`, `<body>`, or some ancestor wrapper.
+ */
+declare function isRtl(element: HTMLElement): boolean;
+/**
+ * Resolves a logical direction ('start' | 'end' | 'n-start' | 'n-end' | 's-start' | 's-end')
+ * to a physical, viewport-space direction ('n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw')
+ * based on `rtl`.
+ *
+ * Physical directions pass through untouched, so it's always safe to call this
+ * even when `dir` might already be physical (e.g. resolving a direction that was
+ * already resolved once before).
+ */
+declare function resolveLogicalDirection(dir: string, rtl: boolean): ResizeDirection;
+
+/** Clamps a proposed vertical delta so the element's rect stays inside the boundary rect. */
+declare function checkBoundY(selfRect: DOMRect, boundaryRect: DOMRect | undefined, offsetY: number): number;
+/** Clamps a proposed horizontal delta so the element's rect stays inside the boundary rect. */
+declare function checkBoundX(selfRect: DOMRect, boundaryRect: DOMRect | undefined, offsetX: number): number;
+/**
+ * Clamps a resize result (width/height/left/top, all relative CSS px deltas from the
+ * element's start position) so the element never grows/moves outside `boundaryRect`.
+ * `startRect` is the element's `getBoundingClientRect()` captured at resize-start.
+ */
+declare function clampResizeWithinBoundary(boundaryRect: DOMRect | undefined, startRect: DOMRect, width: number, height: number, left: number, top: number): {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+};
+/** Current page zoom level (1 = 100%). Falls back to devicePixelRatio pre visualViewport. */
+declare function getPageZoom(): number;
+/** Adjusts a raw pointer-derived value for the current page zoom level. */
+declare function adjustForZoom(value: number): number;
+
+/**
+ * Auto-scrolls the nearest scrollable ancestor (or window) while the pointer
+ * is dragged near the edge of the scrollable viewport. Direction-agnostic —
+ * works the same in RTL and LTR since it operates on physical scroll deltas.
+ */
+declare class AutoScroller {
+    private raf;
+    private container;
+    private speed;
+    private readonly edge;
+    private readonly maxSpeed;
+    constructor(edge?: number, maxSpeed?: number);
+    start(fromEl: HTMLElement): void;
+    /** Call on every pointermove with the current client coordinates. */
+    update(clientX: number, clientY: number): void;
+    stop(): void;
+    private tick;
+}
+
+declare function moveItemInArray<T>(array: T[], from: number, to: number): void;
+declare function transferArrayItem<T>(src: T[], dst: T[], from: number, to: number): void;
+/**
+ * Copies an item from one array to another, leaving it in its
+ * original position in current array.
+ * @param currentArray Array from which to copy the item.
+ * @param targetArray Array into which is copy the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ *
+ */
+declare function copyArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
+
+export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, getPageZoom, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
+export type { DragAxis, IDropEvent, IPosition, IResizableOutput, LogicalResizeDirection, ResizeDirection };

package/types/ngx-kit-drawer-menu.d.ts

@@ -1,101 +1,161 @@
+import * as ngx_kit_drawer_menu from 'ngx-kit/drawer-menu';
 import * as _angular_core from '@angular/core';
 
-/**
- * از 'start'/'end' منطقی استفاده می‌کنیم نه 'left'/'right' — یعنی توی
- * RTL خودکار برعکس می‌شه (start یعنی راست در RTL، چپ در LTR)، دقیقاً هماهنگ
- * با بقیه‌ی کتابخونه که همه‌جا از پراپرتی‌های منطقیِ CSS استفاده می‌کنه.
- */
+/** Logical drawer placement. `start` is right in RTL and left in LTR. */
 type NgxDrawerSide = 'start' | 'end';
-/**
- * جلوه‌ی بازوبسته‌شدنِ خودِ پنل:
- *  - slide: اسلاید ساده‌ی کلاسیک
- *  - curtain: چند نوار عمودیِ هم‌رنگِ پنل که با تأخیرِ پلکانی جمع می‌شن و
- *    محتوا رو نمایان می‌کنن — حسِ باز شدنِ یه پرده‌ی چندلَته
- *  - jelly: بازشدن با افکتِ ژله‌ای/کشسان — چند نوسانِ فنری که رفته‌رفته
- *    فروکش می‌کنه (الهام از https://dribbble.com/shots/2307371)
- *  - pull: یه کشیدگیِ لاستیکیِ تک‌ضربه‌ای — لبه‌ی پنل از اندازه‌ی نهایی رد
- *    می‌شه و برمی‌گرده سرجاش (rubber-band)
- *  - rotate3d: چرخشِ سه‌بعدیِ دور لولا (مثل باز شدنِ یه در)، با perspective
- *  - flip3d: پنل و محتوای صفحه با هم مثل ورق‌زدنِ یه کتاب می‌چرخن
- *  - scale: بزرگ‌شدن از مرکز همراه با fade
- */
-type NgxDrawerEffect = 'slide' | 'curtain' | 'jelly' | 'pull' | 'rotate3d' | 'flip3d' | 'scale';
-/**
- * رفتار محتوای اصلیِ صفحه وقتی درور باز می‌شه:
- *  - overlay: محتوا سرجاش می‌مونه، درور روش شناور می‌شه (با بک‌دراپ)
- *  - push: محتوا به‌اندازه‌ی عرضِ درور هل داده می‌شه (کنار می‌ره)
- *  - reveal: محتوا کمی کوچیک/عقب می‌ره، انگار درور از زیرش نمایان می‌شه
- *    (همون افکت معروف iOS)
- */
-type NgxDrawerContentBehavior = 'overlay' | 'push' | 'reveal';
+/** Visual physics used by the drawer while opening/closing. */
+type NgxDrawerEffect = 'none' | 'fabric' | 'slide' | 'push' | 'scale';
+type NgxDrawerBehavior = 'dock' | 'overlay';
+type NgxDrawerResponsiveMode = 'auto' | 'desktop' | 'mobile';
+interface NgxDrawerResponsive {
+    /**
+     * auto:
+     *   breakpoint determines desktop/mobile mode
+     *
+     * desktop:
+     *   always desktop
+     *
+     * mobile:
+     *   always mobile
+     */
+    mode?: NgxDrawerResponsiveMode;
+    /**
+     * Width at which the drawer switches
+     * between desktop and mobile.
+     */
+    breakpoint?: number;
+    /**
+     * Initial/default state on desktop.
+     */
+    desktopOpen?: boolean;
+    /**
+     * Initial/default state on mobile.
+     */
+    mobileOpen?: boolean;
+    /**
+     * Desktop drawer behavior.
+     */
+    desktopBehavior?: NgxDrawerBehavior;
+    /**
+     * Mobile drawer behavior.
+     */
+    mobileBehavior?: NgxDrawerBehavior;
+    /**
+     * If true, pinned state is preserved
+     * when switching between desktop/mobile.
+     */
+    respectPinned?: boolean;
+}
+declare const DEFAULT_DRAWER_RESPONSIVE: Required<NgxDrawerResponsive>;
 
-/**
- * درور منو (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 ساده.
- */
 declare class NgxDrawerMenuComponent {
-    side: _angular_core.InputSignal<NgxDrawerSide>;
-    effect: _angular_core.InputSignal<NgxDrawerEffect>;
-    contentBehavior: _angular_core.InputSignal<NgxDrawerContentBehavior>;
-    width: _angular_core.InputSignal<number>;
-    swipeEdgeSize: _angular_core.InputSignal<number>;
-    curtainStrips: _angular_core.InputSignal<number>;
-    backdropClose: _angular_core.InputSignal<boolean>;
-    swipeEnabled: _angular_core.InputSignal<boolean>;
-    /** اگه true باشه، رد شدن از mobileBreakpoint به‌صورت زنده open رو با openOnDesktop/openOnMobile هماهنگ می‌کنه */
-    respondToViewport: _angular_core.InputSignal<boolean>;
-    openOnDesktop: _angular_core.InputSignal<boolean>;
-    openOnMobile: _angular_core.InputSignal<boolean>;
-    mobileBreakpoint: _angular_core.InputSignal<number>;
-    /** state دوطرفه‌ی باز/بسته؛ با [(open)] قابل bind هست */
-    open: _angular_core.ModelSignal<boolean>;
-    private readonly directionService;
-    private readonly doc;
+    private readonly elementRef;
+    private readonly renderer;
     private readonly destroyRef;
-    /** فقط حین یه درگِ واقعی مقدار داره؛ null یعنی از روی open() تصمیم بگیر */
-    protected readonly dragRatio: _angular_core.WritableSignal<number | null>;
-    protected readonly isDragging: _angular_core.Signal<boolean>;
-    protected readonly visualOpen: _angular_core.Signal<number>;
-    protected readonly strips: _angular_core.Signal<number[]>;
+    private readonly platformId;
+    readonly side: _angular_core.InputSignal<NgxDrawerSide>;
+    readonly effect: _angular_core.InputSignal<NgxDrawerEffect>;
+    readonly width: _angular_core.InputSignal<string | number>;
+    /**
+     * Main drawer state.
+     *
+     * Usage:
+     *
+     * [(open)]="sidebarOpen"
+     */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /**
+     * Pinned state.
+     *
+     * Useful for desktop layouts.
+     *
+     * [(pinned)]="sidebarPinned"
+     */
+    readonly pinned: _angular_core.ModelSignal<boolean>;
+    readonly responsive: _angular_core.InputSignal<NgxDrawerResponsive>;
+    /**
+     * Whether clicking backdrop closes drawer.
+     */
+    readonly closeOnBackdrop: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether Escape closes drawer.
+     */
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether body scrolling should be locked
+     * while an overlay drawer is open.
+     */
+    readonly lockBodyScroll: _angular_core.InputSignal<boolean>;
+    /**
+     * Animation duration in milliseconds.
+     */
+    readonly animationDuration: _angular_core.InputSignal<number>;
+    /**
+     * z-index.
+     */
+    readonly zIndex: _angular_core.InputSignal<number>;
+    private readonly isBrowser;
+    readonly isMobile: _angular_core.WritableSignal<boolean>;
+    readonly initialized: _angular_core.WritableSignal<boolean>;
     /**
-     * +۱ یعنی این پنل فیزیکاً روی لبه‌ی چپِ صفحه‌ست، -۱ یعنی لبه‌ی راست —
-     * برای transform:translateX() محتوای اصلی (که برخلاف inset-inline، به
-     * dir=rtl خودکار واکنش نشون نمی‌ده) لازمه. reactive هست چون هم به side()
-     * و هم به جهتِ زنده‌ی صفحه (directionService.isRtl()) وابسته‌ست.
+     * Used to avoid applying responsive defaults repeatedly.
      */
-    protected readonly pushDirSign: _angular_core.Signal<1 | -1>;
-    /** برای افکت‌های keyframe‌محور (jelly/pull) — فقط لحظه‌ی رهاشدن (نه حین درگ زنده) پخش می‌شه */
-    protected readonly playEffectClass: _angular_core.WritableSignal<boolean>;
-    private stopDrag?;
-    private dragStartX;
-    private dragStartRatio;
-    private prevOpen;
+    private previousResponsiveMode;
+    private mediaQuery?;
+    private removeMediaQueryListener?;
+    readonly responsiveConfig: _angular_core.Signal<{
+        mode: ngx_kit_drawer_menu.NgxDrawerResponsiveMode;
+        breakpoint: number;
+        desktopOpen: boolean;
+        mobileOpen: boolean;
+        desktopBehavior: NgxDrawerBehavior;
+        mobileBehavior: NgxDrawerBehavior;
+        respectPinned: boolean;
+    }>;
+    readonly currentMode: _angular_core.Signal<"desktop" | "mobile">;
+    readonly currentBehavior: _angular_core.Signal<NgxDrawerBehavior>;
+    readonly isOverlay: _angular_core.Signal<boolean>;
+    readonly isDocked: _angular_core.Signal<boolean>;
+    readonly shouldShowBackdrop: _angular_core.Signal<boolean>;
+    readonly drawerWidth: _angular_core.Signal<string>;
+    readonly drawerVisible: _angular_core.Signal<boolean>;
+    readonly shouldPreservePinned: _angular_core.Signal<boolean>;
+    readonly isPinnedAndDesktop: _angular_core.Signal<boolean>;
+    get drawerStart(): boolean;
+    get drawerEnd(): boolean;
+    get drawerOpen(): boolean;
+    get drawerMobile(): boolean;
+    get drawerDesktop(): boolean;
+    get drawerOverlay(): boolean;
+    get drawerDock(): boolean;
+    get hostWidth(): string;
+    get hostDuration(): string;
+    get hostZIndex(): number;
+    get effectNone(): boolean;
+    get effectFabric(): boolean;
+    get effectSlide(): boolean;
+    get effectPush(): boolean;
+    get effectScale(): boolean;
     constructor();
-    protected onEscape(): void;
-    protected closeFromBackdrop(): void;
+    private setupResponsive;
+    private setupMediaQuery;
+    private updateMobileState;
+    private handleResponsiveModeChange;
+    private applyInitialResponsiveState;
+    private destroyResponsive;
     toggle(): void;
-    /** true یعنی این پنل فیزیکاً روی لبه‌ی چپِ صفحه‌ست (صرف‌نظر از start/end منطقی) */
-    private isPhysicalLeftEdge;
-    protected stripDelay(index: number): string;
-    protected onEdgeDragStart(ev: MouseEvent | TouchEvent): void;
-    protected onPanelDragStart(ev: MouseEvent | TouchEvent): void;
-    private beginDrag;
-    private clientXOf;
+    openDrawer(): void;
+    close(): void;
+    pin(): void;
+    unpin(): void;
+    togglePinned(): void;
+    onBackdropClick(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private lockScroll;
+    private unlockScroll;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDrawerMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxDrawerMenuComponent, "ngx-drawer-menu", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "effect": { "alias": "effect"; "required": false; "isSignal": true; }; "contentBehavior": { "alias": "contentBehavior"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "swipeEdgeSize": { "alias": "swipeEdgeSize"; "required": false; "isSignal": true; }; "curtainStrips": { "alias": "curtainStrips"; "required": false; "isSignal": true; }; "backdropClose": { "alias": "backdropClose"; "required": false; "isSignal": true; }; "swipeEnabled": { "alias": "swipeEnabled"; "required": false; "isSignal": true; }; "respondToViewport": { "alias": "respondToViewport"; "required": false; "isSignal": true; }; "openOnDesktop": { "alias": "openOnDesktop"; "required": false; "isSignal": true; }; "openOnMobile": { "alias": "openOnMobile"; "required": false; "isSignal": true; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[drawerContent]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxDrawerMenuComponent, "ngx-drawer-menu", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "effect": { "alias": "effect"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "pinned": { "alias": "pinned"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "lockBodyScroll": { "alias": "lockBodyScroll"; "required": false; "isSignal": true; }; "animationDuration": { "alias": "animationDuration"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "pinned": "pinnedChange"; }, never, ["[drawerContent]", "*"], true, never>;
 }
 
-export { NgxDrawerMenuComponent };
-export type { NgxDrawerContentBehavior, NgxDrawerEffect, NgxDrawerSide };
+export { DEFAULT_DRAWER_RESPONSIVE, NgxDrawerMenuComponent };
+export type { NgxDrawerBehavior, NgxDrawerEffect, NgxDrawerResponsive, NgxDrawerResponsiveMode, NgxDrawerSide };