angular-draggable-droppable/index.d.ts

Drag and drop for angular 20.0+

import * as i0 from '@angular/core';
import { OnInit, OnChanges, OnDestroy, TemplateRef, EventEmitter, SimpleChanges, ElementRef } from '@angular/core';
import { ReplaySubject, Subject, Subscription } from 'rxjs';

interface Coordinates {
    x: number;
    y: number;
}
interface DragAxis {
    x: boolean;
    y: boolean;
}
interface SnapGrid {
    x?: number;
    y?: number;
}
interface DragPointerDownEvent extends Coordinates {
}
interface DragStartEvent {
    cancelDrag$: ReplaySubject<void>;
}
interface DragMoveEvent extends Coordinates {
}
interface DragEndEvent extends Coordinates {
    dragCancelled: boolean;
}
interface ValidateDragParams extends Coordinates {
    transform: {
        x: number;
        y: number;
    };
}
type ValidateDrag = (params: ValidateDragParams) => boolean;
interface PointerEvent {
    clientX: number;
    clientY: number;
    event: MouseEvent | TouchEvent;
}
interface GhostElementCreatedEvent {
    clientX: number;
    clientY: number;
    element: HTMLElement;
}
declare class DraggableDirective implements OnInit, OnChanges, OnDestroy {
    /**
     * an object of data you can pass to the drop event
     */
    dropData: any;
    /**
     * The axis along which the element is draggable
     */
    dragAxis: DragAxis;
    /**
     * Snap all drags to an x / y grid
     */
    dragSnapGrid: SnapGrid;
    /**
     * Show a ghost element that shows the drag when dragging
     */
    ghostDragEnabled: boolean;
    /**
     * Show the original element when ghostDragEnabled is true
     */
    showOriginalElementWhileDragging: boolean;
    /**
     * Allow custom behaviour to control when the element is dragged
     */
    validateDrag: ValidateDrag;
    /**
     * The cursor to use when hovering over a draggable element
     */
    dragCursor: string;
    /**
     * The css class to apply when the element is being dragged
     */
    dragActiveClass: string;
    /**
     * The element the ghost element will be appended to. Default is next to the dragged element
     */
    ghostElementAppendTo: HTMLElement;
    /**
     * An ng-template to be inserted into the parent element of the ghost element. It will overwrite any child nodes.
     */
    ghostElementTemplate: TemplateRef<any>;
    /**
     * Amount of milliseconds to wait on touch devices before starting to drag the element (so that you can scroll the page by touching a draggable element)
     */
    touchStartLongPress: {
        delay: number;
        delta: number;
    };
    autoScroll: {
        margin: number | {
            top?: number;
            left?: number;
            right?: number;
            bottom?: number;
        };
        maxSpeed?: number | {
            top?: number;
            left?: number;
            right?: number;
            bottom?: number;
        };
        scrollWhenOutside?: boolean;
    };
    /**
     * Called when the element can be dragged along one axis and has the mouse or pointer device pressed on it
     */
    dragPointerDown: EventEmitter<DragPointerDownEvent>;
    /**
     * Called when the element has started to be dragged.
     * Only called after at least one mouse or touch move event.
     * If you call $event.cancelDrag$.emit() it will cancel the current drag
     */
    dragStart: EventEmitter<DragStartEvent>;
    /**
     * Called after the ghost element has been created
     */
    ghostElementCreated: EventEmitter<GhostElementCreatedEvent>;
    /**
     * Called when the element is being dragged
     */
    dragging: EventEmitter<DragMoveEvent>;
    /**
     * Called after the element is dragged
     */
    dragEnd: EventEmitter<DragEndEvent>;
    /**
     * @hidden
     */
    pointerDown$: Subject<PointerEvent>;
    /**
     * @hidden
     */
    pointerMove$: Subject<PointerEvent>;
    /**
     * @hidden
     */
    pointerUp$: Subject<PointerEvent>;
    private eventListenerSubscriptions;
    private ghostElement;
    private destroy$;
    private timeLongPress;
    private scroller;
    private element;
    private renderer;
    private draggableHelper;
    private zone;
    private vcr;
    private scrollContainer;
    private document;
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    ngOnDestroy(): void;
    private checkEventListeners;
    private onMouseDown;
    private onMouseUp;
    private onTouchStart;
    private onTouchEnd;
    private onMouseEnter;
    private onMouseLeave;
    private canDrag;
    private setCursor;
    private unsubscribeEventListeners;
    private setElementStyles;
    private getScrollElement;
    private getScrollPosition;
    private shouldBeginDrag;
    private enableScroll;
    private disableScroll;
    private hasScrollbar;
    static ɵfac: i0.ɵɵFactoryDeclaration<DraggableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DraggableDirective, "[mwlDraggable]", never, { "dropData": { "alias": "dropData"; "required": false; }; "dragAxis": { "alias": "dragAxis"; "required": false; }; "dragSnapGrid": { "alias": "dragSnapGrid"; "required": false; }; "ghostDragEnabled": { "alias": "ghostDragEnabled"; "required": false; }; "showOriginalElementWhileDragging": { "alias": "showOriginalElementWhileDragging"; "required": false; }; "validateDrag": { "alias": "validateDrag"; "required": false; }; "dragCursor": { "alias": "dragCursor"; "required": false; }; "dragActiveClass": { "alias": "dragActiveClass"; "required": false; }; "ghostElementAppendTo": { "alias": "ghostElementAppendTo"; "required": false; }; "ghostElementTemplate": { "alias": "ghostElementTemplate"; "required": false; }; "touchStartLongPress": { "alias": "touchStartLongPress"; "required": false; }; "autoScroll": { "alias": "autoScroll"; "required": false; }; }, { "dragPointerDown": "dragPointerDown"; "dragStart": "dragStart"; "ghostElementCreated": "ghostElementCreated"; "dragging": "dragging"; "dragEnd": "dragEnd"; }, never, never, true, never>;
}

