igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
548 lines (547 loc) • 17.8 kB
TypeScript
import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2, ChangeDetectorRef } from '@angular/core';
import { Subject } from 'rxjs';
export declare enum RestrictDrag {
VERTICALLY = 0,
HORIZONTALLY = 1,
NONE = 2
}
export declare class IgxDragCustomEventDetails {
startX: number;
startY: number;
pageX: number;
pageY: number;
owner: IgxDragDirective;
originalEvent: any;
}
export declare class IgxDropEnterEventArgs {
/**
* Reference to the original event that caused the draggable element to enter the igxDrop element.
* Can be PointerEvent, TouchEvent or MouseEvent.
*/
originalEvent: any;
/** The owner igxDrop directive that triggered this event. */
owner: IgxDropDirective;
/** The igxDrag directive instanced on an element that entered the area of the igxDrop element */
drag: IgxDragDirective;
/** The data contained for the draggable element in igxDrag directive. */
dragData: any;
/** The initial position of the pointer on X axis when the dragged element began moving */
startX: number;
/** The initial position of the pointer on Y axis when the dragged element began moving */
startY: number;
/**
* The current position of the pointer on X axis when the event was triggered.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
pageX: number;
/**
* The current position of the pointer on Y axis when the event was triggered.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
pageY: number;
/**
* The current position of the pointer on X axis relative to the container that initializes the igxDrop.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
offsetX: number;
/**
* The current position of the pointer on Y axis relative to the container that initializes the igxDrop.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
offsetY: number;
}
export declare class IgxDropLeaveEventArgs {
/**
* Reference to the original event that caused the draggable element to enter the igxDrop element.
* Can be PointerEvent, TouchEvent or MouseEvent.
*/
originalEvent: any;
/** The owner igxDrop directive that triggered this event. */
owner: IgxDropDirective;
/** The igxDrag directive instanced on an element that entered the area of the igxDrop element */
drag: IgxDragDirective;
/** The data contained for the draggable element in igxDrag directive. */
dragData: any;
/** The initial position of the pointer on X axis when the dragged element began moving */
startX: number;
/** The initial position of the pointer on Y axis when the dragged element began moving */
startY: number;
/**
* The current position of the pointer on X axis when the event was triggered.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
pageX: number;
/**
* The current position of the pointer on Y axis when the event was triggered.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
pageY: number;
/**
* The current position of the pointer on X axis relative to the container that initializes the igxDrop.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
offsetX: number;
/**
* The current position of the pointer on Y axis relative to the container that initializes the igxDrop.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
offsetY: number;
}
export declare class IgxDropEventArgs {
/**
* Reference to the original event that caused the draggable element to enter the igxDrop element.
* Can be PointerEvent, TouchEvent or MouseEvent.
*/
originalEvent: any;
/** The owner igxDrop directive that triggered this event. */
owner: IgxDropDirective;
/** The igxDrag directive instanced on an element that entered the area of the igxDrop element */
drag: IgxDragDirective;
/**
* The current position of the pointer on X axis relative to the container that initializes the igxDrop.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
offsetX: number;
/**
* The current position of the pointer on Y axis relative to the container that initializes the igxDrop.
* Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
*/
offsetY: number;
/**
* Whether the default drop behavior of the igxDrop directive should be canceled.
* Note: If you implement custom behavior and you use `animateOnRelease` for the igxDrag make sure to call 'event.drag.dropFinished();'
* to notify the igxDrag directive that it has been dropped so it animates properly.
*/
cancel: boolean;
}
export interface IDragBaseEventArgs {
/**
* Reference to the original event that caused the interaction with the element.
* Can be PointerEvent, TouchEvent or MouseEvent.
*/
originalEvent: PointerEvent | MouseEvent | TouchEvent;
/** The owner igxDrag directive that triggered this event. */
owner: IgxDragDirective;
}
export interface IDragStartEventArgs extends IDragBaseEventArgs {
/** Set if the the dragging should be canceled. */
cancel: boolean;
}
export declare class IgxDragDirective implements OnInit, OnDestroy {
cdr: ChangeDetectorRef;
element: ElementRef;
zone: NgZone;
renderer: Renderer2;
/**
* - Save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element.
* ```html
* <div [igxDrag]="{ source: myElement }"></div>
* ```
*/
data: any;
/**
* An @Input property that indicates when the drag should start
* By default the drag starts after the draggable element is moved by 5px
* ```html
* <div igxDrag [dragTolerance]="100">
* <span>Drag Me!</span>
* </div>
* ```
*/
dragTolerance: number;
/**
* Sets a custom class that will be added to the `dragGhost` element.
* ```html
* <div igxDrag [ghostImageClass]="'dragGhost'">
* <span>Drag Me!</span>
* </div>
* ```
*/
ghostImageClass: string;
/**
* An @Input property that hides the draggable element.
* By default it's set to false.
* ```html
* <div igxDrag [dragTolerance]="100" [hideBaseOnDrag]="'true'">
* <span>Drag Me!</span>
* </div>
* ```
*/
hideBaseOnDrag: boolean;
/**
* An @Input property that enables/disables the draggable element animation
* when the element is released.
* By default it's set to false.
* ```html
* <div igxDrag [animateOnRelease]="'true'">
* <span>Drag Me!</span>
* </div>
* ```
*/
animateOnRelease: boolean;
/**
* An @Input property that sets the element to which the dragged element will be appended.
* By default it's set to null and the dragged element is appended to the body.
* ```html
* <div #hostDiv></div>
* <div igxDrag [dragGhostHost]="hostDiv">
* <span>Drag Me!</span>
* </div>
* ```
*/
dragGhostHost: any;
/**
* Event triggered when the draggable element drag starts.
* ```html
* <div igxDrag [animateOnRelease]="'true'" (dragStart)="onDragStart()">
* <span>Drag Me!</span>
* </div>
* ```
* ```typescript
* public onDragStart(){
* alert("The drag has stared!");
* }
* ```
*/
dragStart: EventEmitter<IDragStartEventArgs>;
/**
* Event triggered when the draggable element is released.
* ```html
* <div igxDrag [animateOnRelease]="'true'" (dragEnd)="onDragEnd()">
* <span>Drag Me!</span>
* </div>
* ```
* ```typescript
* public onDragEnd(){
* alert("The drag has ended!");
* }
* ```
*/
dragEnd: EventEmitter<IDragBaseEventArgs>;
/**
* Event triggered after the draggable element is released and after its animation has finished.
* ```html
* <div igxDrag [animateOnRelease]="'true'" (returnMoveEnd)="onMoveEnd()">
* <span>Drag Me!</span>
* </div>
* ```
* ```typescript
* public onMoveEnd(){
* alert("The move has ended!");
* }
* ```
*/
returnMoveEnd: EventEmitter<IDragBaseEventArgs>;
/**
* Event triggered when the draggable element is clicked.
* ```html
* <div igxDrag [animateOnRelease]="'true'" (dragClicked)="dragClicked()">
* <span>Drag Me!</span>
* </div>
* ```
* ```typescript
* public dragClicked(){
* alert("The elemented has been clicked!");
* }
* ```
*/
dragClicked: EventEmitter<IDragBaseEventArgs>;
/**
* @hidden
*/
touch: string;
/**
* @hidden
*/
transitionProperty: string;
/**
* @hidden
*/
_visibility: string;
/**
* Sets the visibility of the draggable element.
* ```typescript
* @ViewChild("myDrag" ,{read: IgxDragDirective})
* public myDrag: IgxDragDirective;
* ngAfterViewInit(){
* this.myDrag.visible = false;
* }
* ```
*/
/**
* Returns the visibility state of the draggable element.
* ```typescript
* @ViewChild("myDrag" ,{read: IgxDragDirective})
* public myDrag: IgxDragDirective;
* ngAfterViewInit(){
* let dragVisibilty = this.myDrag.visible;
* }
* ```
*/
visible: any;
/**
* @hidden
*/
/**
* @hidden
*/
left: number;
/**
* @hidden
*/
/**
* @hidden
*/
top: number;
/**
* Returns if the browser supports pointer events.
* ```typescript
* @ViewChild("myDrag" ,{read: IgxDragDirective})
* public myDrag: IgxDragDirective;
* ngAfterViewInit(){
* let pointerEvents = this.myDrag.pointerEventsEnabled;
* }
* ```
*/
readonly pointerEventsEnabled: boolean;
/**
* Returns if the browser supports touch events.
* ```typescript
* @ViewChild("myDrag" ,{read: IgxDragDirective})
* public myDrag: IgxDragDirective;
* ngAfterViewInit(){
* let touchEvents = this.myDrag.pointerEventsEnabled;
* }
* ```
*/
readonly touchEventsEnabled: boolean;
/**
* @hidden
*/
defaultReturnDuration: string;
/**
* @hidden
*/
protected _startX: number;
/**
* @hidden
*/
protected _startY: number;
/**
* @hidden
*/
protected _dragGhost: any;
/**
* @hidden
*/
protected _dragStarted: boolean;
/**
* @hidden
*/
protected _dragOffsetX: any;
/**
* @hidden
*/
protected _dragOffsetY: any;
/**
* @hidden
*/
protected _dragStartX: any;
/**
* @hidden
*/
protected _dragStartY: any;
/**
* @hidden
*/
protected _pointerDownId: any;
/**
* @hidden
*/
protected _clicked: boolean;
/**
* @hidden
*/
protected _lastDropArea: any;
/**
* @hidden
*/
protected _destroy: Subject<boolean>;
/**
* @hidden
*/
protected _removeOnDestroy: boolean;
constructor(cdr: ChangeDetectorRef, element: ElementRef, zone: NgZone, renderer: Renderer2);
/**
* @hidden
*/
ngOnInit(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
* Method bound to the PointerDown event of the base element igxDrag is initialized.
* @param event PointerDown event captured
*/
onPointerDown(event: any): void;
/**
* @hidden
* Perfmorm drag move logic when dragging and dispatching events if there is igxDrop under the pointer.
* This method is bound at first at the base element.
* If dragging starts and after the dragGhost is rendered the pointerId is reassigned to the dragGhost. Then this method is bound to it.
* @param event PointerMove event captured
*/
onPointerMove(event: any): void;
/**
* @hidden
* Perform drag end logic when releasing the dragGhost and dispatchind drop event if igxDrop is under the pointer.
* This method is bound at first at the base element.
* If dragging starts and after the dragGhost is rendered the pointerId is reassigned to the dragGhost. Then this method is bound to it.
* @param event PointerUp event captured
*/
onPointerUp(event: any): void;
/**
* @hidden
* Create dragGhost element - if a Node object is provided it creates a clone of that node,
* otherwise it clones the host element.
* Bind all needed events.
* @param event Pointer event required when the dragGhost is being initialized.
* @param node The Node object to be cloned.
*/
protected createDragGhost(event: any, node?: any): void;
/**
* @hidden
* Dispatch custom igxDragEnter/igxDragLeave events based on current pointer position and if drop area is under.
*/
protected dispatchDragEvents(pageX: number, pageY: number, originalEvent: any): void;
/**
* @hidden
* Dispatch custom igxDrop event based on current pointer position if there is last recorder drop area under the pointer.
* Last recorder drop area is updated in @dispatchDragEvents method.
*/
protected dispatchDropEvent(pageX: number, pageY: number, originalEvent: any): void;
/**
* @hidden
* Update relative positions
*/
updateDragRelativePos(): void;
/**
* Informs the `igxDrag` directive that it has been dropped/released.
* This should usully be called when `animateOnRelease` is set to `true`.
* When canceling or defining custom drop logic this tells the igxDrag to update it's positions and
* animate correctly to the new position.
* ```typescript
* public onDropElem(event) {
* // Function bound to the igxDrop directive event `onDrop`
* // This cancels the default drop logic of the `igxDrop`
* event.cancel = true;
* event.drag.dropFinished();
* }
* ```
*/
dropFinished(): void;
/**
* @hidden
*/
onTransitionEnd(event: any): void;
/**
* @hidden
*/
protected getElementsAtPoint(pageX: number, pageY: number): any;
/**
* @hidden
*/
protected dispatchEvent(target: any, eventName: string, eventArgs: IgxDragCustomEventDetails): void;
protected getWindowScrollTop(): number;
protected getWindowScrollLeft(): number;
}
export declare class IgxDropDirective implements OnInit, OnDestroy {
element: ElementRef;
private _renderer;
private _zone;
/**
* - Save data inside the `igxDrop` directive. This can be set when instancing `igxDrop` on an element.
* ```html
* <div [igxDrop]="{ source: myElement }"></div>
* ```
*/
data: any;
/** Event triggered when dragged element enters the area of the element.
* ```html
* <div class="cageArea" igxDrop (onEnter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
* </div>
* ```
* ```typescript
* public dragEnter(){
* alert("A draggable elemente has entered the chip area!");
* }
* ```
*/
onEnter: EventEmitter<IgxDropEnterEventArgs>;
/** Event triggered when dragged element leaves the area of the element.
* ```html
* <div class="cageArea" igxDrop (onLeave)="dragLeave()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
* </div>
* ```
* ```typescript
* public dragLeave(){
* alert("A draggable elemente has left the chip area!");
* }
* ```
*/
onLeave: EventEmitter<IgxDropLeaveEventArgs>;
/** Event triggered when dragged element is dropped in the area of the element.
* Since the `igxDrop` has default logic that appends the dropped element as a child, it can be canceled here.
* To cancel the default logic the `cancel` property of the event needs to be set to true.
* ```html
* <div class="cageArea" igxDrop (onDrop)="dragDrop()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
* </div>
* ```
* ```typescript
* public dragDrop(){
* alert("A draggable elemente has been dropped in the chip area!");
* }
* ```
*/
onDrop: EventEmitter<IgxDropEventArgs>;
/**
* @hidden
*/
droppable: boolean;
/**
* @hidden
*/
dragover: boolean;
/**
* @hidden
*/
protected _destroy: Subject<boolean>;
constructor(element: ElementRef, _renderer: Renderer2, _zone: NgZone);
ngOnInit(): void;
ngOnDestroy(): void;
/**
* @hidden
*/
onDragOver(event: any): void;
/**
* @hidden
*/
onDragEnter(event: CustomEvent<IgxDragCustomEventDetails>): void;
/**
* @hidden
*/
onDragLeave(event: any): void;
/**
* @hidden
*/
onDragDrop(event: any): void;
protected getWindowScrollTop(): number;
protected getWindowScrollLeft(): number;
}
/**
* @hidden
*/
export declare class IgxDragDropModule {
}