@progress/kendo-angular-utils
Version:
Kendo UI Angular utils component
178 lines (177 loc) • 7.51 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 %}).
* Used to configure multiple elements as draggable.
*
* @example
* ```ts-no-run
* <ul kendoDragTargetContainer dragTargetFilter=".my-draggable">
* <li class="my-draggable">foo</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;
/**
* Specifies a selector for elements within a container which will be configured as draggable
* ([see example]({% slug drag_target_container %})). The possible values include any
* DOM `selector`.
*/
set dragTargetFilter(value: string);
get dragTargetFilter(): string;
/**
* Specifies a selector for elements within each DragTarget which will be configured as drag handles.
*/
dragHandle: string;
/**
* Defines the delay in milliseconds after which the drag will begin ([see example](slug:drag_target_container#toc-events)).
*
* @default 0
*/
dragDelay: number;
/**
* The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})).
*
* @default 0
*/
threshold: number;
/**
* Defines a unique identifier for each drag target.
* It exposes the current DragTarget HTML element and its index in the collection of drag targets as arguments.
*/
set dragTargetId(fn: DragTargetIdFn);
get dragTargetId(): DragTargetIdFn;
/**
* Defines a callback function which returns custom data passed to the 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;
/**
* If set to true, the dragging of DragTargets within the container will be disabled.
*
* @default false
*/
set dragDisabled(value: boolean);
get dragDisabled(): boolean;
/**
* Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
*
* @default 'auto'
*/
mode: DragMode;
/**
* Specifies 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 DragTarget's `dragDelay` has passed and the user is able to drag the element.
*/
onDragReady: EventEmitter<DragTargetDragReadyEvent>;
/**
* Fires when the user presses a DragTarget element.
*/
onPress: EventEmitter<DragTargetPressEvent>;
/**
* Fires when the dragging of a DragTarget element begins.
*/
onDragStart: EventEmitter<DragTargetDragStartEvent>;
/**
* Fires while the user drags a DragTarget element.
*/
onDrag: EventEmitter<DragTargetDragEvent>;
/**
* Fires when the user releases a DragTarget element after being pressed.
*/
onRelease: EventEmitter<DragTargetReleaseEvent>;
/**
* Fires when the dragging of a DragTarget ends and the element is released.
*/
onDragEnd: EventEmitter<DragTargetDragEndEvent>;
/**
* Used for notifying 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>;
}