interface DropEvent<T = any> {
    dropData: T;
    /**
     * ClientX value of the mouse location where the drop occurred
     */
    clientX: number;
    /**
     * ClientY value of the mouse location where the drop occurred
     */
    clientY: number;
    /**
     * The target of the event where the drop occurred
     */
    target: EventTarget;
}
interface ValidateDropParams extends DropEvent {
}
type ValidateDrop = (params: ValidateDropParams) => boolean;
declare class DroppableDirective implements OnInit, OnDestroy {
    /**
     * Added to the element when an element is dragged over it
     */
    dragOverClass: string;
    /**
     * Added to the element any time a draggable element is being dragged
     */
    dragActiveClass: string;
    /**
     * Allow custom behaviour to control when the element is dropped
     */
    validateDrop: ValidateDrop;
    /**
     * Called when a draggable element starts overlapping the element
     */
    dragEnter: EventEmitter<DropEvent<any>>;
    /**
     * Called when a draggable element stops overlapping the element
     */
    dragLeave: EventEmitter<DropEvent<any>>;
    /**
     * Called when a draggable element is moved over the element
     */
    dragOver: EventEmitter<DropEvent<any>>;
    /**
     * Called when a draggable element is dropped on this element
     */
    drop: EventEmitter<DropEvent<any>>;
    currentDragSubscription: Subscription;
    private element;
    private draggableHelper;
    private zone;
    private renderer;
    private scrollContainer;
    ngOnInit(): void;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DroppableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DroppableDirective, "[mwlDroppable]", never, { "dragOverClass": { "alias": "dragOverClass"; "required": false; }; "dragActiveClass": { "alias": "dragActiveClass"; "required": false; }; "validateDrop": { "alias": "validateDrop"; "required": false; }; }, { "dragEnter": "dragEnter"; "dragLeave": "dragLeave"; "dragOver": "dragOver"; "drop": "drop"; }, never, never, true, never>;
}

/**
 * If the window isn't scrollable, then place this on the scrollable container that draggable elements are inside. e.g.
 * ```html
  <div style="overflow: scroll" mwlDraggableScrollContainer>
    <div mwlDraggable>Drag me!</div>
  </div>
  ```
 */
declare class DraggableScrollContainerDirective {
    elementRef: ElementRef<HTMLElement>;
    static ɵfac: i0.ɵɵFactoryDeclaration<DraggableScrollContainerDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DraggableScrollContainerDirective, "[mwlDraggableScrollContainer]", never, {}, {}, never, never, true, never>;
}

/**
 * @deprecated import the standalone `DraggableDirective` and `DroppableDirective` directives instead
 */
declare class DragAndDropModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<DragAndDropModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<DragAndDropModule, never, [typeof DraggableDirective, typeof DroppableDirective, typeof DraggableScrollContainerDirective], [typeof DraggableDirective, typeof DroppableDirective, typeof DraggableScrollContainerDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<DragAndDropModule>;
}

export { DragAndDropModule, DraggableDirective, DraggableScrollContainerDirective, DroppableDirective };
export type { DragEndEvent, DragMoveEvent, DragPointerDownEvent, DragStartEvent, DropEvent, GhostElementCreatedEvent, ValidateDrag, ValidateDragParams, ValidateDrop, ValidateDropParams };