@progress/kendo-angular-utils 12.0.0-develop.8 → 12.0.0

package/esm2020/drag-and-drop/dragtarget.directive.mjs

@@ -2,16 +2,18 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, EventEmitter, HostBinding, Output, ElementRef, Renderer2, NgZone, Input, ContentChildren, QueryList, TemplateRef, ViewContainerRef, ComponentFactoryResolver } from "@angular/core";
+import { Directive, EventEmitter, Output, ElementRef, Renderer2, NgZone, Input, ContentChildren, QueryList, ViewContainerRef, isDevMode } from "@angular/core";
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { DragHandleDirective } from "./draghandle.directive";
 import { getScrollableParent } from "@progress/kendo-draggable-common";
-import { DragTargetDragStartEvent, DragTargetDragEndEvent, DragTargetPressEvent, DragTargetDragEvent } from "./events/drag-target";
 import { DragStateService } from "./drag-state.service";
 import { getAction, isPresent, setElementStyles, dragTargetTransition } from './util';
-import { contains, isDocumentAvailable } from "@progress/kendo-angular-common";
+import { contains, isDocumentAvailable, parseCSSClassNames } from "@progress/kendo-angular-common";
 import { HintComponent } from "./hint.component";
+import { DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragStartEvent, DragTargetPressEvent } from "./events/drag-target";
+import { DragTargetReleaseEvent } from "./events/drag-target/release-event";
+import { DragTargetDragReadyEvent } from "./events/drag-target/dragready-event";
 import * as i0 from "@angular/core";
 import * as i1 from "./drag-state.service";
 let isDragStartPrevented = false;
