@progress/kendo-angular-utils 17.1.2-develop.1 → 17.1.2-develop.3

package/drag-and-drop/draghandle.directive.d.ts

@@ -12,6 +12,7 @@ export declare class DragHandleDirective {
     element: ElementRef;
     constructor(element: ElementRef);
     cursorStyle: string;
+    touchActionStyle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DragHandleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DragHandleDirective, "[kendoDragHandle]", ["kendoDragHandle"], {}, {}, never, never, true, never>;
 }

package/drag-and-drop/dragtarget-container.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 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, Renderer2, ViewContainerRef } from '@angular/core';
+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';
@@ -19,7 +19,7 @@ import * as i0 from "@angular/core";
  * </ul>
  * ```
  */
-export declare class DragTargetContainerDirective implements AfterViewInit {
+export declare class DragTargetContainerDirective implements AfterViewInit, OnDestroy {
     wrapper: ElementRef;
     ngZone: NgZone;
     private renderer;
@@ -108,10 +108,6 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
      * Used for notifying the DragTargetContainer that its content has changed.
      */
     notify(): void;
-    private pointerDownSubscription;
-    private pointerMoveSubscription;
-    private pointerUpSubscription;
-    private scrollSubscription;
     private currentDragTarget;
     private dragTimeout;
     private pressed;
@@ -128,14 +124,19 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
     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;
@@ -143,7 +144,8 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
     private handleDragEnd;
     private get nativeElement();
     private get hintElem();
-    private unsubscribe;
+    private removeListeners;
+    private get supportPointerEvent();
     private subscribe;
     private emitZoneAwareEvent;
     private createHint;
@@ -154,7 +156,7 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
     private initializeDragTargets;
     private isDragHandle;
     private get isHandleSelectorValid();
-    private setCursorStyle;
+    private setTargetStyles;
     private queryHost;
     private clearPreviousTargets;
     private performDrag;

package/drag-and-drop/dragtarget.directive.d.ts

@@ -20,6 +20,7 @@ export declare class DragTargetDirective implements OnInit, AfterContentInit, On
     private ngZone;
     private service;
     private viewContainer;
+    get touchActionStyle(): string;
     /**
      * 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 %})).
      *
@@ -90,7 +91,6 @@ export declare class DragTargetDirective implements OnInit, AfterContentInit, On
      */
     onDragEnd: EventEmitter<DragTargetDragEndEvent>;
     private dragTarget;
-    private domSubscriptions;
     private hintComponent;
     private dragStarted;
     private pressed;
@@ -100,12 +100,16 @@ export declare class DragTargetDirective implements OnInit, AfterContentInit, On
     private scrollableParent;
     private defaultHint;
     private _dragData;
+    private prevUserSelect;
     private get hintTemplate();
     private get nativeElement();
     private get hintElem();
     private onPointerDown;
+    private onTouchStart;
     private onPointerMove;
+    private onTouchMove;
     private onPointerUp;
+    private onContextMenu;
     dragHandles: QueryList<DragHandleDirective>;
     constructor(element: ElementRef, renderer: Renderer2, ngZone: NgZone, service: DragStateService, viewContainer: ViewContainerRef);
     ngOnInit(): void;
@@ -117,6 +121,8 @@ export declare class DragTargetDirective implements OnInit, AfterContentInit, On
     private handleRelease;
     private handleDragEnd;
     private initializeDragTarget;
+    private get supportPointerEvent();
+    private removeListeners;
     private attachDomHandlers;
     private isDragHandle;
     private getAutoScrollContainer;

package/drag-and-drop/util.d.ts

@@ -31,12 +31,4 @@ export declare const setElementStyles: (renderer: Renderer2, elem: HTMLElement,
 /**
  * @hidden
  */
-export declare const allPointerDownEvents: string[];
-/**
- * @hidden
- */
-export declare const allPointerMoveEvents: string[];
-/**
- * @hidden
- */
-export declare const allPointerUpEvents: string[];
+export declare const noop: () => void;

package/esm2022/drag-and-drop/draghandle.directive.mjs

@@ -14,8 +14,9 @@ export class DragHandleDirective {
         this.element = element;
     }
     cursorStyle = 'move';
+    touchActionStyle = 'none';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragHandleDirective, isStandalone: true, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragHandleDirective, isStandalone: true, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle", "style.touch-action": "this.touchActionStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, decorators: [{
             type: Directive,
@@ -27,4 +28,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { cursorStyle: [{
                 type: HostBinding,
                 args: ['style.cursor']
+            }], touchActionStyle: [{
+                type: HostBinding,
+                args: ['style.touch-action']
             }] } });

package/esm2022/drag-and-drop/dragtarget-container.directive.mjs

@@ -4,10 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, Input, isDevMode, NgZone, Output, Renderer2, ViewContainerRef } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
-import { fromEvent, merge } from 'rxjs';
 import { packageMetadata } from '../package-metadata';
-import { filter } from 'rxjs/operators';
-import { closestBySelector, allPointerDownEvents, allPointerMoveEvents, allPointerUpEvents, getAction, isPresent, setElementStyles, dragTargetTransition } from './util';
+import { closestBySelector, getAction, isPresent, setElementStyles, dragTargetTransition, noop } from './util';
 import { getScrollableParent } from '@progress/kendo-draggable-common';
 import { DragStateService } from './drag-state.service';
 import { contains, isDocumentAvailable, parseCSSClassNames } from '@progress/kendo-angular-common';
@@ -106,7 +104,7 @@ export class DragTargetContainerDirective {
         this._dragDisabled = value;
         if (value) {
             this.clearPreviousTargets();
-            this.unsubscribe();
+            this.removeListeners();
             if (isPresent(this.hintElem)) {
                 this.destroyHint();
             }
@@ -158,10 +156,6 @@ export class DragTargetContainerDirective {
         this.cdr.detectChanges();
         this.initializeDragTargets();
     }
-    pointerDownSubscription;
-    pointerMoveSubscription;
-    pointerUpSubscription;
-    scrollSubscription;
     currentDragTarget = null;
     dragTimeout = null;
     pressed = false;
@@ -178,6 +172,7 @@ export class DragTargetContainerDirective {
     _dragDisabled = false;
     _dragData = () => null;
     _dragTargetId = () => null;
+    prevUserSelect;
     get allDragTargets() {
         return this.queryHost(this.dragTargetFilter);
     }
@@ -203,26 +198,53 @@ export class DragTargetContainerDirective {
         }
         !this.dragDisabled && this.initializeDragTargets();
     }
+    ngOnDestroy() {
+        this.removeListeners();
+    }
     onPointerDown(event) {
+        const filterElement = closestBySelector(event.target, this.isHandleSelectorValid ? this.dragHandle : this.dragTargetFilter);
+        if (this.dragTargetFilter === '' || !isPresent(filterElement)) {
+            return;
+        }
+        if (isPresent(this.dragHandles) && !this.isDragHandle(event.target)) {
+            return;
+        }
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+        this.subscribe();
+    }
+    onTouchStart(event) {
+        const filterElement = closestBySelector(event.target, this.isHandleSelectorValid ? this.dragHandle : this.dragTargetFilter);
+        if (this.dragTargetFilter === '' || !isPresent(filterElement)) {
+            return;
+        }
         if (isPresent(this.dragHandles) && !this.isDragHandle(event.target)) {
             return;
         }
+        event.preventDefault();
         const action = getAction(event, this.currentDragTarget);
         this.service.handleDragAndDrop(action);
         this.subscribe();
     }
     onPointerMove(event) {
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+    }
+    onTouchMove(event) {
         event.preventDefault();
         const action = getAction(event, this.currentDragTarget);
         this.service.handleDragAndDrop(action);
     }
     onPointerUp(event) {
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+        this.subscribe();
+    }
+    onContextMenu(event) {
         event.preventDefault();
         const action = getAction(event, this.currentDragTarget);
         this.service.handleDragAndDrop(action);
-        this.ngZone.runOutsideAngular(() => {
-            this.subscribe();
-        });
+        this.subscribe();
     }
     handlePress(event) {
         if (this.dragDelay > 0) {
@@ -234,12 +256,13 @@ export class DragTargetContainerDirective {
         else {
             this.pressed = true;
         }
-        event.originalEvent.preventDefault();
         const eventTarget = event.originalEvent.target;
         this.currentDragTargetElement = closestBySelector(eventTarget, this.dragTargetFilter);
         this.currentDragTarget.element = this.currentDragTargetElement;
         this.service.dragIndex = this.getDragIndex();
         this.scrollableParent = this.hintTemplate ? document.body : this.currentDragTargetElement ? getScrollableParent(this.currentDragTargetElement) : null;
+        this.prevUserSelect = this.currentDragTargetElement.style.userSelect;
+        this.renderer.setStyle(this.currentDragTargetElement, 'user-select', 'none');
         this.emitZoneAwareEvent('onPress', event);
     }
     handleDragStart(event) {
@@ -302,8 +325,11 @@ export class DragTargetContainerDirective {
         if (this.dragTimeout) {
             clearTimeout(this.dragTimeout);
             this.dragTimeout = null;
-            this.pressed = false;
         }
+        this.pressed = false;
+        this.prevUserSelect ? this.renderer.setStyle(this.currentDragTargetElement, 'user-select', this.prevUserSelect) :
+            this.renderer.removeStyle(this.currentDragTargetElement, 'user-select');
+        this.prevUserSelect = null;
         this.emitZoneAwareEvent('onRelease', event);
     }
     handleDragEnd(event) {
@@ -342,50 +368,63 @@ export class DragTargetContainerDirective {
     get hintElem() {
         return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
     }
-    unsubscribe() {
-        if (this.pointerDownSubscription) {
-            this.pointerDownSubscription.unsubscribe();
-        }
-        if (this.pointerMoveSubscription) {
-            this.pointerMoveSubscription.unsubscribe();
-        }
-        if (this.pointerUpSubscription) {
-            this.pointerUpSubscription.unsubscribe();
-        }
-        if (this.scrollSubscription) {
-            this.scrollSubscription.unsubscribe();
-        }
+    removeListeners() {
+        if (isPresent(this.scrollableParent)) {
+            this.scrollableParent.removeEventListener('scroll', this.onPointerMove);
+        }
+        const element = this.nativeElement;
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp, true);
+        document.removeEventListener('pointercancel', this.onPointerUp);
+        document.removeEventListener('contextmenu', this.onContextMenu);
+        window.removeEventListener('touchmove', noop);
+        element.removeEventListener('touchmove', this.onTouchMove);
+        element.removeEventListener('touchend', this.onPointerUp);
+        document.removeEventListener('mousemove', this.onPointerMove);
+        document.removeEventListener('mouseup', this.onPointerUp);
+        document.removeEventListener('touchcancel', this.onPointerUp);
+        element.removeEventListener('pointerdown', this.onPointerDown);
+        element.removeEventListener('mousedown', this.onPointerDown);
+        element.removeEventListener('touchstart', this.onTouchStart);
+    }
+    get supportPointerEvent() {
+        return Boolean(typeof window !== 'undefined' && window.PointerEvent);
     }
     subscribe() {
         this.ngZone.runOutsideAngular(() => {
-            this.unsubscribe();
+            this.removeListeners();
             if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
                 return;
             }
+            this.onPointerMove = this.onPointerMove.bind(this);
+            this.onPointerUp = this.onPointerUp.bind(this);
+            this.onTouchMove = this.onTouchMove.bind(this);
+            this.onContextMenu = this.onContextMenu.bind(this);
+            this.onPointerDown = this.onPointerDown.bind(this);
+            this.onTouchStart = this.onTouchStart.bind(this);
             const element = this.nativeElement;
-            if (this.service.pressed) {
-                const pointerMoveStreams = allPointerMoveEvents.map((ev) => fromEvent(document, ev));
-                const pointerUpStreams = allPointerUpEvents.map((ev) => fromEvent(document, ev));
-                this.pointerMoveSubscription = merge(...pointerMoveStreams)
-                    .pipe(filter(() => this.dragTargetFilter !== ''))
-                    .subscribe(e => this.onPointerMove(e));
-                this.pointerUpSubscription = merge(...pointerUpStreams)
-                    .subscribe(e => this.onPointerUp(e));
+            if (this.supportPointerEvent) {
                 if (isPresent(this.scrollableParent)) {
-                    this.scrollSubscription = fromEvent(this.scrollableParent, 'scroll')
-                        .subscribe(e => this.onPointerMove(e));
+                    this.scrollableParent.addEventListener('scroll', this.onPointerMove, { passive: true });
+                }
+                element.addEventListener('pointerdown', this.onPointerDown, { passive: true });
+                if (this.pressed) {
+                    document.addEventListener('pointermove', this.onPointerMove);
+                    document.addEventListener('pointerup', this.onPointerUp, true);
+                    document.addEventListener('contextmenu', this.onContextMenu);
+                    document.addEventListener('pointercancel', this.onPointerUp, { passive: true });
                 }
             }
             else {
-                const pointerDownStreams = allPointerDownEvents.map((ev) => fromEvent(element, ev));
-                this.pointerDownSubscription = merge(...pointerDownStreams)
-                    .pipe(filter(() => this.dragTargetFilter !== ''))
-                    .subscribe((e) => {
-                    const filterElement = closestBySelector(e.target, this.isHandleSelectorValid ? this.dragHandle : this.dragTargetFilter);
-                    if (filterElement) {
-                        this.onPointerDown(e);
-                    }
-                });
+                window.addEventListener('touchmove', noop, { capture: false, passive: false });
+                element.addEventListener('mousedown', this.onPointerDown, { passive: true });
+                element.addEventListener('touchstart', this.onTouchStart, { passive: true });
+                if (this.pressed) {
+                    document.addEventListener('mousemove', this.onPointerMove, { passive: true });
+                    document.addEventListener('mouseup', this.onPointerUp, { passive: true });
+                    element.addEventListener('touchmove', this.onTouchMove, { passive: true });
+                    element.addEventListener('touchend', this.onPointerUp, { passive: true });
+                }
             }
         });
     }
@@ -529,7 +568,7 @@ export class DragTargetContainerDirective {
             onDrag: this.handleDrag.bind(this),
             onDragEnd: this.handleDragEnd.bind(this)
         };
-        this.setCursorStyle();
+        this.setTargetStyles();
     }
     isDragHandle(el) {
         return this.dragHandles.some(dh => contains(dh, el, true));
@@ -537,7 +576,7 @@ export class DragTargetContainerDirective {
     get isHandleSelectorValid() {
         return isPresent(this.dragHandle) && this.dragHandle !== '';
     }
-    setCursorStyle() {
+    setTargetStyles() {
         if (!isDocumentAvailable()) {
             return;
         }
@@ -545,12 +584,14 @@ export class DragTargetContainerDirective {
             if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
                 this.dragHandles.forEach(handle => {
                     this.renderer.setStyle(handle, 'cursor', 'move');
+                    this.renderer.setStyle(handle, 'touch-action', 'none');
                 });
             }
         }
         else {
             this.allDragTargets.forEach(target => {
                 this.renderer.setStyle(target, 'cursor', 'move');
+                this.renderer.setStyle(target, 'touch-action', 'none');
             });
         }
     }

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

@@ -2,13 +2,13 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, EventEmitter, Output, ElementRef, Renderer2, NgZone, Input, ContentChildren, QueryList, ViewContainerRef, isDevMode } from "@angular/core";
+import { Directive, EventEmitter, Output, ElementRef, Renderer2, NgZone, Input, ContentChildren, QueryList, ViewContainerRef, isDevMode, HostBinding } 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 { DragStateService } from "./drag-state.service";
-import { getAction, isPresent, setElementStyles, dragTargetTransition } from './util';
+import { getAction, isPresent, setElementStyles, dragTargetTransition, noop } from './util';
 import { contains, isDocumentAvailable, parseCSSClassNames } from "@progress/kendo-angular-common";
 import { HintComponent } from "./hint.component";
 import { DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragStartEvent, DragTargetPressEvent } from "./events/drag-target";
@@ -27,6 +27,9 @@ export class DragTargetDirective {
     ngZone;
     service;
     viewContainer;
+    get touchActionStyle() {
+        return this.dragHandles.length > 0 ? null : 'none';
+    }
     /**
      * 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 %})).
      *
@@ -104,7 +107,6 @@ export class DragTargetDirective {
      */
     onDragEnd = new EventEmitter();
     dragTarget = null;
-    domSubscriptions = [];
     hintComponent = null;
     dragStarted = false;
     pressed = false;
@@ -114,6 +116,7 @@ export class DragTargetDirective {
     scrollableParent = null;
     defaultHint = null;
     _dragData = () => null;
+    prevUserSelect;
     get hintTemplate() {
         return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
     }
@@ -124,6 +127,17 @@ export class DragTargetDirective {
         return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
     }
     onPointerDown(event) {
+        if (this.dragHandles.length && !this.isDragHandle(event.target)) {
+            return;
+        }
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+        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.attachDomHandlers();
+    }
+    onTouchStart(event) {
         if (this.dragHandles.length && !this.isDragHandle(event.target)) {
             return;
         }
@@ -136,11 +150,20 @@ export class DragTargetDirective {
         this.attachDomHandlers();
     }
     onPointerMove(event) {
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+    }
+    onTouchMove(event) {
         event.preventDefault();
         const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
     }
     onPointerUp(event) {
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+        this.attachDomHandlers();
+    }
+    onContextMenu(event) {
         event.preventDefault();
         const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
@@ -168,7 +191,7 @@ export class DragTargetDirective {
         this.service.dragTargets.push(this.dragTarget);
     }
     ngOnDestroy() {
-        this.domSubscriptions.forEach(subscription => subscription());
+        this.removeListeners();
         const currentDragTargetIndex = this.service.dragTargets.indexOf(this.dragTarget);
         this.service.dragTargets.splice(currentDragTargetIndex, 1);
     }
@@ -183,6 +206,8 @@ export class DragTargetDirective {
             this.pressed = true;
         }
         this.scrollableParent = this.dragTarget.element ? getScrollableParent(this.dragTarget.element) : null;
+        this.prevUserSelect = this.dragTarget.element.style.userSelect;
+        this.renderer.setStyle(this.dragTarget.element, 'user-select', 'none');
         this.emitZoneAwareEvent('onPress', event);
     }
     handleDragStart(event) {
@@ -240,8 +265,11 @@ export class DragTargetDirective {
         if (this.dragTimeout) {
             clearTimeout(this.dragTimeout);
             this.dragTimeout = null;
-            this.pressed = false;
         }
+        this.pressed = false;
+        this.prevUserSelect ? this.renderer.setStyle(this.dragTarget.element, 'user-select', this.prevUserSelect) :
+            this.renderer.removeStyle(this.dragTarget.element, 'user-select');
+        this.prevUserSelect = null;
         this.emitZoneAwareEvent('onRelease', event);
     }
     handleDragEnd(event) {
@@ -281,43 +309,66 @@ export class DragTargetDirective {
             onDragEnd: this.handleDragEnd.bind(this)
         };
     }
+    get supportPointerEvent() {
+        return Boolean(typeof window !== 'undefined' && window.PointerEvent);
+    }
+    removeListeners() {
+        if (isPresent(this.scrollableParent)) {
+            this.scrollableParent.removeEventListener('scroll', this.onPointerMove);
+        }
+        const element = this.nativeElement;
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp, true);
+        document.removeEventListener('contextmenu', this.onContextMenu);
+        document.removeEventListener('pointercancel', this.onPointerUp);
+        window.removeEventListener('touchmove', noop);
+        element.removeEventListener('touchmove', this.onTouchMove);
+        element.removeEventListener('touchend', this.onPointerUp);
+        document.removeEventListener('mousemove', this.onPointerMove);
+        document.removeEventListener('mouseup', this.onPointerUp);
+        document.removeEventListener('touchcancel', this.onPointerUp);
+        element.removeEventListener('pointerdown', this.onPointerDown);
+        element.removeEventListener('mousedown', this.onPointerDown);
+        element.removeEventListener('touchstart', this.onTouchStart);
+    }
     attachDomHandlers() {
         this.ngZone.runOutsideAngular(() => {
-            if (this.domSubscriptions.length > 0) {
-                this.domSubscriptions.forEach(subscription => subscription());
-            }
+            this.removeListeners();
             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)
-                ];
+            this.onPointerMove = this.onPointerMove.bind(this);
+            this.onPointerUp = this.onPointerUp.bind(this);
+            this.onTouchMove = this.onTouchMove.bind(this);
+            this.onContextMenu = this.onContextMenu.bind(this);
+            this.onPointerDown = this.onPointerDown.bind(this);
+            this.onTouchStart = this.onTouchStart.bind(this);
+            const element = this.nativeElement;
+            if (this.supportPointerEvent) {
                 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.scrollableParent.addEventListener('scroll', this.onPointerMove, { passive: true });
+                }
+                element.addEventListener('pointerdown', this.onPointerDown, { passive: true });
+                if (this.pressed) {
+                    document.addEventListener('pointermove', this.onPointerMove);
+                    document.addEventListener('pointerup', this.onPointerUp, true);
+                    document.addEventListener('contextmenu', this.onContextMenu);
+                    document.addEventListener('pointercancel', this.onPointerUp, { passive: true });
                 }
             }
             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)
-                ];
+                window.addEventListener('touchmove', noop, { capture: false, passive: false });
+                element.addEventListener('mousedown', this.onPointerDown, { passive: true });
+                element.addEventListener('touchstart', this.onTouchStart, { passive: true });
+                if (this.pressed) {
+                    document.addEventListener('mousemove', this.onPointerMove, { passive: true });
+                    document.addEventListener('mouseup', this.onPointerUp, { passive: true });
+                    element.addEventListener('touchmove', this.onTouchMove, { passive: true });
+                    element.addEventListener('touchend', this.onPointerUp, { passive: true });
+                }
             }
         });
     }
@@ -477,7 +528,7 @@ export class DragTargetDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragTargetDirective, isStandalone: true, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onDragReady: "onDragReady", onRelease: "onRelease", onDragEnd: "onDragEnd" }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragTargetDirective, isStandalone: true, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onDragReady: "onDragReady", onRelease: "onRelease", onDragEnd: "onDragEnd" }, host: { properties: { "style.touch-action": "this.touchActionStyle" } }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragTargetDirective, decorators: [{
             type: Directive,
@@ -486,7 +537,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoDragTarget',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.DragStateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { hint: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.DragStateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { touchActionStyle: [{
+                type: HostBinding,
+                args: ['style.touch-action']
+            }], hint: [{
                 type: Input
             }], threshold: [{
                 type: Input

package/esm2022/drag-and-drop/droptarget-container.directive.mjs

@@ -107,8 +107,8 @@ export class DropTargetContainerDirective {
         if (!this.service.dragTargetPresent || this.service.dropTargetPresent) {
             return;
         }
-        const eventTarget = event.originalEvent.target;
-        const currDropTargetElem = intersect(eventTarget, this.allDropTargets);
+        const currDragTargetElement = this.service.dragTarget.hint || this.service.dragTarget.element;
+        const currDropTargetElem = intersect(currDragTargetElement, this.allDropTargets);
         const currDropTarget = this.service.dropTargets.find(dt => dt.element === currDropTargetElem);
         if (!isPresent(currDropTargetElem) || !isPresent(currDropTarget)) {
             return;

package/esm2022/drag-and-drop/util.mjs

@@ -87,12 +87,4 @@ export const setElementStyles = (renderer, elem, styles) => {
 /**
  * @hidden
  */
-export const allPointerDownEvents = ['pointerdown', 'mousedown', 'touchstart'];
-/**
- * @hidden
- */
-export const allPointerMoveEvents = ['pointermove', 'mousemove', 'touchmove'];
-/**
- * @hidden
- */
-export const allPointerUpEvents = ['pointerup', 'pointercancel', 'mouseup', 'contextmenu', 'touchend', 'touchcancel'];
+export const noop = () => { };

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-utils',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1733824851,
-    version: '17.1.2-develop.1',
+    publishDate: 1734351362,
+    version: '17.1.2-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2022/progress-kendo-angular-utils.mjs

@@ -5,8 +5,6 @@
 import * as i0 from '@angular/core';
 import { Directive, HostBinding, Injectable, Component, Input, isDevMode, EventEmitter, Output, ContentChildren, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
-import { fromEvent, merge } from 'rxjs';
-import { filter } from 'rxjs/operators';
 import { dispatchDragAndDrop, getScrollableParent, autoScroll } from '@progress/kendo-draggable-common';
 import { PreventableEvent, contains, isDocumentAvailable, parseCSSClassNames } from '@progress/kendo-angular-common';
 import { NgTemplateOutlet } from '@angular/common';
@@ -21,8 +19,9 @@ class DragHandleDirective {
         this.element = element;
     }
     cursorStyle = 'move';
+    touchActionStyle = 'none';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragHandleDirective, isStandalone: true, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragHandleDirective, isStandalone: true, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle", "style.touch-action": "this.touchActionStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, decorators: [{
             type: Directive,
@@ -34,6 +33,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { cursorStyle: [{
                 type: HostBinding,
                 args: ['style.cursor']
+            }], touchActionStyle: [{
+                type: HostBinding,
+                args: ['style.touch-action']
             }] } });
 
 /**
@@ -43,8 +45,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-utils',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1733824851,
-    version: '17.1.2-develop.1',
+    publishDate: 1734351362,
+    version: '17.1.2-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -133,15 +135,7 @@ const setElementStyles = (renderer, elem, styles) => {
 /**
  * @hidden
  */
-const allPointerDownEvents = ['pointerdown', 'mousedown', 'touchstart'];
-/**
- * @hidden
- */
-const allPointerMoveEvents = ['pointermove', 'mousemove', 'touchmove'];
-/**
- * @hidden
- */
-const allPointerUpEvents = ['pointerup', 'pointercancel', 'mouseup', 'contextmenu', 'touchend', 'touchcancel'];
+const noop = () => { };
 
 /**
  * @hidden
@@ -653,7 +647,7 @@ class DragTargetContainerDirective {
         this._dragDisabled = value;
         if (value) {
             this.clearPreviousTargets();
-            this.unsubscribe();
+            this.removeListeners();
             if (isPresent(this.hintElem)) {
                 this.destroyHint();
             }
@@ -705,10 +699,6 @@ class DragTargetContainerDirective {
         this.cdr.detectChanges();
         this.initializeDragTargets();
     }
-    pointerDownSubscription;
-    pointerMoveSubscription;
-    pointerUpSubscription;
-    scrollSubscription;
     currentDragTarget = null;
     dragTimeout = null;
     pressed = false;
@@ -725,6 +715,7 @@ class DragTargetContainerDirective {
     _dragDisabled = false;
     _dragData = () => null;
     _dragTargetId = () => null;
+    prevUserSelect;
     get allDragTargets() {
         return this.queryHost(this.dragTargetFilter);
     }
@@ -750,7 +741,14 @@ class DragTargetContainerDirective {
         }
         !this.dragDisabled && this.initializeDragTargets();
     }
+    ngOnDestroy() {
+        this.removeListeners();
+    }
     onPointerDown(event) {
+        const filterElement = closestBySelector(event.target, this.isHandleSelectorValid ? this.dragHandle : this.dragTargetFilter);
+        if (this.dragTargetFilter === '' || !isPresent(filterElement)) {
+            return;
+        }
         if (isPresent(this.dragHandles) && !this.isDragHandle(event.target)) {
             return;
         }
@@ -758,18 +756,38 @@ class DragTargetContainerDirective {
         this.service.handleDragAndDrop(action);
         this.subscribe();
     }
+    onTouchStart(event) {
+        const filterElement = closestBySelector(event.target, this.isHandleSelectorValid ? this.dragHandle : this.dragTargetFilter);
+        if (this.dragTargetFilter === '' || !isPresent(filterElement)) {
+            return;
+        }
+        if (isPresent(this.dragHandles) && !this.isDragHandle(event.target)) {
+            return;
+        }
+        event.preventDefault();
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+        this.subscribe();
+    }
     onPointerMove(event) {
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+    }
+    onTouchMove(event) {
         event.preventDefault();
         const action = getAction(event, this.currentDragTarget);
         this.service.handleDragAndDrop(action);
     }
     onPointerUp(event) {
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+        this.subscribe();
+    }
+    onContextMenu(event) {
         event.preventDefault();
         const action = getAction(event, this.currentDragTarget);
         this.service.handleDragAndDrop(action);
-        this.ngZone.runOutsideAngular(() => {
-            this.subscribe();
-        });
+        this.subscribe();
     }
     handlePress(event) {
         if (this.dragDelay > 0) {
@@ -781,12 +799,13 @@ class DragTargetContainerDirective {
         else {
             this.pressed = true;
         }
-        event.originalEvent.preventDefault();
         const eventTarget = event.originalEvent.target;
         this.currentDragTargetElement = closestBySelector(eventTarget, this.dragTargetFilter);
         this.currentDragTarget.element = this.currentDragTargetElement;
         this.service.dragIndex = this.getDragIndex();
         this.scrollableParent = this.hintTemplate ? document.body : this.currentDragTargetElement ? getScrollableParent(this.currentDragTargetElement) : null;
+        this.prevUserSelect = this.currentDragTargetElement.style.userSelect;
+        this.renderer.setStyle(this.currentDragTargetElement, 'user-select', 'none');
         this.emitZoneAwareEvent('onPress', event);
     }
     handleDragStart(event) {
@@ -849,8 +868,11 @@ class DragTargetContainerDirective {
         if (this.dragTimeout) {
             clearTimeout(this.dragTimeout);
             this.dragTimeout = null;
-            this.pressed = false;
         }
+        this.pressed = false;
+        this.prevUserSelect ? this.renderer.setStyle(this.currentDragTargetElement, 'user-select', this.prevUserSelect) :
+            this.renderer.removeStyle(this.currentDragTargetElement, 'user-select');
+        this.prevUserSelect = null;
         this.emitZoneAwareEvent('onRelease', event);
     }
     handleDragEnd(event) {
@@ -889,50 +911,63 @@ class DragTargetContainerDirective {
     get hintElem() {
         return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
     }
-    unsubscribe() {
-        if (this.pointerDownSubscription) {
-            this.pointerDownSubscription.unsubscribe();
-        }
-        if (this.pointerMoveSubscription) {
-            this.pointerMoveSubscription.unsubscribe();
-        }
-        if (this.pointerUpSubscription) {
-            this.pointerUpSubscription.unsubscribe();
-        }
-        if (this.scrollSubscription) {
-            this.scrollSubscription.unsubscribe();
-        }
+    removeListeners() {
+        if (isPresent(this.scrollableParent)) {
+            this.scrollableParent.removeEventListener('scroll', this.onPointerMove);
+        }
+        const element = this.nativeElement;
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp, true);
+        document.removeEventListener('pointercancel', this.onPointerUp);
+        document.removeEventListener('contextmenu', this.onContextMenu);
+        window.removeEventListener('touchmove', noop);
+        element.removeEventListener('touchmove', this.onTouchMove);
+        element.removeEventListener('touchend', this.onPointerUp);
+        document.removeEventListener('mousemove', this.onPointerMove);
+        document.removeEventListener('mouseup', this.onPointerUp);
+        document.removeEventListener('touchcancel', this.onPointerUp);
+        element.removeEventListener('pointerdown', this.onPointerDown);
+        element.removeEventListener('mousedown', this.onPointerDown);
+        element.removeEventListener('touchstart', this.onTouchStart);
+    }
+    get supportPointerEvent() {
+        return Boolean(typeof window !== 'undefined' && window.PointerEvent);
     }
     subscribe() {
         this.ngZone.runOutsideAngular(() => {
-            this.unsubscribe();
+            this.removeListeners();
             if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
                 return;
             }
+            this.onPointerMove = this.onPointerMove.bind(this);
+            this.onPointerUp = this.onPointerUp.bind(this);
+            this.onTouchMove = this.onTouchMove.bind(this);
+            this.onContextMenu = this.onContextMenu.bind(this);
+            this.onPointerDown = this.onPointerDown.bind(this);
+            this.onTouchStart = this.onTouchStart.bind(this);
             const element = this.nativeElement;
-            if (this.service.pressed) {
-                const pointerMoveStreams = allPointerMoveEvents.map((ev) => fromEvent(document, ev));
-                const pointerUpStreams = allPointerUpEvents.map((ev) => fromEvent(document, ev));
-                this.pointerMoveSubscription = merge(...pointerMoveStreams)
-                    .pipe(filter(() => this.dragTargetFilter !== ''))
-                    .subscribe(e => this.onPointerMove(e));
-                this.pointerUpSubscription = merge(...pointerUpStreams)
-                    .subscribe(e => this.onPointerUp(e));
+            if (this.supportPointerEvent) {
                 if (isPresent(this.scrollableParent)) {
-                    this.scrollSubscription = fromEvent(this.scrollableParent, 'scroll')
-                        .subscribe(e => this.onPointerMove(e));
+                    this.scrollableParent.addEventListener('scroll', this.onPointerMove, { passive: true });
+                }
+                element.addEventListener('pointerdown', this.onPointerDown, { passive: true });
+                if (this.pressed) {
+                    document.addEventListener('pointermove', this.onPointerMove);
+                    document.addEventListener('pointerup', this.onPointerUp, true);
+                    document.addEventListener('contextmenu', this.onContextMenu);
+                    document.addEventListener('pointercancel', this.onPointerUp, { passive: true });
                 }
             }
             else {
-                const pointerDownStreams = allPointerDownEvents.map((ev) => fromEvent(element, ev));
-                this.pointerDownSubscription = merge(...pointerDownStreams)
-                    .pipe(filter(() => this.dragTargetFilter !== ''))
-                    .subscribe((e) => {
-                    const filterElement = closestBySelector(e.target, this.isHandleSelectorValid ? this.dragHandle : this.dragTargetFilter);
-                    if (filterElement) {
-                        this.onPointerDown(e);
-                    }
-                });
+                window.addEventListener('touchmove', noop, { capture: false, passive: false });
+                element.addEventListener('mousedown', this.onPointerDown, { passive: true });
+                element.addEventListener('touchstart', this.onTouchStart, { passive: true });
+                if (this.pressed) {
+                    document.addEventListener('mousemove', this.onPointerMove, { passive: true });
+                    document.addEventListener('mouseup', this.onPointerUp, { passive: true });
+                    element.addEventListener('touchmove', this.onTouchMove, { passive: true });
+                    element.addEventListener('touchend', this.onPointerUp, { passive: true });
+                }
             }
         });
     }
@@ -1076,7 +1111,7 @@ class DragTargetContainerDirective {
             onDrag: this.handleDrag.bind(this),
             onDragEnd: this.handleDragEnd.bind(this)
         };
-        this.setCursorStyle();
+        this.setTargetStyles();
     }
     isDragHandle(el) {
         return this.dragHandles.some(dh => contains(dh, el, true));
@@ -1084,7 +1119,7 @@ class DragTargetContainerDirective {
     get isHandleSelectorValid() {
         return isPresent(this.dragHandle) && this.dragHandle !== '';
     }
-    setCursorStyle() {
+    setTargetStyles() {
         if (!isDocumentAvailable()) {
             return;
         }
@@ -1092,12 +1127,14 @@ class DragTargetContainerDirective {
             if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
                 this.dragHandles.forEach(handle => {
                     this.renderer.setStyle(handle, 'cursor', 'move');
+                    this.renderer.setStyle(handle, 'touch-action', 'none');
                 });
             }
         }
         else {
             this.allDragTargets.forEach(target => {
                 this.renderer.setStyle(target, 'cursor', 'move');
+                this.renderer.setStyle(target, 'touch-action', 'none');
             });
         }
     }
@@ -1204,6 +1241,9 @@ class DragTargetDirective {
     ngZone;
     service;
     viewContainer;
+    get touchActionStyle() {
+        return this.dragHandles.length > 0 ? null : 'none';
+    }
     /**
      * 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 %})).
      *
@@ -1281,7 +1321,6 @@ class DragTargetDirective {
      */
     onDragEnd = new EventEmitter();
     dragTarget = null;
-    domSubscriptions = [];
     hintComponent = null;
     dragStarted = false;
     pressed = false;
@@ -1291,6 +1330,7 @@ class DragTargetDirective {
     scrollableParent = null;
     defaultHint = null;
     _dragData = () => null;
+    prevUserSelect;
     get hintTemplate() {
         return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
     }
@@ -1301,6 +1341,17 @@ class DragTargetDirective {
         return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
     }
     onPointerDown(event) {
+        if (this.dragHandles.length && !this.isDragHandle(event.target)) {
+            return;
+        }
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+        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.attachDomHandlers();
+    }
+    onTouchStart(event) {
         if (this.dragHandles.length && !this.isDragHandle(event.target)) {
             return;
         }
@@ -1313,11 +1364,20 @@ class DragTargetDirective {
         this.attachDomHandlers();
     }
     onPointerMove(event) {
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+    }
+    onTouchMove(event) {
         event.preventDefault();
         const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
     }
     onPointerUp(event) {
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+        this.attachDomHandlers();
+    }
+    onContextMenu(event) {
         event.preventDefault();
         const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
@@ -1345,7 +1405,7 @@ class DragTargetDirective {
         this.service.dragTargets.push(this.dragTarget);
     }
     ngOnDestroy() {
-        this.domSubscriptions.forEach(subscription => subscription());
+        this.removeListeners();
         const currentDragTargetIndex = this.service.dragTargets.indexOf(this.dragTarget);
         this.service.dragTargets.splice(currentDragTargetIndex, 1);
     }
@@ -1360,6 +1420,8 @@ class DragTargetDirective {
             this.pressed = true;
         }
         this.scrollableParent = this.dragTarget.element ? getScrollableParent(this.dragTarget.element) : null;
+        this.prevUserSelect = this.dragTarget.element.style.userSelect;
+        this.renderer.setStyle(this.dragTarget.element, 'user-select', 'none');
         this.emitZoneAwareEvent('onPress', event);
     }
     handleDragStart(event) {
@@ -1417,8 +1479,11 @@ class DragTargetDirective {
         if (this.dragTimeout) {
             clearTimeout(this.dragTimeout);
             this.dragTimeout = null;
-            this.pressed = false;
         }
+        this.pressed = false;
+        this.prevUserSelect ? this.renderer.setStyle(this.dragTarget.element, 'user-select', this.prevUserSelect) :
+            this.renderer.removeStyle(this.dragTarget.element, 'user-select');
+        this.prevUserSelect = null;
         this.emitZoneAwareEvent('onRelease', event);
     }
     handleDragEnd(event) {
@@ -1458,43 +1523,66 @@ class DragTargetDirective {
             onDragEnd: this.handleDragEnd.bind(this)
         };
     }
+    get supportPointerEvent() {
+        return Boolean(typeof window !== 'undefined' && window.PointerEvent);
+    }
+    removeListeners() {
+        if (isPresent(this.scrollableParent)) {
+            this.scrollableParent.removeEventListener('scroll', this.onPointerMove);
+        }
+        const element = this.nativeElement;
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp, true);
+        document.removeEventListener('contextmenu', this.onContextMenu);
+        document.removeEventListener('pointercancel', this.onPointerUp);
+        window.removeEventListener('touchmove', noop);
+        element.removeEventListener('touchmove', this.onTouchMove);
+        element.removeEventListener('touchend', this.onPointerUp);
+        document.removeEventListener('mousemove', this.onPointerMove);
+        document.removeEventListener('mouseup', this.onPointerUp);
+        document.removeEventListener('touchcancel', this.onPointerUp);
+        element.removeEventListener('pointerdown', this.onPointerDown);
+        element.removeEventListener('mousedown', this.onPointerDown);
+        element.removeEventListener('touchstart', this.onTouchStart);
+    }
     attachDomHandlers() {
         this.ngZone.runOutsideAngular(() => {
-            if (this.domSubscriptions.length > 0) {
-                this.domSubscriptions.forEach(subscription => subscription());
-            }
+            this.removeListeners();
             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)
-                ];
+            this.onPointerMove = this.onPointerMove.bind(this);
+            this.onPointerUp = this.onPointerUp.bind(this);
+            this.onTouchMove = this.onTouchMove.bind(this);
+            this.onContextMenu = this.onContextMenu.bind(this);
+            this.onPointerDown = this.onPointerDown.bind(this);
+            this.onTouchStart = this.onTouchStart.bind(this);
+            const element = this.nativeElement;
+            if (this.supportPointerEvent) {
                 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.scrollableParent.addEventListener('scroll', this.onPointerMove, { passive: true });
+                }
+                element.addEventListener('pointerdown', this.onPointerDown, { passive: true });
+                if (this.pressed) {
+                    document.addEventListener('pointermove', this.onPointerMove);
+                    document.addEventListener('pointerup', this.onPointerUp, true);
+                    document.addEventListener('contextmenu', this.onContextMenu);
+                    document.addEventListener('pointercancel', this.onPointerUp, { passive: true });
                 }
             }
             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)
-                ];
+                window.addEventListener('touchmove', noop, { capture: false, passive: false });
+                element.addEventListener('mousedown', this.onPointerDown, { passive: true });
+                element.addEventListener('touchstart', this.onTouchStart, { passive: true });
+                if (this.pressed) {
+                    document.addEventListener('mousemove', this.onPointerMove, { passive: true });
+                    document.addEventListener('mouseup', this.onPointerUp, { passive: true });
+                    element.addEventListener('touchmove', this.onTouchMove, { passive: true });
+                    element.addEventListener('touchend', this.onPointerUp, { passive: true });
+                }
             }
         });
     }
@@ -1654,7 +1742,7 @@ class DragTargetDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: DragStateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragTargetDirective, isStandalone: true, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onDragReady: "onDragReady", onRelease: "onRelease", onDragEnd: "onDragEnd" }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragTargetDirective, isStandalone: true, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onDragReady: "onDragReady", onRelease: "onRelease", onDragEnd: "onDragEnd" }, host: { properties: { "style.touch-action": "this.touchActionStyle" } }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragTargetDirective, decorators: [{
             type: Directive,
@@ -1663,7 +1751,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoDragTarget',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: DragStateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { hint: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: DragStateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { touchActionStyle: [{
+                type: HostBinding,
+                args: ['style.touch-action']
+            }], hint: [{
                 type: Input
             }], threshold: [{
                 type: Input
@@ -1843,8 +1934,8 @@ class DropTargetContainerDirective {
         if (!this.service.dragTargetPresent || this.service.dropTargetPresent) {
             return;
         }
-        const eventTarget = event.originalEvent.target;
-        const currDropTargetElem = intersect(eventTarget, this.allDropTargets);
+        const currDragTargetElement = this.service.dragTarget.hint || this.service.dragTarget.element;
+        const currDropTargetElem = intersect(currDragTargetElement, this.allDropTargets);
         const currDropTarget = this.service.dropTargets.find(dt => dt.element === currDropTargetElem);
         if (!isPresent(currDropTargetElem) || !isPresent(currDropTarget)) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-utils",
-  "version": "17.1.2-develop.1",
+  "version": "17.1.2-develop.3",
   "description": "Kendo UI Angular utils component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,12 +23,12 @@
     "@angular/core": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "17.1.2-develop.1",
+    "@progress/kendo-angular-common": "17.1.2-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.1.2-develop.1",
+    "@progress/kendo-angular-schematics": "17.1.2-develop.3",
     "@progress/kendo-draggable-common": "^0.2.3"
   },
   "schematics": "./schematics/collection.json",