ngx-virtual-dnd 3.1.3 → 3.2.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-virtual-dnd",
-  "version": "3.1.3",
+  "version": "3.2.0-alpha.0",
   "description": "A performant drag-and-drop library for Angular that works seamlessly with virtual scrolling",
   "keywords": [
     "angular",

package/types/ngx-virtual-dnd.d.ts

@@ -116,6 +116,31 @@ interface DropEvent {
     /** Information about where the item is going */
     destination: DropDestination;
 }
+/**
+ * Event emitted by a droppable each time the placeholder moves within it during a drag,
+ * i.e. whenever items are displaced. Useful for haptic feedback on every step.
+ *
+ * Indexes use the same convention as `DropEvent.destination.index` (the insertion index
+ * the item would get if dropped now). Not emitted for the placeholder's initial position
+ * at drag start, nor when the placeholder leaves this droppable.
+ */
+interface PlaceholderMoveEvent {
+    /** Unique identifier for the dragged item */
+    draggableId: string;
+    /** ID of the droppable container the item originated from */
+    sourceDroppableId: string;
+    /** ID of the droppable the placeholder moved within */
+    droppableId: string;
+    /**
+     * Previous insertion index in this droppable, or `null` when the placeholder just entered
+     * it from elsewhere. For the first move in the source list this is the item's own index.
+     */
+    previousIndex: number | null;
+    /** New insertion index in this droppable */
+    currentIndex: number;
+    /** Optional user-provided data associated with the dragged item */
+    data?: unknown;
+}
 /**
  * Event emitted when a drag operation ends (including cancel).
  */
@@ -311,6 +336,37 @@ interface VdndVirtualViewport {
  */
 declare const VDND_VIRTUAL_VIEWPORT: InjectionToken<VdndVirtualViewport>;
 
+/**
+ * Animation settings for drag-and-drop lists.
+ */
+interface VdndAnimationConfig {
+    /**
+     * Duration (ms) of the slide animation played when items are displaced by the
+     * placeholder during a drag. `0` disables the animation.
+     * @default 200
+     */
+    shiftDuration?: number;
+    /**
+     * CSS easing function for the shift animation.
+     * @default 'cubic-bezier(0.2, 0, 0, 1)'
+     */
+    shiftEasing?: string;
+}
+/**
+ * Opt-in animation configuration. When provided, items displaced by the placeholder
+ * slide into their new position instead of jumping. Resolved through the element
+ * injector, so it can be provided app-wide or per component subtree.
+ *
+ * The animation is skipped when the user prefers reduced motion. Values are read each
+ * time an animation starts, so getters can toggle the animation at runtime.
+ *
+ * @example
+ * ```typescript
+ * providers: [{ provide: VDND_ANIMATION_CONFIG, useValue: { shiftDuration: 200 } }]
+ * ```
+ */
+declare const VDND_ANIMATION_CONFIG: InjectionToken<VdndAnimationConfig>;
+
 /**
  * Central service for managing drag-and-drop state.
  * Uses signals for reactive state management.
@@ -1111,8 +1167,10 @@ declare class VirtualSortableListComponent<T> {
     constrainToContainer: _angular_core.InputSignal<boolean>;
     /** Emits when an item is dropped on this list */
     drop: _angular_core.OutputEmitterRef<DropEvent>;
+    /** Emits each time the placeholder moves within this list (every item displacement) */
+    placeholderMove: _angular_core.OutputEmitterRef<PlaceholderMoveEvent>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<VirtualSortableListComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VirtualSortableListComponent<any>, "vdnd-sortable-list", never, { "droppableId": { "alias": "droppableId"; "required": true; "isSignal": true; }; "group": { "alias": "group"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": true; "isSignal": true; }; "dynamicItemHeight": { "alias": "dynamicItemHeight"; "required": false; "isSignal": true; }; "itemIdFn": { "alias": "itemIdFn"; "required": true; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": true; "isSignal": true; }; "trackByFn": { "alias": "trackByFn"; "required": false; "isSignal": true; }; "droppableData": { "alias": "droppableData"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "containerHeight": { "alias": "containerHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "autoScrollEnabled": { "alias": "autoScrollEnabled"; "required": false; "isSignal": true; }; "autoScrollConfig": { "alias": "autoScrollConfig"; "required": false; "isSignal": true; }; "constrainToContainer": { "alias": "constrainToContainer"; "required": false; "isSignal": true; }; }, { "drop": "drop"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VirtualSortableListComponent<any>, "vdnd-sortable-list", never, { "droppableId": { "alias": "droppableId"; "required": true; "isSignal": true; }; "group": { "alias": "group"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": true; "isSignal": true; }; "dynamicItemHeight": { "alias": "dynamicItemHeight"; "required": false; "isSignal": true; }; "itemIdFn": { "alias": "itemIdFn"; "required": true; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": true; "isSignal": true; }; "trackByFn": { "alias": "trackByFn"; "required": false; "isSignal": true; }; "droppableData": { "alias": "droppableData"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "containerHeight": { "alias": "containerHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "autoScrollEnabled": { "alias": "autoScrollEnabled"; "required": false; "isSignal": true; }; "autoScrollConfig": { "alias": "autoScrollConfig"; "required": false; "isSignal": true; }; "constrainToContainer": { "alias": "constrainToContainer"; "required": false; "isSignal": true; }; }, { "drop": "drop"; "placeholderMove": "placeholderMove"; }, never, never, true, never>;
 }
 
 /**
@@ -1409,6 +1467,11 @@ declare class DroppableDirective implements OnDestroy {
     constrainToContainer: _angular_core.InputSignal<boolean>;
     /** Emits when an item is dropped on this droppable */
     drop: _angular_core.OutputEmitterRef<DropEvent>;
+    /**
+     * Emits each time the placeholder moves within this droppable during a drag
+     * (every item displacement) — e.g. to trigger haptic feedback.
+     */
+    placeholderMove: _angular_core.OutputEmitterRef<PlaceholderMoveEvent>;
     /** Whether this droppable is currently being targeted */
     readonly isActive: _angular_core.Signal<boolean>;
     /** The current placeholder ID when this droppable is active */
@@ -1432,7 +1495,7 @@ declare class DroppableDirective implements OnDestroy {
      */
     getScrollHeight(): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DroppableDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DroppableDirective, "[vdndDroppable]", never, { "vdndDroppable": { "alias": "vdndDroppable"; "required": true; "isSignal": true; }; "vdndDroppableGroup": { "alias": "vdndDroppableGroup"; "required": false; "isSignal": true; }; "vdndDroppableData": { "alias": "vdndDroppableData"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autoScrollEnabled": { "alias": "autoScrollEnabled"; "required": false; "isSignal": true; }; "autoScrollConfig": { "alias": "autoScrollConfig"; "required": false; "isSignal": true; }; "constrainToContainer": { "alias": "constrainToContainer"; "required": false; "isSignal": true; }; }, { "drop": "drop"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DroppableDirective, "[vdndDroppable]", never, { "vdndDroppable": { "alias": "vdndDroppable"; "required": true; "isSignal": true; }; "vdndDroppableGroup": { "alias": "vdndDroppableGroup"; "required": false; "isSignal": true; }; "vdndDroppableData": { "alias": "vdndDroppableData"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autoScrollEnabled": { "alias": "autoScrollEnabled"; "required": false; "isSignal": true; }; "autoScrollConfig": { "alias": "autoScrollConfig"; "required": false; "isSignal": true; }; "constrainToContainer": { "alias": "constrainToContainer"; "required": false; "isSignal": true; }; }, { "drop": "drop"; "placeholderMove": "placeholderMove"; }, never, never, true, never>;
 }
 
 /**
@@ -1741,5 +1804,5 @@ declare function insertAt<T>(list: T[], item: T, index: number): T[];
  */
 declare function removeAt<T>(list: T[], index: number): T[];
 
-export { AutoScrollService, ContentHeaderDirective, DragPlaceholderComponent, DragPreviewComponent, DragStateService, DraggableDirective, DroppableDirective, DroppableGroupDirective, DynamicHeightStrategy, END_OF_LIST, ElementCloneService, FixedHeightStrategy, INITIAL_DRAG_STATE, KeyboardDragService, OverlayContainerService, PlaceholderComponent, PositionCalculatorService, ScrollableDirective, VDND_GROUP_TOKEN, VDND_SCROLL_CONTAINER, VDND_VIRTUAL_VIEWPORT, VirtualContentComponent, VirtualForDirective, VirtualScrollContainerComponent, VirtualSortableListComponent, VirtualViewportComponent, applyMove, insertAt, isNoOpDrop, moveItem, removeAt, reorderItems };
-export type { AutoScrollConfig, CursorPosition, DragEndEvent, DragPreviewContext, DragStartEvent, DragState, DraggedItem, DropDestination, DropEvent, DropSource, GrabOffset, PlaceholderContext, VdndGroupContext, VdndScrollContainer, VdndVirtualViewport, VirtualForContext, VirtualScrollItemContext, VirtualScrollStrategy };
+export { AutoScrollService, ContentHeaderDirective, DragPlaceholderComponent, DragPreviewComponent, DragStateService, DraggableDirective, DroppableDirective, DroppableGroupDirective, DynamicHeightStrategy, END_OF_LIST, ElementCloneService, FixedHeightStrategy, INITIAL_DRAG_STATE, KeyboardDragService, OverlayContainerService, PlaceholderComponent, PositionCalculatorService, ScrollableDirective, VDND_ANIMATION_CONFIG, VDND_GROUP_TOKEN, VDND_SCROLL_CONTAINER, VDND_VIRTUAL_VIEWPORT, VirtualContentComponent, VirtualForDirective, VirtualScrollContainerComponent, VirtualSortableListComponent, VirtualViewportComponent, applyMove, insertAt, isNoOpDrop, moveItem, removeAt, reorderItems };
+export type { AutoScrollConfig, CursorPosition, DragEndEvent, DragPreviewContext, DragStartEvent, DragState, DraggedItem, DropDestination, DropEvent, DropSource, GrabOffset, PlaceholderContext, PlaceholderMoveEvent, VdndAnimationConfig, VdndGroupContext, VdndScrollContainer, VdndVirtualViewport, VirtualForContext, VirtualScrollItemContext, VirtualScrollStrategy };