@@ -20,15 +22,20 @@ let isDragPrevented = false;
  * Represents the Kendo UI DragTarget directive for Angular.
  */
 export class DragTargetDirective {
-    constructor(element, renderer, ngZone, service, viewContainer, resolver) {
+    constructor(element, renderer, ngZone, service, viewContainer) {
         this.element = element;
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.service = service;
         this.viewContainer = viewContainer;
-        this.resolver = resolver;
         /**
-         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})).
+         * Defines whether a hint will be used for dragging. By default, the hint is a copy of the drag target. ([see example]({% slug drag_hint %})).
+         *
+         * @default false
+         */
+        this.hint = false;
+        /**
+         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})). Applicable when `manualDrag` is set to `false`.
          *
          * @default 0
          */
@@ -45,18 +52,22 @@ export class DragTargetDirective {
          * @default 0
          */
         this.dragDelay = 0;
+        /**
+         * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
+         *
+         * @default 'auto'
+         */
+        this.mode = 'auto';
         /**
          * Fires when the user presses the DragTarget element.
          */
         this.press = new EventEmitter();
         /**
          * Fires when the dragging of the DragTarget element begins.
-         * This event is preventable.
          */
         this.dragStart = new EventEmitter();
         /**
          * Fires while the user drags the DragTarget element.
-         * This event is preventable.
          */
         this.drag = new EventEmitter();
         /**
@@ -71,32 +82,42 @@ export class DragTargetDirective {
          * Fires when the dragging of the DragTarget ends and the element is released.
          */
         this.dragEnd = new EventEmitter();
-        this.touchAction = 'none';
         this.dragTarget = null;
         this.domSubscriptions = [];
-        this.hint = null;
-        this.initialPosition = { x: 0, y: 0 };
+        this.hintComponent = null;
         this.dragStarted = false;
         this.pressed = false;
         this.dragTimeout = null;
+        this.initialPosition = { x: 0, y: 0 };
         this.position = { x: 0, y: 0 };
+        this.scrollableParent = null;
+        this.defaultHint = null;
+        this._dragData = () => null;
         validatePackage(packageMetadata);
     }
     /**
-     * @hidden
+     * Defines a callback function used for attaching custom data to the dragTarget.
+     * The data will be available in the events of the respective [`DropTarget`]({% slug api_utils_droptargetdirective %}) or [`DropTargetContainer`]({% slug api_utils_droptargetcontainerdirective %}) directives.
+     * The current DragTarget HTML element and its `dragTargetId` will be available as arguments.
      */
+    set dragData(fn) {
+        if (isDevMode && typeof fn !== 'function') {
+            throw new Error(`dragData must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._dragData = fn;
+    }
+    get dragData() {
+        return this._dragData;
+    }
+    get hintTemplate() {
+        return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
+    }
     get nativeElement() {
         return this.element.nativeElement;
     }
-    /**
-     * @hidden
-     */
     get hintElem() {
-        return this.hint.instance.element.nativeElement;
+        return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
     }
-    /**
-     * @hidden
-     */
     onPointerDown(event) {
         if (this.dragHandles.length && !this.isDragHandle(event.target)) {
             return;
@@ -107,127 +128,88 @@ export class DragTargetDirective {
         this.service.autoScroll = typeof this.autoScroll === 'object' ? this.autoScroll.enabled !== false : this.autoScroll;
         this.service.scrollableParent = this.getAutoScrollContainer();
         this.service.autoScrollDirection = typeof this.autoScroll === 'object' ? this.autoScroll.direction : { horizontal: true, vertical: true };
-        this.ngZone.runOutsideAngular(() => {
-            this.attachDomHandlers();
-        });
+        this.attachDomHandlers();
     }
-    /**
-     * @hidden
-     */
     onPointerMove(event) {
         event.preventDefault();
         const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
     }
-    /**
-     * @hidden
-     */
     onPointerUp(event) {
         event.preventDefault();
         const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
-        this.ngZone.runOutsideAngular(() => {
-            this.attachDomHandlers();
-        });
+        this.attachDomHandlers();
     }
     ngOnInit() {
-        this.initializeDraggable();
+        this.initializeDragTarget();
     }
     ngAfterContentInit() {
         if (isPresent(this.element) || isPresent(this.dragTarget)) {
-            this.ngZone.runOutsideAngular(() => {
-                this.attachDomHandlers();
-                if (!this.dragHandles.length) {
-                    this.renderer.addClass(this.nativeElement, 'k-cursor-pointer');
-                }
-            });
+            this.attachDomHandlers();
+            if (!this.dragHandles.length) {
+                this.renderer.addClass(this.nativeElement, 'k-cursor-pointer');
+            }
         }
         this.service.dragTargets.push(this.dragTarget);
     }
     ngOnDestroy() {
         this.domSubscriptions.forEach(subscription => subscription());
     }
-    /**
-     * @hidden
-     */
     handlePress(event) {
         if (this.dragDelay > 0) {
-            this.dragTimeout = setTimeout(() => {
+            this.dragTimeout = window.setTimeout(() => {
                 this.pressed = true;
-                this.ngZone.run(() => {
-                    this.dragReady.emit();
-                });
+                this.emitZoneAwareEvent('dragReady', event);
             }, this.dragDelay);
         }
         else {
             this.pressed = true;
         }
-        this.ngZone.run(() => {
-            const eventArgs = new DragTargetPressEvent({ normalizedEvent: event, hostElement: this.nativeElement });
-            this.press.emit(eventArgs);
-        });
+        this.scrollableParent = this.dragTarget.element ? getScrollableParent(this.dragTarget.element) : null;
+        this.emitZoneAwareEvent('press', event);
     }
-    /**
-     * @hidden
-     */
     handleDragStart(event) {
         if (!this.pressed) {
             if (this.dragTimeout) {
-                clearTimeout(this.dragTimeout);
+                window.clearTimeout(this.dragTimeout);
                 this.dragTimeout = null;
             }
             return;
         }
-        this.ngZone.run(() => {
-            isDragStartPrevented = this.emitEvent('dragStart', { normalizedEvent: event, hostElement: this.nativeElement }).isDefaultPrevented();
-        });
+        isDragStartPrevented = this.emitZoneAwareEvent('dragStart', event).isDefaultPrevented();
         if (isDragStartPrevented) {
             return;
         }
-        if (isPresent(this.hintTemplate)) {
+        if (this.hint) {
             this.createHint();
-            if (isPresent(this.hint)) {
+            if (this.mode === 'auto') {
                 this.renderer.setStyle(this.nativeElement, 'opacity', '0.7');
             }
+            this.initialPosition = { x: event.offsetX, y: event.offsetY };
+        }
+        else {
+            this.initialPosition = { x: event.clientX - this.position.x, y: event.clientY - this.position.y };
         }
         this.dragStarted = this.threshold === 0;
         this.service.dragTarget = this.dragTarget;
         this.service.dragTargetDirective = this;
-        this.initialPosition = { x: event.clientX - this.position.x, y: event.clientY - this.position.y };
+        this.service.dragData = this.dragData(this.dragTarget.element, this.dragTargetIdResult);
     }
     handleDrag(event) {
         if (!this.pressed || isDragStartPrevented) {
             return;
         }
-        const elem = this.hint ? this.hintElem : this.nativeElement;
-        const eventArgsProps = elem === this.nativeElement ? { normalizedEvent: event, hostElement: this.nativeElement } : { normalizedEvent: event, hostElement: this.nativeElement, hintElement: elem };
-        this.ngZone.run(() => {
-            isDragPrevented = this.emitEvent('drag', eventArgsProps).isDefaultPrevented();
-        });
+        isDragPrevented = this.emitZoneAwareEvent('drag', event).isDefaultPrevented();
         if (isDragPrevented) {
             return;
         }
-        if (this.restrictByAxis === 'horizontal') {
-            this.position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: 0 };
-        }
-        else if (this.restrictByAxis === 'vertical') {
-            this.position = { x: 0, y: event.clientY - this.initialPosition.y + event.scrollY };
+        if (this.mode === 'auto') {
+            this.performDrag(event);
         }
         else {
-            this.position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
-        }
-        const thresholdNotReached = Math.abs(this.position.x) < this.threshold && Math.abs(this.position.y) < this.threshold;
-        if (!this.dragStarted && thresholdNotReached) {
-            return;
-        }
-        if (!this.dragStarted && this.threshold > 0) {
             this.dragStarted = true;
         }
-        const transform = `translate(${this.position.x}px, ${this.position.y}px)`;
-        setElementStyles(this.renderer, elem, {
-            transform: transform,
-            transition: 'none'
-        });
     }
     handleRelease(event) {
         if (this.dragTimeout) {
@@ -235,44 +217,35 @@ export class DragTargetDirective {
             this.dragTimeout = null;
             this.pressed = false;
         }
-        this.service.dragTarget = null;
-        this.service.dragTargetDirective = null;
-        this.ngZone.run(() => {
-            const eventArgs = new DragTargetPressEvent({ normalizedEvent: event, hostElement: this.nativeElement });
-            this.release.emit(eventArgs);
-        });
+        this.emitZoneAwareEvent('release', event);
     }
     handleDragEnd(event) {
-        if (this.dragTimeout) {
-            clearTimeout(this.dragTimeout);
-            this.dragTimeout = null;
-            this.pressed = false;
+        if (this.mode === 'auto') {
+            const isDroppedOverParentTarget = isPresent(this.service.dropTarget) && !contains(this.service.dropTarget?.element, this.service.dragTarget?.element, true);
+            const elem = this.hint ? this.hintElem : this.nativeElement;
+            if (isDroppedOverParentTarget || this.service.dropTargets.length > 0 && isPresent(elem)) {
+                this.renderer.removeStyle(elem, 'transform');
+                setElementStyles(this.renderer, elem, {
+                    transition: dragTargetTransition
+                });
+                this.position = { x: 0, y: 0 };
+            }
         }
-        const isDroppedOverParentTarget = isPresent(this.service.dropTarget) && !contains(this.service.dropTarget?.element, this.service.dragTarget?.element, true);
-        const elem = this.hint ? this.hintElem : this.nativeElement;
-        if (isDroppedOverParentTarget || this.service.dropTargets.length > 0) {
-            this.renderer.removeStyle(elem, 'transform');
-            setElementStyles(this.renderer, elem, {
-                transition: dragTargetTransition
-            });
-            this.position = { x: 0, y: 0 };
-        }
-        if (isPresent(this.hint)) {
-            this.renderer.removeStyle(this.nativeElement, 'opacity');
+        if (this.hint && isPresent(this.hintElem)) {
             this.destroyHint();
+            if (this.mode === 'auto') {
+                this.renderer.removeStyle(this.nativeElement, 'opacity');
+            }
         }
         this.service.dragTarget = null;
         this.service.dragTargetDirective = null;
         if (!this.dragStarted || isDragStartPrevented || isDragPrevented) {
             return;
         }
-        this.ngZone.run(() => {
-            const eventArgs = new DragTargetDragEndEvent({ normalizedEvent: event, hostElement: this.nativeElement });
-            this.dragEnd.emit(eventArgs);
-        });
+        this.emitZoneAwareEvent('dragEnd', event);
         this.dragStarted = false;
     }
-    initializeDraggable() {
+    initializeDragTarget() {
         this.dragTarget = {
             element: this.nativeElement,
             hint: null,
@@ -284,43 +257,44 @@ export class DragTargetDirective {
         };
     }
     attachDomHandlers() {
-        if (this.domSubscriptions.length > 0) {
-            this.domSubscriptions.forEach(subscription => subscription());
-        }
-        if (!(isDocumentAvailable() && isPresent(this.element))) {
-            return;
-        }
-        if (this.service.pressed) {
-            this.onPointerMove = this.onPointerMove.bind(this);
-            this.onPointerUp = this.onPointerUp.bind(this);
-            let scrollable = getScrollableParent(this.nativeElement);
-            this.domSubscriptions = [
-                this.renderer.listen(document, 'pointermove', this.onPointerMove),
-                this.renderer.listen(document, 'mousemove', this.onPointerMove),
-                this.renderer.listen(document, 'touchmove', this.onPointerMove),
-                this.renderer.listen(document, 'pointerup', this.onPointerUp),
-                this.renderer.listen(document, 'pointercancel', this.onPointerUp),
-                this.renderer.listen(document, 'mouseup', this.onPointerUp),
-                this.renderer.listen(document, 'contextmenu', this.onPointerUp),
-                this.renderer.listen(document, 'touchend', this.onPointerUp),
-                this.renderer.listen(document, 'touchcancel', this.onPointerUp)
-            ];
-            if (scrollable) {
-                if (scrollable === document.getElementsByTagName('html')[0]) {
-                    scrollable = document;
+        this.ngZone.runOutsideAngular(() => {
+            if (this.domSubscriptions.length > 0) {
+                this.domSubscriptions.forEach(subscription => subscription());
+            }
+            if (!(isDocumentAvailable() && isPresent(this.element))) {
+                return;
+            }
+            if (this.service.pressed) {
+                this.onPointerMove = this.onPointerMove.bind(this);
+                this.onPointerUp = this.onPointerUp.bind(this);
+                this.domSubscriptions = [
+                    this.renderer.listen(document, 'pointermove', this.onPointerMove),
+                    this.renderer.listen(document, 'mousemove', this.onPointerMove),
+                    this.renderer.listen(document, 'touchmove', this.onPointerMove),
+                    this.renderer.listen(document, 'pointerup', this.onPointerUp),
+                    this.renderer.listen(document, 'pointercancel', this.onPointerUp),
+                    this.renderer.listen(document, 'mouseup', this.onPointerUp),
+                    this.renderer.listen(document, 'contextmenu', this.onPointerUp),
+                    this.renderer.listen(document, 'touchend', this.onPointerUp),
+                    this.renderer.listen(document, 'touchcancel', this.onPointerUp)
+                ];
+                if (isPresent(this.scrollableParent)) {
+                    if (this.scrollableParent === document.getElementsByTagName('html')[0]) {
+                        this.scrollableParent = window;
+                    }
+                    this.domSubscriptions.push(this.renderer.listen(this.scrollableParent, 'scroll', this.onPointerMove));
                 }
-                this.domSubscriptions.push(this.renderer.listen(scrollable, 'scroll', this.onPointerMove));
             }
-        }
-        else {
-            this.onPointerDown = this.onPointerDown.bind(this);
-            const element = this.nativeElement;
-            this.domSubscriptions = [
-                this.renderer.listen(element, 'pointerdown', this.onPointerDown),
-                this.renderer.listen(element, 'mousedown', this.onPointerDown),
-                this.renderer.listen(element, 'touchstart', this.onPointerDown)
-            ];
-        }
+            else {
+                this.onPointerDown = this.onPointerDown.bind(this);
+                const element = this.nativeElement;
+                this.domSubscriptions = [
+                    this.renderer.listen(element, 'pointerdown', this.onPointerDown),
+                    this.renderer.listen(element, 'mousedown', this.onPointerDown),
+                    this.renderer.listen(element, 'touchstart', this.onPointerDown)
+                ];
+            }
+        });
     }
     isDragHandle(el) {
         return this.dragHandles.toArray().some(dh => contains(dh.element.nativeElement, el, true));
@@ -332,55 +306,182 @@ export class DragTargetDirective {
             this.autoScroll.boundaryElementRef.nativeElement : null;
     }
     createHint() {
-        const hintComponent = this.resolver.resolveComponentFactory(HintComponent);
-        this.hint = this.viewContainer.createComponent(hintComponent);
-        this.hint.instance.template = this.hintTemplate;
-        this.hint.instance.directive = this;
-        this.hint.changeDetectorRef.detectChanges();
-        this.dragTarget.hint = this.hint.instance.element.nativeElement;
+        if (!(isDocumentAvailable() && isPresent(this.element))) {
+            return;
+        }
+        if (isPresent(this.hint) && typeof this.hint === 'object') {
+            if (isPresent(this.hint.hintTemplate)) {
+                this.createCustomHint();
+            }
+            else {
+                this.createDefaultHint();
+            }
+        }
+        else {
+            this.createDefaultHint();
+        }
+        this.dragTarget.hint = this.hintElem;
+        if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
+            this.hint.appendTo.element.nativeElement.appendChild(this.hintElem);
+        }
+        else {
+            document.body.appendChild(this.hintElem);
+        }
+    }
+    createDefaultHint() {
+        this.defaultHint = this.nativeElement.cloneNode(true);
+        if (typeof this.hint === 'object') {
+            if (isPresent(this.hint.hintClass)) {
+                const hintClasses = parseCSSClassNames(this.hint.hintClass);
+                hintClasses.forEach(className => this.renderer.addClass(this.defaultHint, className));
+            }
+        }
+    }
+    createCustomHint() {
+        if (isPresent(this.hint.appendTo)) {
+            this.hintComponent = this.hint.appendTo.createComponent(HintComponent);
+        }
+        else {
+            this.hintComponent = this.viewContainer.createComponent(HintComponent);
+        }
+        this.hintComponent.instance.template = this.hintTemplate;
+        this.hintComponent.instance.directive = this;
+        this.hintComponent.changeDetectorRef.detectChanges();
     }
     destroyHint() {
-        this.hint.destroy();
-        this.hint.changeDetectorRef.detectChanges();
-        this.hint = null;
+        if (isPresent(this.hintTemplate)) {
+            this.hintComponent.destroy();
+            this.hintComponent.changeDetectorRef.detectChanges();
+            this.hintComponent = null;
+        }
+        else {
+            if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
+                this.hint.appendTo.element.nativeElement.removeChild(this.defaultHint);
+            }
+            else {
+                document.body.removeChild(this.defaultHint);
+            }
+            this.defaultHint = null;
+        }
         this.dragTarget.hint = null;
     }
-    emitEvent(event, args) {
+    emitZoneAwareEvent(event, normalizedEvent) {
+        const eventProps = {
+            dragTarget: this.nativeElement,
+            dragEvent: normalizedEvent
+        };
+        if (this.hint && isPresent(this.hintElem)) {
+            eventProps.hintElement = this.hintElem;
+        }
+        if (this.dragTargetId && this.dragTargetId !== '') {
+            eventProps.dragTargetId = this.dragTargetIdResult;
+        }
         let eventArgs;
         switch (event) {
+            case 'dragReady':
+                eventArgs = new DragTargetDragReadyEvent(eventProps);
+                break;
+            case 'press':
+                eventArgs = new DragTargetPressEvent(eventProps);
+                break;
             case 'dragStart':
-                eventArgs = new DragTargetDragStartEvent(args);
+                eventArgs = new DragTargetDragStartEvent(eventProps);
                 break;
             case 'drag':
-                eventArgs = new DragTargetDragEvent(args);
+                eventArgs = new DragTargetDragEvent(eventProps);
+                break;
+            case 'release':
+                eventArgs = new DragTargetReleaseEvent(eventProps);
+                break;
+            case 'dragEnd':
+                eventArgs = new DragTargetDragEndEvent(eventProps);
                 break;
             default:
                 break;
         }
-        this[event].emit(eventArgs);
+        this.ngZone.run(() => {
+            this[event].emit(eventArgs);
+        });
         return eventArgs;
     }
+    get dragTargetIdResult() {
+        if (this.dragTargetId && this.dragTargetId !== '') {
+            return typeof this.dragTargetId === 'string' ? this.dragTargetId : this.dragTargetId(this.dragTarget.element);
+        }
+    }
+    performDrag(event) {
+        const elem = this.hint ? this.hintElem : this.nativeElement;
+        this.position = this.calculatePosition(elem, event);
+        const thresholdNotReached = Math.abs(this.position.x) < this.threshold && Math.abs(this.position.y) < this.threshold;
+        if (!this.dragStarted && thresholdNotReached) {
+            return;
+        }
+        if (!this.dragStarted && this.threshold > 0) {
+            this.dragStarted = true;
+        }
+        const styles = this.getStylesPerElement(elem);
+        setElementStyles(this.renderer, elem, styles);
+    }
+    calculatePosition(element, event) {
+        let position = null;
+        if (element === this.hintElem) {
+            position = { x: event.clientX, y: event.clientY };
+        }
+        else {
+            position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
+        }
+        if (this.restrictByAxis === 'horizontal') {
+            position.y = 0;
+        }
+        else if (this.restrictByAxis === 'vertical') {
+            position.x = 0;
+        }
+        return position;
+    }
+    getStylesPerElement(element) {
+        if (element === this.hintElem) {
+            const hintCoordinates = { x: this.position.x - this.initialPosition.x, y: this.position.y - this.initialPosition.y };
+            return {
+                top: `${hintCoordinates.y}px`,
+                left: `${hintCoordinates.x}px`,
+                transition: 'none',
+                position: 'absolute',
+                zIndex: 1999
+            };
+        }
+        else {
+            const transform = `translate(${this.position.x}px, ${this.position.y}px)`;
+            return {
+                transform: transform,
+                transition: 'none'
+            };
+        }
+    }
 }
-DragTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.DragStateService }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragTargetDirective, selector: "[kendoDragTarget]", inputs: { hintTemplate: "hintTemplate", threshold: "threshold", autoScroll: "autoScroll", link: "link", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis" }, outputs: { press: "press", dragStart: "dragStart", drag: "drag", dragReady: "dragReady", release: "release", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "this.touchAction" } }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
+DragTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.DragStateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragTargetDirective, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { press: "press", dragStart: "dragStart", drag: "drag", dragReady: "dragReady", release: "release", dragEnd: "dragEnd" }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDragTarget]',
                     exportAs: 'kendoDragTarget'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.DragStateService }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { hintTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.DragStateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { hint: [{
                 type: Input
             }], threshold: [{
                 type: Input
             }], autoScroll: [{
                 type: Input
-            }], link: [{
+            }], dragTargetId: [{
                 type: Input
             }], dragDelay: [{
                 type: Input
             }], restrictByAxis: [{
                 type: Input
+            }], mode: [{
+                type: Input
+            }], dragData: [{
+                type: Input
             }], press: [{
                 type: Output
             }], dragStart: [{
@@ -393,9 +494,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], dragEnd: [{
                 type: Output
-            }], touchAction: [{
-                type: HostBinding,
-                args: ['style.touch-action']
             }], dragHandles: [{
                 type: ContentChildren,
                 args: [DragHandleDirective]