@progress/kendo-angular-utils
Version:
Kendo UI Angular utils component
179 lines (178 loc) • 7.45 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2, ViewContainerRef } from '@angular/core';
import { DragStateService } from './drag-state.service';
import { DragMode, DragTargetDataFn, HintSettings } from './models';
import { DragTargetIdFn } from './models/functions';
import { DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragReadyEvent, DragTargetDragStartEvent, DragTargetPressEvent, DragTargetReleaseEvent } from './events/drag-target';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI DragTargetContainer directive for Angular]({% slug api_utils_dragtargetcontainerdirective %}).
* Use this directive to make multiple elements draggable inside a container.
*
* @example
* ```html
* <ul kendoDragTargetContainer dragTargetFilter=".my-draggable">
* <li class="my-draggable"> Item 1</li>
* <li class="my-draggable"> Item 2</li>
* <li class="my-draggable"> Item 3</li>
* </ul>
* ```
*/
export declare class DragTargetContainerDirective implements AfterViewInit, OnDestroy {
wrapper: ElementRef;
ngZone: NgZone;
private renderer;
private service;
private viewContainer;
private cdr;
/**
* Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. [See example]({% slug drag_hint %}).
*
* @default false
*/
hint: boolean | HintSettings;
/**
* Sets a selector for elements in the container to make them draggable. The possible values include any
* DOM `selector`. [See example]({% slug drag_target_container %}).
*/
set dragTargetFilter(value: string);
get dragTargetFilter(): string;
/**
* Sets a selector for elements inside each drag target to use as drag handles.
*/
dragHandle: string;
/**
* Sets the delay in milliseconds before dragging begins. [See example](slug:drag_target_container#toc-events).
*
* @default 0
*/
dragDelay: number;
/**
* Sets the number of pixels the pointer must move before dragging starts. [See example]({% slug minimum_distance %}).
*
* @default 0
*/
threshold: number;
/**
* Sets a unique identifier for each drag target.
* It exposes the current drag target HTML element and its index in the collection of drag targets as arguments.
*/
set dragTargetId(fn: DragTargetIdFn);
get dragTargetId(): DragTargetIdFn;
/**
* Sets a callback function to return custom data for `DropTarget` events.
* It exposes the current `DragTarget` HTML element, its `dragTargetId`, and its index in the collection of drag targets as arguments.
*/
set dragData(fn: DragTargetDataFn);
get dragData(): DragTargetDataFn;
/**
* Disables dragging of drag targets in the container when set to `true`.
*
* @default false
*/
set dragDisabled(value: boolean);
get dragDisabled(): boolean;
/**
* Sets whether to use the default dragging behavior or handle it manually.
*
* @default 'auto'
*/
mode: DragMode;
/**
* Sets the cursor style of the drag targets. Accepts same values as the [CSS `cursor` property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#values).
*
* @default 'move'
*/
cursorStyle: string;
/**
* @hidden
*/
hintContext: any;
/**
* Fires when a drag target's `dragDelay` has passed and the user can drag the element.
*/
onDragReady: EventEmitter<DragTargetDragReadyEvent>;
/**
* Fires when the user presses a drag target element.
*/
onPress: EventEmitter<DragTargetPressEvent>;
/**
* Fires when dragging of a drag target element begins.
*/
onDragStart: EventEmitter<DragTargetDragStartEvent>;
/**
* Fires while the user drags a drag target element.
*/
onDrag: EventEmitter<DragTargetDragEvent>;
/**
* Fires when the user releases a drag target element after pressing it.
*/
onRelease: EventEmitter<DragTargetReleaseEvent>;
/**
* Fires when dragging of a drag target ends and the element is released.
*/
onDragEnd: EventEmitter<DragTargetDragEndEvent>;
/**
* Notifies the `DragTargetContainer` that its content has changed.
*/
notify(): void;
private currentDragTarget;
private dragTimeout;
private pressed;
private dragStarted;
private hintComponent;
private defaultHint;
private currentDragTargetElement;
private scrollableParent;
private previousDragTargets;
private initialPosition;
private position;
private positionsMap;
private _dragTargetFilter;
private _dragDisabled;
private _dragData;
private _dragTargetId;
private prevUserSelect;
private get allDragTargets();
private get dragHandles();
private get hintTemplate();
constructor(wrapper: ElementRef, ngZone: NgZone, renderer: Renderer2, service: DragStateService, viewContainer: ViewContainerRef, cdr: ChangeDetectorRef);
ngAfterViewInit(): void;
ngOnDestroy(): void;
private onPointerDown;
private onTouchStart;
private onPointerMove;
private onTouchMove;
private onPointerUp;
private onContextMenu;
private handlePress;
private handleDragStart;
private handleDrag;
private handleRelease;
private handleDragEnd;
private get nativeElement();
private get hintElem();
private removeListeners;
private get supportPointerEvent();
private subscribe;
private emitZoneAwareEvent;
private createHint;
private createDefaultHint;
private createCustomHint;
private destroyHint;
private getDragIndex;
private initializeDragTargets;
private isDragHandle;
private get isHandleSelectorValid();
private setTargetStyles;
private queryHost;
private clearPreviousTargets;
private performDrag;
private calculatePosition;
private getStylesPerElement;
static ɵfac: i0.ɵɵFactoryDeclaration<DragTargetContainerDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetContainerDirective, "[kendoDragTargetContainer]", ["kendoDragTargetContainer"], { "hint": { "alias": "hint"; "required": false; }; "dragTargetFilter": { "alias": "dragTargetFilter"; "required": false; }; "dragHandle": { "alias": "dragHandle"; "required": false; }; "dragDelay": { "alias": "dragDelay"; "required": false; }; "threshold": { "alias": "threshold"; "required": false; }; "dragTargetId": { "alias": "dragTargetId"; "required": false; }; "dragData": { "alias": "dragData"; "required": false; }; "dragDisabled": { "alias": "dragDisabled"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "cursorStyle": { "alias": "cursorStyle"; "required": false; }; "hintContext": { "alias": "hintContext"; "required": false; }; }, { "onDragReady": "onDragReady"; "onPress": "onPress"; "onDragStart": "onDragStart"; "onDrag": "onDrag"; "onRelease": "onRelease"; "onDragEnd": "onDragEnd"; }, never, never, true, never>;
}