@progress/kendo-angular-utils 16.5.0 → 16.6.0-develop.2

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

@@ -4,25 +4,12 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { Directive, HostBinding, Component, Input, Injectable, EventEmitter, isDevMode, Output, ContentChildren, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { validatePackage } from '@progress/kendo-licensing';
-import { dispatchDragAndDrop, getScrollableParent, autoScroll } from '@progress/kendo-draggable-common';
-import { PreventableEvent, contains, isDocumentAvailable, parseCSSClassNames } from '@progress/kendo-angular-common';
 import { fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
-
-/**
- * @hidden
- */
-const packageMetadata = {
-    name: '@progress/kendo-angular-utils',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1721814063,
-    version: '16.5.0',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
-};
+import { dispatchDragAndDrop, getScrollableParent, autoScroll } from '@progress/kendo-draggable-common';
+import { PreventableEvent, contains, isDocumentAvailable, parseCSSClassNames } from '@progress/kendo-angular-common';
+import { NgTemplateOutlet } from '@angular/common';
 
 /**
  * Represents the Kendo UI DragHandle directive for Angular.
@@ -35,18 +22,31 @@ class DragHandleDirective {
     }
 }
 DragHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-DragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragHandleDirective, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
+DragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragHandleDirective, isStandalone: true, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDragHandle]',
-                    exportAs: 'kendoDragHandle'
+                    exportAs: 'kendoDragHandle',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { cursorStyle: [{
                 type: HostBinding,
                 args: ['style.cursor']
             }] } });
 
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-utils',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1721846973,
+    version: '16.6.0-develop.2',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
+};
+
 function isDocumentNode(container) {
     return container.nodeType === 9;
 }
@@ -152,10 +152,10 @@ class HintComponent {
     }
 }
 HintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HintComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-HintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HintComponent, selector: "kendo-draghint", inputs: { template: "template", directive: "directive", targetIndex: "targetIndex", contextData: "contextData" }, host: { properties: { "style.pointer-events": "this.pointerEvents" } }, ngImport: i0, template: `
+HintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HintComponent, isStandalone: true, selector: "kendo-draghint", inputs: { template: "template", directive: "directive", targetIndex: "targetIndex", contextData: "contextData" }, host: { properties: { "style.pointer-events": "this.pointerEvents" } }, ngImport: i0, template: `
         <ng-container *ngTemplateOutlet="template; context: { $implicit: directive, index: targetIndex, data: contextData }">
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HintComponent, decorators: [{
             type: Component,
             args: [{
@@ -163,7 +163,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <ng-container *ngTemplateOutlet="template; context: { $implicit: directive, index: targetIndex, data: contextData }">
         </ng-container>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgTemplateOutlet]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { template: [{
                 type: Input
@@ -455,39 +457,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 let isDragStartPrevented$1 = false;
 let isDragPrevented$1 = false;
 /**
- * Represents the Kendo UI DragTarget directive for Angular.
+ * Represents the [Kendo UI DragTargetContainer directive for Angular]({% slug api_utils_dragtargetcontainerdirective %}).
+ * Used to configure multiple elements as draggable.
+ *
+ * @example
+ * ```ts-no-run
+ * <ul kendoDragTargetContainer dragTargetFilter=".my-draggable">
+ *    <li class="my-draggable">foo</li>
+ * </ul>
+ * ```
  */
-class DragTargetDirective {
-    constructor(element, renderer, ngZone, service, viewContainer) {
-        this.element = element;
-        this.renderer = renderer;
+class DragTargetContainerDirective {
+    constructor(wrapper, ngZone, renderer, service, viewContainer, cdr) {
+        this.wrapper = wrapper;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         this.service = service;
         this.viewContainer = viewContainer;
+        this.cdr = cdr;
         /**
-         * 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 %})).
+         * Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. ([see example]({% slug drag_hint %})).
          *
          * @default false
          */
         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`.
+         * Defines the delay in milliseconds after which the drag will begin ([see example](slug drag_target_container#toc-events)).
          *
          * @default 0
          */
-        this.threshold = 0;
-        /**
-         * Defines the automatic container scrolling behavior when close to the edge ([see example]({% slug auto_scroll %})).
-         *
-         * @default true
-         */
-        this.autoScroll = true;
+        this.dragDelay = 0;
         /**
-         * Defines the delay in milliseconds after which the drag will begin ([see example]({% slug drag_delay %})).
+         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})).
          *
          * @default 0
          */
-        this.dragDelay = 0;
+        this.threshold = 0;
         /**
          * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
          *
@@ -495,46 +500,77 @@ class DragTargetDirective {
          */
         this.mode = 'auto';
         /**
-         * Fires when the user presses the DragTarget element.
+         * Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
          */
-        this.onPress = new EventEmitter();
+        this.onDragReady = new EventEmitter();
         /**
-         * Fires when the dragging of the DragTarget element begins.
+         * Fires when the user presses a DragTarget element.
          */
+        this.onPress = new EventEmitter();
+        /**
+         * Fires when the dragging of a DragTarget element begins.
+        */
         this.onDragStart = new EventEmitter();
         /**
-         * Fires while the user drags the DragTarget element.
+         * Fires while the user drags a DragTarget element.
          */
         this.onDrag = new EventEmitter();
         /**
-         * Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
-         */
-        this.onDragReady = new EventEmitter();
-        /**
-         * Fires when the user releases the DragTarget element after being pressed.
+         * Fires when the user releases a DragTarget element after being pressed.
          */
         this.onRelease = new EventEmitter();
         /**
-         * Fires when the dragging of the DragTarget ends and the element is released.
+         * Fires when the dragging of a DragTarget ends and the element is released.
          */
         this.onDragEnd = new EventEmitter();
-        this.dragTarget = null;
-        this.domSubscriptions = [];
-        this.hintComponent = null;
-        this.dragStarted = false;
-        this.pressed = false;
+        this.currentDragTarget = null;
         this.dragTimeout = null;
+        this.pressed = false;
+        this.dragStarted = false;
+        this.hintComponent = null;
+        this.defaultHint = null;
+        this.currentDragTargetElement = null;
+        this.scrollableParent = null;
+        this.previousDragTargets = [];
         this.initialPosition = { x: 0, y: 0 };
         this.position = { x: 0, y: 0 };
-        this.scrollableParent = null;
-        this.defaultHint = null;
+        this.positionsMap = new Map();
+        this._dragTargetFilter = null;
+        this._dragDisabled = false;
         this._dragData = () => null;
+        this._dragTargetId = () => null;
         validatePackage(packageMetadata);
     }
     /**
-     * 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.
+     * Specifies a selector for elements within a container which will be configured as draggable
+     * ([see example]({% slug drag_target_container %})). The possible values include any
+     * DOM `selector`.
+     */
+    set dragTargetFilter(value) {
+        this._dragTargetFilter = value;
+        if (!this.dragDisabled) {
+            this.initializeDragTargets();
+        }
+    }
+    get dragTargetFilter() {
+        return this._dragTargetFilter;
+    }
+    /**
+     * Defines a unique identifier for each drag target.
+     * It exposes the current DragTarget HTML element and its index in the collection of drag targets as arguments.
+     */
+    set dragTargetId(fn) {
+        if (isDevMode && typeof fn !== 'function') {
+            throw new Error(`dragTargetId must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._dragTargetId = fn;
+    }
+    get dragTargetId() {
+        return this._dragTargetId;
+    }
+    /**
+     * Defines a callback function which returns custom data passed to the DropTarget events.
+     * It exposes the current DragTarget HTML element, its `dragTargetId` and its index in the collection of drag targets as arguments.
      */
     set dragData(fn) {
         if (isDevMode && typeof fn !== 'function') {
@@ -545,52 +581,73 @@ class DragTargetDirective {
     get dragData() {
         return this._dragData;
     }
+    /**
+     * If set to true, the dragging of DragTargets within the container will be disabled.
+     *
+     * @default false
+     */
+    set dragDisabled(value) {
+        this._dragDisabled = value;
+        if (value) {
+            this.clearPreviousTargets();
+            this.unsubscribe();
+            if (isPresent(this.hintElem)) {
+                this.destroyHint();
+            }
+        }
+        else {
+            if (isPresent(this.wrapper) || isPresent(this.currentDragTarget)) {
+                this.subscribe();
+            }
+            this.initializeDragTargets();
+        }
+    }
+    get dragDisabled() {
+        return this._dragDisabled;
+    }
+    /**
+     * Used for notifying the DragTargetContainer that its content has changed.
+     */
+    notify() {
+        this.cdr.detectChanges();
+        this.initializeDragTargets();
+    }
+    get allDragTargets() {
+        return this.queryHost(this.dragTargetFilter);
+    }
+    get dragHandles() {
+        return this.isHandleSelectorValid ? this.queryHost(this.dragHandle) : null;
+    }
     get hintTemplate() {
         return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
     }
-    get nativeElement() {
-        return this.element.nativeElement;
-    }
-    get hintElem() {
-        return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
+    ngAfterViewInit() {
+        const isTargetPresent = isPresent(this.wrapper) || isPresent(this.currentDragTarget);
+        if (!this.dragDisabled && isTargetPresent) {
+            this.subscribe();
+        }
+        !this.dragDisabled && this.initializeDragTargets();
     }
     onPointerDown(event) {
-        if (this.dragHandles.length && !this.isDragHandle(event.target)) {
+        if (isPresent(this.dragHandles) && !this.isDragHandle(event.target)) {
             return;
         }
-        event.preventDefault();
-        const action = getAction(event, this.dragTarget);
+        const action = getAction(event, this.currentDragTarget);
         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();
+        this.subscribe();
     }
     onPointerMove(event) {
         event.preventDefault();
-        const action = getAction(event, this.dragTarget);
+        const action = getAction(event, this.currentDragTarget);
         this.service.handleDragAndDrop(action);
     }
     onPointerUp(event) {
         event.preventDefault();
-        const action = getAction(event, this.dragTarget);
+        const action = getAction(event, this.currentDragTarget);
         this.service.handleDragAndDrop(action);
-        this.attachDomHandlers();
-    }
-    ngOnInit() {
-        this.initializeDragTarget();
-    }
-    ngAfterContentInit() {
-        if (isPresent(this.element) || isPresent(this.dragTarget)) {
-            this.attachDomHandlers();
-            if (!this.dragHandles.length) {
-                this.renderer.setStyle(this.nativeElement, 'cursor', 'move');
-            }
-        }
-        this.service.dragTargets.push(this.dragTarget);
-    }
-    ngOnDestroy() {
-        this.domSubscriptions.forEach(subscription => subscription());
+        this.ngZone.runOutsideAngular(() => {
+            this.subscribe();
+        });
     }
     handlePress(event) {
         if (this.dragDelay > 0) {
@@ -602,7 +659,12 @@ class DragTargetDirective {
         else {
             this.pressed = true;
         }
-        this.scrollableParent = this.dragTarget.element ? getScrollableParent(this.dragTarget.element) : null;
+        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.emitZoneAwareEvent('onPress', event);
     }
     handleDragStart(event) {
@@ -617,26 +679,28 @@ class DragTargetDirective {
         if (isDragStartPrevented$1) {
             return;
         }
+        this.position = this.positionsMap.has(this.currentDragTargetElement) ? this.positionsMap.get(this.currentDragTargetElement) : { x: 0, y: 0 };
         if (this.hint) {
             this.createHint();
             if (this.mode === 'auto') {
-                this.renderer.setStyle(this.nativeElement, 'opacity', '0.7');
+                this.renderer.setStyle(this.currentDragTargetElement, '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.service.dragData = this.dragData({ dragTarget: this.dragTarget.element, dragTargetId: this.dragTargetIdResult, dragTargetIndex: null });
+        this.service.dragTarget = this.currentDragTarget;
+        const targetIdArgs = { dragTarget: this.currentDragTargetElement, dragTargetIndex: this.service.dragIndex };
+        this.service.dragTargetId = this.dragTargetId(targetIdArgs);
+        const targetDataArgs = Object.assign({ dragTargetId: this.service.dragTargetId }, targetIdArgs);
+        this.service.dragData = this.dragData(targetDataArgs);
     }
     handleDrag(event) {
         if (!this.pressed || isDragStartPrevented$1) {
             return;
         }
-        const elem = this.hint ? this.hintElem : this.nativeElement;
+        const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
         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) {
@@ -657,6 +721,9 @@ class DragTargetDirective {
         }
     }
     handleRelease(event) {
+        if (this.dragStarted) {
+            this.positionsMap.set(this.currentDragTargetElement, this.position);
+        }
         if (this.dragTimeout) {
             clearTimeout(this.dragTimeout);
             this.dragTimeout = null;
@@ -666,93 +733,129 @@ class DragTargetDirective {
     }
     handleDragEnd(event) {
         var _a, _b;
+        if (!this.dragStarted) {
+            return;
+        }
         if (this.mode === 'auto') {
             const isDroppedOverParentTarget = isPresent(this.service.dropTarget) && !contains((_a = this.service.dropTarget) === null || _a === void 0 ? void 0 : _a.element, (_b = this.service.dragTarget) === null || _b === void 0 ? void 0 : _b.element, true);
-            const elem = this.hint ? this.hintElem : this.nativeElement;
+            const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
             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 };
+                this.positionsMap.delete(this.currentDragTargetElement);
             }
         }
         if (this.hint && isPresent(this.hintElem)) {
             this.destroyHint();
             if (this.mode === 'auto') {
-                this.renderer.removeStyle(this.nativeElement, 'opacity');
+                this.renderer.removeStyle(this.currentDragTargetElement, 'opacity');
             }
         }
         this.service.dragTarget = null;
-        this.service.dragTargetDirective = null;
-        if (!this.dragStarted || isDragStartPrevented$1 || isDragPrevented$1) {
+        this.service.dragIndex = null;
+        this.currentDragTarget.element = null;
+        this.emitZoneAwareEvent('onDragEnd', event);
+        if (isDragStartPrevented$1 || isDragPrevented$1) {
             return;
         }
-        this.emitZoneAwareEvent('onDragEnd', event);
         this.dragStarted = false;
     }
-    initializeDragTarget() {
-        this.dragTarget = {
-            element: this.nativeElement,
-            hint: null,
-            onPress: this.handlePress.bind(this),
-            onRelease: this.handleRelease.bind(this),
-            onDragStart: this.handleDragStart.bind(this),
-            onDrag: this.handleDrag.bind(this),
-            onDragEnd: this.handleDragEnd.bind(this)
-        };
+    get nativeElement() {
+        return this.wrapper.nativeElement;
     }
-    attachDomHandlers() {
+    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();
+        }
+    }
+    subscribe() {
         this.ngZone.runOutsideAngular(() => {
-            if (this.domSubscriptions.length > 0) {
-                this.domSubscriptions.forEach(subscription => subscription());
-            }
-            if (!(isDocumentAvailable() && isPresent(this.element))) {
+            this.unsubscribe();
+            if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
                 return;
             }
+            const element = this.nativeElement;
             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)
-                ];
+                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 (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.scrollSubscription = fromEvent(this.scrollableParent, 'scroll')
+                        .subscribe(e => this.onPointerMove(e));
                 }
             }
             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)
-                ];
+                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);
+                    }
+                });
             }
         });
     }
-    isDragHandle(el) {
-        return this.dragHandles.toArray().some(dh => contains(dh.element.nativeElement, el, true));
-    }
-    getAutoScrollContainer() {
-        return typeof this.autoScroll === 'object' &&
-            this.autoScroll.boundaryElementRef &&
-            this.autoScroll.boundaryElementRef.nativeElement ?
-            this.autoScroll.boundaryElementRef.nativeElement : null;
+    emitZoneAwareEvent(event, normalizedEvent) {
+        const targetIdArgs = { dragTarget: this.currentDragTargetElement, dragTargetIndex: this.service.dragIndex };
+        const eventProps = {
+            dragTarget: this.currentDragTargetElement,
+            dragEvent: normalizedEvent,
+            dragTargetIndex: this.service.dragIndex,
+            dragTargetId: this.dragTargetId(targetIdArgs)
+        };
+        if (this.hint && isPresent(this.hintElem)) {
+            eventProps.hintElement = this.hintElem;
+        }
+        let eventArgs;
+        switch (event) {
+            case 'onDragReady':
+                eventArgs = new DragTargetDragReadyEvent(eventProps);
+                break;
+            case 'onPress':
+                eventArgs = new DragTargetPressEvent(eventProps);
+                break;
+            case 'onDragStart':
+                eventArgs = new DragTargetDragStartEvent(eventProps);
+                break;
+            case 'onDrag':
+                eventArgs = new DragTargetDragEvent(eventProps);
+                break;
+            case 'onRelease':
+                eventArgs = new DragTargetReleaseEvent(eventProps);
+                break;
+            case 'onDragEnd':
+                eventArgs = new DragTargetDragEndEvent(eventProps);
+                break;
+            default:
+                break;
+        }
+        this.ngZone.run(() => {
+            this[event].emit(eventArgs);
+        });
+        return eventArgs;
     }
     createHint() {
-        if (!(isDocumentAvailable() && isPresent(this.element))) {
+        if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
             return;
         }
         if (isPresent(this.hint) && typeof this.hint === 'object') {
@@ -766,7 +869,7 @@ class DragTargetDirective {
         else {
             this.createDefaultHint();
         }
-        this.dragTarget.hint = this.hintElem;
+        this.currentDragTarget.hint = this.hintElem;
         if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
             this.hint.appendTo.element.nativeElement.appendChild(this.hintElem);
         }
@@ -775,7 +878,7 @@ class DragTargetDirective {
         }
     }
     createDefaultHint() {
-        this.defaultHint = this.nativeElement.cloneNode(true);
+        this.defaultHint = this.currentDragTargetElement.cloneNode(true);
         if (typeof this.hint === 'object') {
             if (isPresent(this.hint.hintClass)) {
                 const hintClasses = parseCSSClassNames(this.hint.hintClass);
@@ -792,6 +895,9 @@ class DragTargetDirective {
         }
         this.hintComponent.instance.template = this.hintTemplate;
         this.hintComponent.instance.directive = this;
+        this.hintComponent.instance.targetIndex = this.service.dragIndex;
+        const targetDataArgs = { dragTarget: this.currentDragTargetElement, dragTargetId: this.service.dragTargetId, dragTargetIndex: this.service.dragIndex };
+        this.hintComponent.instance.contextData = this.dragData(targetDataArgs);
         this.hintComponent.changeDetectorRef.detectChanges();
     }
     destroyHint() {
@@ -801,62 +907,95 @@ class DragTargetDirective {
             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);
-            }
+            document.body.removeChild(this.defaultHint);
             this.defaultHint = null;
         }
-        this.dragTarget.hint = null;
+        this.currentDragTarget.hint = null;
     }
-    emitZoneAwareEvent(event, normalizedEvent) {
-        const eventProps = {
-            dragTarget: this.nativeElement,
-            dragEvent: normalizedEvent
+    getDragIndex() {
+        return this.allDragTargets.indexOf(this.currentDragTargetElement);
+    }
+    initializeDragTargets() {
+        if (!isPresent(this.allDragTargets)) {
+            if (this.previousDragTargets.length > 0) {
+                this.clearPreviousTargets();
+            }
+            return;
+        }
+        this.allDragTargets.forEach(dragTargetEl => {
+            const isDragTargetInitialized = this.service.dragTargets.find(dt => dt.element === dragTargetEl);
+            if (!isDragTargetInitialized) {
+                this.service.dragTargets.push({
+                    element: dragTargetEl,
+                    hint: null,
+                    onPress: this.handlePress.bind(this),
+                    onRelease: this.handleRelease.bind(this),
+                    onDragStart: this.handleDragStart.bind(this),
+                    onDrag: this.handleDrag.bind(this),
+                    onDragEnd: this.handleDragEnd.bind(this)
+                });
+            }
+        });
+        if (this.previousDragTargets.length > 0) {
+            const dragTargetsToRemove = this.previousDragTargets.filter(dt => !this.allDragTargets.includes(dt));
+            dragTargetsToRemove.forEach(dragTarget => {
+                const idx = this.service.dragTargets.findIndex(serviceDragTarget => serviceDragTarget.element === dragTarget);
+                if (idx > -1) {
+                    this.service.dragTargets.splice(idx, 1);
+                }
+            });
+        }
+        this.previousDragTargets = this.allDragTargets;
+        this.currentDragTarget = {
+            element: null,
+            hint: null,
+            onPress: this.handlePress.bind(this),
+            onRelease: this.handleRelease.bind(this),
+            onDragStart: this.handleDragStart.bind(this),
+            onDrag: this.handleDrag.bind(this),
+            onDragEnd: this.handleDragEnd.bind(this)
         };
-        if (this.hint && isPresent(this.hintElem)) {
-            eventProps.hintElement = this.hintElem;
+        this.setCursorStyle();
+    }
+    isDragHandle(el) {
+        return this.dragHandles.some(dh => contains(dh, el, true));
+    }
+    get isHandleSelectorValid() {
+        return isPresent(this.dragHandle) && this.dragHandle !== '';
+    }
+    setCursorStyle() {
+        if (!isDocumentAvailable()) {
+            return;
         }
-        if (this.dragTargetId && this.dragTargetId !== '') {
-            eventProps.dragTargetId = this.dragTargetIdResult;
+        if (isPresent(this.dragHandle) && this.dragHandle !== '') {
+            if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
+                this.dragHandles.forEach(handle => {
+                    this.renderer.setStyle(handle, 'cursor', 'move');
+                });
+            }
         }
-        let eventArgs;
-        switch (event) {
-            case 'onDragReady':
-                eventArgs = new DragTargetDragReadyEvent(eventProps);
-                break;
-            case 'onPress':
-                eventArgs = new DragTargetPressEvent(eventProps);
-                break;
-            case 'onDragStart':
-                eventArgs = new DragTargetDragStartEvent(eventProps);
-                break;
-            case 'onDrag':
-                eventArgs = new DragTargetDragEvent(eventProps);
-                break;
-            case 'onRelease':
-                eventArgs = new DragTargetReleaseEvent(eventProps);
-                break;
-            case 'onDragEnd':
-                eventArgs = new DragTargetDragEndEvent(eventProps);
-                break;
-            default:
-                break;
+        else {
+            this.allDragTargets.forEach(target => {
+                this.renderer.setStyle(target, 'cursor', 'move');
+            });
         }
-        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({ dragTarget: this.dragTarget.element, dragTargetIndex: null });
+    queryHost(selector) {
+        if (isPresent(selector) && selector !== "") {
+            return Array.from(this.nativeElement.querySelectorAll(selector));
         }
     }
+    clearPreviousTargets() {
+        this.previousDragTargets.forEach(dragTarget => {
+            const idx = this.service.dragTargets.findIndex(serviceDragTarget => serviceDragTarget.element === dragTarget);
+            if (idx > -1) {
+                this.service.dragTargets.splice(idx, 1);
+            }
+        });
+        this.previousDragTargets = [];
+    }
     performDrag() {
-        const elem = this.hint ? this.hintElem : this.nativeElement;
+        const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
         if (elem) {
             const styles = this.getStylesPerElement(elem);
             setElementStyles(this.renderer, elem, styles);
@@ -870,12 +1009,6 @@ class DragTargetDirective {
         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) {
@@ -898,222 +1031,83 @@ class DragTargetDirective {
         }
     }
 }
-DragTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: DragStateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragTargetDirective, 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetDirective, decorators: [{
+DragTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DragStateService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragTargetContainerDirective, isStandalone: true, selector: "[kendoDragTargetContainer]", inputs: { hint: "hint", dragTargetFilter: "dragTargetFilter", dragHandle: "dragHandle", dragDelay: "dragDelay", threshold: "threshold", dragTargetId: "dragTargetId", dragData: "dragData", dragDisabled: "dragDisabled", mode: "mode" }, outputs: { onDragReady: "onDragReady", onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onRelease: "onRelease", onDragEnd: "onDragEnd" }, exportAs: ["kendoDragTargetContainer"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetContainerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDragTarget]',
-                    exportAs: 'kendoDragTarget'
+                    selector: '[kendoDragTargetContainer]',
+                    exportAs: 'kendoDragTargetContainer',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: DragStateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { hint: [{
-                type: Input
-            }], threshold: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DragStateService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hint: [{
                 type: Input
-            }], autoScroll: [{
+            }], dragTargetFilter: [{
                 type: Input
-            }], dragTargetId: [{
+            }], dragHandle: [{
                 type: Input
             }], dragDelay: [{
                 type: Input
-            }], restrictByAxis: [{
+            }], threshold: [{
                 type: Input
-            }], mode: [{
+            }], dragTargetId: [{
                 type: Input
             }], dragData: [{
                 type: Input
+            }], dragDisabled: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], onDragReady: [{
+                type: Output
             }], onPress: [{
                 type: Output
             }], onDragStart: [{
                 type: Output
             }], onDrag: [{
                 type: Output
-            }], onDragReady: [{
-                type: Output
             }], onRelease: [{
                 type: Output
             }], onDragEnd: [{
                 type: Output
-            }], dragHandles: [{
-                type: ContentChildren,
-                args: [DragHandleDirective]
-            }] } });
-
-/**
- * Arguments for the drag events of the DropTarget and DropTargetContainer directives.
- */
-class DropTargetEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        Object.assign(this, args);
-    }
-    /**
-     * Left for backward compatibility for the DropTarget deprecated events.
-     * @hidden
-     */
-    get normalizedEvent() {
-        return this.dragEvent;
-    }
-    /**
-     * Left for backward compatibility for the DropTarget deprecated events.
-     * @hidden
-     */
-    get hostElement() {
-        return this.dropTarget;
-    }
-}
-
-/**
- * Represents the Kendo UI DropTarget directive for Angular.
- */
-class DropTargetDirective {
-    constructor(service, element, ngZone) {
-        this.service = service;
-        this.element = element;
-        this.ngZone = ngZone;
-        /**
-         * Fires when a DragTarget element enters the DropTarget.
-         */
-        this.onDragEnter = new EventEmitter();
-        /**
-         * Fires when a DragTarget element is being dragged over the DropTarget.
-         */
-        this.onDragOver = new EventEmitter();
-        /**
-         * Fires when a DragTarget element leaves the DropTarget.
-         */
-        this.onDragLeave = new EventEmitter();
-        /**
-         * Fires when a DragTarget element is dropped over the DropTarget.
-         */
-        this.onDrop = new EventEmitter();
-        validatePackage(packageMetadata);
-    }
-    ngOnInit() {
-        this.initializeDropTarget();
-        this.service.dropTargets.push(this.dropTarget);
-    }
-    /**
-     * @hidden
-     */
-    handleDragEnter(event) {
-        if (!this.service.dragTarget) {
-            return;
-        }
-        this.service.dropTarget = this.dropTarget;
-        this.emitZoneAwareEvent('onDragEnter', event);
-    }
-    /**
-     * @hidden
-     */
-    handleDragLeave(event) {
-        this.service.dropTarget = null;
-        if (!this.service.dragTarget) {
-            return;
-        }
-        this.emitZoneAwareEvent('onDragLeave', event);
-    }
-    /**
-     * @hidden
-     */
-    handleDragOver(event) {
-        if (!this.service.dragTarget) {
-            return;
-        }
-        this.emitZoneAwareEvent('onDragOver', event);
-    }
-    /**
-     * @hidden
-     */
-    handleDrop(event) {
-        this.emitZoneAwareEvent('onDrop', event);
-        this.service.dropTarget = null;
-    }
-    initializeDropTarget() {
-        this.dropTarget = {
-            element: this.element.nativeElement,
-            onDragEnter: this.handleDragEnter.bind(this),
-            onDragLeave: this.handleDragLeave.bind(this),
-            onDragOver: this.handleDragOver.bind(this),
-            onDrop: this.handleDrop.bind(this)
-        };
-    }
-    emitZoneAwareEvent(event, normalizedEvent) {
-        var _a, _b;
-        const eventProps = {
-            dropTarget: this.element.nativeElement,
-            dragTarget: (_a = this.service.dragTarget) === null || _a === void 0 ? void 0 : _a.element,
-            dragEvent: normalizedEvent,
-            dragData: this.service.dragData
-        };
-        if (isPresent((_b = this.service.dragTarget) === null || _b === void 0 ? void 0 : _b.hint)) {
-            eventProps.hintElement = this.service.dragTarget.element;
-        }
-        const eventArgs = new DropTargetEvent(eventProps);
-        this.ngZone.run(() => {
-            this[event].emit(eventArgs);
-        });
-    }
-}
-DropTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetDirective, deps: [{ token: DragStateService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-DropTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropTargetDirective, selector: "[kendoDropTarget]", outputs: { onDragEnter: "onDragEnter", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" }, exportAs: ["kendoDropTarget"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoDropTarget]',
-                    exportAs: 'kendoDropTarget'
-                }]
-        }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { onDragEnter: [{
-                type: Output
-            }], onDragOver: [{
-                type: Output
-            }], onDragLeave: [{
-                type: Output
-            }], onDrop: [{
-                type: Output
             }] } });
 
 let isDragStartPrevented = false;
 let isDragPrevented = false;
 /**
- * Represents the [Kendo UI DragTargetContainer directive for Angular]({% slug api_utils_dragtargetcontainerdirective %}).
- * Used to configure multiple elements as draggable.
- *
- * @example
- * ```ts-no-run
- * <ul kendoDragTargetContainer dragTargetFilter=".my-draggable">
- *    <li class="my-draggable">foo</li>
- * </ul>
- * ```
+ * Represents the Kendo UI DragTarget directive for Angular.
  */
-class DragTargetContainerDirective {
-    constructor(wrapper, ngZone, renderer, service, viewContainer, cdr) {
-        this.wrapper = wrapper;
-        this.ngZone = ngZone;
+class DragTargetDirective {
+    constructor(element, renderer, ngZone, service, viewContainer) {
+        this.element = element;
         this.renderer = renderer;
+        this.ngZone = ngZone;
         this.service = service;
         this.viewContainer = viewContainer;
-        this.cdr = cdr;
         /**
-         * Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. ([see example]({% slug drag_hint %})).
+         * 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;
         /**
-         * Defines the delay in milliseconds after which the drag will begin ([see example](slug drag_target_container#toc-events)).
+         * 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
          */
-        this.dragDelay = 0;
+        this.threshold = 0;
         /**
-         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})).
+         * Defines the automatic container scrolling behavior when close to the edge ([see example]({% slug auto_scroll %})).
+         *
+         * @default true
+         */
+        this.autoScroll = true;
+        /**
+         * Defines the delay in milliseconds after which the drag will begin ([see example]({% slug drag_delay %})).
          *
          * @default 0
          */
-        this.threshold = 0;
+        this.dragDelay = 0;
         /**
          * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
          *
@@ -1121,77 +1115,46 @@ class DragTargetContainerDirective {
          */
         this.mode = 'auto';
         /**
-         * Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
-         */
-        this.onDragReady = new EventEmitter();
-        /**
-         * Fires when the user presses a DragTarget element.
+         * Fires when the user presses the DragTarget element.
          */
         this.onPress = new EventEmitter();
         /**
-         * Fires when the dragging of a DragTarget element begins.
-        */
+         * Fires when the dragging of the DragTarget element begins.
+         */
         this.onDragStart = new EventEmitter();
         /**
-         * Fires while the user drags a DragTarget element.
+         * Fires while the user drags the DragTarget element.
          */
         this.onDrag = new EventEmitter();
         /**
-         * Fires when the user releases a DragTarget element after being pressed.
+         * Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
+         */
+        this.onDragReady = new EventEmitter();
+        /**
+         * Fires when the user releases the DragTarget element after being pressed.
          */
         this.onRelease = new EventEmitter();
         /**
-         * Fires when the dragging of a DragTarget ends and the element is released.
+         * Fires when the dragging of the DragTarget ends and the element is released.
          */
         this.onDragEnd = new EventEmitter();
-        this.currentDragTarget = null;
-        this.dragTimeout = null;
-        this.pressed = false;
-        this.dragStarted = false;
+        this.dragTarget = null;
+        this.domSubscriptions = [];
         this.hintComponent = null;
-        this.defaultHint = null;
-        this.currentDragTargetElement = null;
-        this.scrollableParent = null;
-        this.previousDragTargets = [];
+        this.dragStarted = false;
+        this.pressed = false;
+        this.dragTimeout = null;
         this.initialPosition = { x: 0, y: 0 };
         this.position = { x: 0, y: 0 };
-        this.positionsMap = new Map();
-        this._dragTargetFilter = null;
-        this._dragDisabled = false;
+        this.scrollableParent = null;
+        this.defaultHint = null;
         this._dragData = () => null;
-        this._dragTargetId = () => null;
         validatePackage(packageMetadata);
     }
     /**
-     * Specifies a selector for elements within a container which will be configured as draggable
-     * ([see example]({% slug drag_target_container %})). The possible values include any
-     * DOM `selector`.
-     */
-    set dragTargetFilter(value) {
-        this._dragTargetFilter = value;
-        if (!this.dragDisabled) {
-            this.initializeDragTargets();
-        }
-    }
-    get dragTargetFilter() {
-        return this._dragTargetFilter;
-    }
-    /**
-     * Defines a unique identifier for each drag target.
-     * It exposes the current DragTarget HTML element and its index in the collection of drag targets as arguments.
-     */
-    set dragTargetId(fn) {
-        if (isDevMode && typeof fn !== 'function') {
-            throw new Error(`dragTargetId must be a function, but received ${JSON.stringify(fn)}.`);
-        }
-        this._dragTargetId = fn;
-    }
-    get dragTargetId() {
-        return this._dragTargetId;
-    }
-    /**
-     * Defines a callback function which returns custom data passed to the DropTarget events.
-     * It exposes the current DragTarget HTML element, its `dragTargetId` and its index in the collection of drag targets as arguments.
+     * 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') {
@@ -1202,73 +1165,52 @@ class DragTargetContainerDirective {
     get dragData() {
         return this._dragData;
     }
-    /**
-     * If set to true, the dragging of DragTargets within the container will be disabled.
-     *
-     * @default false
-     */
-    set dragDisabled(value) {
-        this._dragDisabled = value;
-        if (value) {
-            this.clearPreviousTargets();
-            this.unsubscribe();
-            if (isPresent(this.hintElem)) {
-                this.destroyHint();
-            }
-        }
-        else {
-            if (isPresent(this.wrapper) || isPresent(this.currentDragTarget)) {
-                this.subscribe();
-            }
-            this.initializeDragTargets();
-        }
-    }
-    get dragDisabled() {
-        return this._dragDisabled;
-    }
-    /**
-     * Used for notifying the DragTargetContainer that its content has changed.
-     */
-    notify() {
-        this.cdr.detectChanges();
-        this.initializeDragTargets();
-    }
-    get allDragTargets() {
-        return this.queryHost(this.dragTargetFilter);
-    }
-    get dragHandles() {
-        return this.isHandleSelectorValid ? this.queryHost(this.dragHandle) : null;
-    }
     get hintTemplate() {
         return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
     }
-    ngAfterViewInit() {
-        const isTargetPresent = isPresent(this.wrapper) || isPresent(this.currentDragTarget);
-        if (!this.dragDisabled && isTargetPresent) {
-            this.subscribe();
-        }
-        !this.dragDisabled && this.initializeDragTargets();
+    get nativeElement() {
+        return this.element.nativeElement;
+    }
+    get hintElem() {
+        return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
     }
     onPointerDown(event) {
-        if (isPresent(this.dragHandles) && !this.isDragHandle(event.target)) {
+        if (this.dragHandles.length && !this.isDragHandle(event.target)) {
             return;
         }
-        const action = getAction(event, this.currentDragTarget);
+        event.preventDefault();
+        const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
-        this.subscribe();
+        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();
     }
     onPointerMove(event) {
         event.preventDefault();
-        const action = getAction(event, this.currentDragTarget);
+        const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
     }
-    onPointerUp(event) {
-        event.preventDefault();
-        const action = getAction(event, this.currentDragTarget);
-        this.service.handleDragAndDrop(action);
-        this.ngZone.runOutsideAngular(() => {
-            this.subscribe();
-        });
+    onPointerUp(event) {
+        event.preventDefault();
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+        this.attachDomHandlers();
+    }
+    ngOnInit() {
+        this.initializeDragTarget();
+    }
+    ngAfterContentInit() {
+        if (isPresent(this.element) || isPresent(this.dragTarget)) {
+            this.attachDomHandlers();
+            if (!this.dragHandles.length) {
+                this.renderer.setStyle(this.nativeElement, 'cursor', 'move');
+            }
+        }
+        this.service.dragTargets.push(this.dragTarget);
+    }
+    ngOnDestroy() {
+        this.domSubscriptions.forEach(subscription => subscription());
     }
     handlePress(event) {
         if (this.dragDelay > 0) {
@@ -1280,12 +1222,7 @@ 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.scrollableParent = this.dragTarget.element ? getScrollableParent(this.dragTarget.element) : null;
         this.emitZoneAwareEvent('onPress', event);
     }
     handleDragStart(event) {
@@ -1300,28 +1237,26 @@ class DragTargetContainerDirective {
         if (isDragStartPrevented) {
             return;
         }
-        this.position = this.positionsMap.has(this.currentDragTargetElement) ? this.positionsMap.get(this.currentDragTargetElement) : { x: 0, y: 0 };
         if (this.hint) {
             this.createHint();
             if (this.mode === 'auto') {
-                this.renderer.setStyle(this.currentDragTargetElement, 'opacity', '0.7');
+                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.currentDragTarget;
-        const targetIdArgs = { dragTarget: this.currentDragTargetElement, dragTargetIndex: this.service.dragIndex };
-        this.service.dragTargetId = this.dragTargetId(targetIdArgs);
-        const targetDataArgs = Object.assign({ dragTargetId: this.service.dragTargetId }, targetIdArgs);
-        this.service.dragData = this.dragData(targetDataArgs);
+        this.service.dragTarget = this.dragTarget;
+        this.service.dragTargetDirective = this;
+        this.service.dragData = this.dragData({ dragTarget: this.dragTarget.element, dragTargetId: this.dragTargetIdResult, dragTargetIndex: null });
     }
     handleDrag(event) {
         if (!this.pressed || isDragStartPrevented) {
             return;
         }
-        const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
+        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) {
@@ -1342,9 +1277,6 @@ class DragTargetContainerDirective {
         }
     }
     handleRelease(event) {
-        if (this.dragStarted) {
-            this.positionsMap.set(this.currentDragTargetElement, this.position);
-        }
         if (this.dragTimeout) {
             clearTimeout(this.dragTimeout);
             this.dragTimeout = null;
@@ -1354,129 +1286,93 @@ class DragTargetContainerDirective {
     }
     handleDragEnd(event) {
         var _a, _b;
-        if (!this.dragStarted) {
-            return;
-        }
         if (this.mode === 'auto') {
             const isDroppedOverParentTarget = isPresent(this.service.dropTarget) && !contains((_a = this.service.dropTarget) === null || _a === void 0 ? void 0 : _a.element, (_b = this.service.dragTarget) === null || _b === void 0 ? void 0 : _b.element, true);
-            const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
+            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.positionsMap.delete(this.currentDragTargetElement);
+                this.position = { x: 0, y: 0 };
             }
         }
         if (this.hint && isPresent(this.hintElem)) {
             this.destroyHint();
             if (this.mode === 'auto') {
-                this.renderer.removeStyle(this.currentDragTargetElement, 'opacity');
+                this.renderer.removeStyle(this.nativeElement, 'opacity');
             }
         }
         this.service.dragTarget = null;
-        this.service.dragIndex = null;
-        this.currentDragTarget.element = null;
-        this.emitZoneAwareEvent('onDragEnd', event);
-        if (isDragStartPrevented || isDragPrevented) {
+        this.service.dragTargetDirective = null;
+        if (!this.dragStarted || isDragStartPrevented || isDragPrevented) {
             return;
         }
+        this.emitZoneAwareEvent('onDragEnd', event);
         this.dragStarted = false;
     }
-    get nativeElement() {
-        return this.wrapper.nativeElement;
-    }
-    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();
-        }
+    initializeDragTarget() {
+        this.dragTarget = {
+            element: this.nativeElement,
+            hint: null,
+            onPress: this.handlePress.bind(this),
+            onRelease: this.handleRelease.bind(this),
+            onDragStart: this.handleDragStart.bind(this),
+            onDrag: this.handleDrag.bind(this),
+            onDragEnd: this.handleDragEnd.bind(this)
+        };
     }
-    subscribe() {
+    attachDomHandlers() {
         this.ngZone.runOutsideAngular(() => {
-            this.unsubscribe();
-            if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
+            if (this.domSubscriptions.length > 0) {
+                this.domSubscriptions.forEach(subscription => subscription());
+            }
+            if (!(isDocumentAvailable() && isPresent(this.element))) {
                 return;
             }
-            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));
+                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)) {
-                    this.scrollSubscription = fromEvent(this.scrollableParent, 'scroll')
-                        .subscribe(e => this.onPointerMove(e));
+                    if (this.scrollableParent === document.getElementsByTagName('html')[0]) {
+                        this.scrollableParent = window;
+                    }
+                    this.domSubscriptions.push(this.renderer.listen(this.scrollableParent, 'scroll', this.onPointerMove));
                 }
             }
             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);
-                    }
-                });
+                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)
+                ];
             }
         });
     }
-    emitZoneAwareEvent(event, normalizedEvent) {
-        const targetIdArgs = { dragTarget: this.currentDragTargetElement, dragTargetIndex: this.service.dragIndex };
-        const eventProps = {
-            dragTarget: this.currentDragTargetElement,
-            dragEvent: normalizedEvent,
-            dragTargetIndex: this.service.dragIndex,
-            dragTargetId: this.dragTargetId(targetIdArgs)
-        };
-        if (this.hint && isPresent(this.hintElem)) {
-            eventProps.hintElement = this.hintElem;
-        }
-        let eventArgs;
-        switch (event) {
-            case 'onDragReady':
-                eventArgs = new DragTargetDragReadyEvent(eventProps);
-                break;
-            case 'onPress':
-                eventArgs = new DragTargetPressEvent(eventProps);
-                break;
-            case 'onDragStart':
-                eventArgs = new DragTargetDragStartEvent(eventProps);
-                break;
-            case 'onDrag':
-                eventArgs = new DragTargetDragEvent(eventProps);
-                break;
-            case 'onRelease':
-                eventArgs = new DragTargetReleaseEvent(eventProps);
-                break;
-            case 'onDragEnd':
-                eventArgs = new DragTargetDragEndEvent(eventProps);
-                break;
-            default:
-                break;
-        }
-        this.ngZone.run(() => {
-            this[event].emit(eventArgs);
-        });
-        return eventArgs;
+    isDragHandle(el) {
+        return this.dragHandles.toArray().some(dh => contains(dh.element.nativeElement, el, true));
+    }
+    getAutoScrollContainer() {
+        return typeof this.autoScroll === 'object' &&
+            this.autoScroll.boundaryElementRef &&
+            this.autoScroll.boundaryElementRef.nativeElement ?
+            this.autoScroll.boundaryElementRef.nativeElement : null;
     }
     createHint() {
-        if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
+        if (!(isDocumentAvailable() && isPresent(this.element))) {
             return;
         }
         if (isPresent(this.hint) && typeof this.hint === 'object') {
@@ -1490,7 +1386,7 @@ class DragTargetContainerDirective {
         else {
             this.createDefaultHint();
         }
-        this.currentDragTarget.hint = this.hintElem;
+        this.dragTarget.hint = this.hintElem;
         if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
             this.hint.appendTo.element.nativeElement.appendChild(this.hintElem);
         }
@@ -1499,7 +1395,7 @@ class DragTargetContainerDirective {
         }
     }
     createDefaultHint() {
-        this.defaultHint = this.currentDragTargetElement.cloneNode(true);
+        this.defaultHint = this.nativeElement.cloneNode(true);
         if (typeof this.hint === 'object') {
             if (isPresent(this.hint.hintClass)) {
                 const hintClasses = parseCSSClassNames(this.hint.hintClass);
@@ -1516,9 +1412,6 @@ class DragTargetContainerDirective {
         }
         this.hintComponent.instance.template = this.hintTemplate;
         this.hintComponent.instance.directive = this;
-        this.hintComponent.instance.targetIndex = this.service.dragIndex;
-        const targetDataArgs = { dragTarget: this.currentDragTargetElement, dragTargetId: this.service.dragTargetId, dragTargetIndex: this.service.dragIndex };
-        this.hintComponent.instance.contextData = this.dragData(targetDataArgs);
         this.hintComponent.changeDetectorRef.detectChanges();
     }
     destroyHint() {
@@ -1528,95 +1421,62 @@ class DragTargetContainerDirective {
             this.hintComponent = null;
         }
         else {
-            document.body.removeChild(this.defaultHint);
-            this.defaultHint = null;
-        }
-        this.currentDragTarget.hint = null;
-    }
-    getDragIndex() {
-        return this.allDragTargets.indexOf(this.currentDragTargetElement);
-    }
-    initializeDragTargets() {
-        if (!isPresent(this.allDragTargets)) {
-            if (this.previousDragTargets.length > 0) {
-                this.clearPreviousTargets();
+            if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
+                this.hint.appendTo.element.nativeElement.removeChild(this.defaultHint);
             }
-            return;
-        }
-        this.allDragTargets.forEach(dragTargetEl => {
-            const isDragTargetInitialized = this.service.dragTargets.find(dt => dt.element === dragTargetEl);
-            if (!isDragTargetInitialized) {
-                this.service.dragTargets.push({
-                    element: dragTargetEl,
-                    hint: null,
-                    onPress: this.handlePress.bind(this),
-                    onRelease: this.handleRelease.bind(this),
-                    onDragStart: this.handleDragStart.bind(this),
-                    onDrag: this.handleDrag.bind(this),
-                    onDragEnd: this.handleDragEnd.bind(this)
-                });
+            else {
+                document.body.removeChild(this.defaultHint);
             }
-        });
-        if (this.previousDragTargets.length > 0) {
-            const dragTargetsToRemove = this.previousDragTargets.filter(dt => !this.allDragTargets.includes(dt));
-            dragTargetsToRemove.forEach(dragTarget => {
-                const idx = this.service.dragTargets.findIndex(serviceDragTarget => serviceDragTarget.element === dragTarget);
-                if (idx > -1) {
-                    this.service.dragTargets.splice(idx, 1);
-                }
-            });
+            this.defaultHint = null;
         }
-        this.previousDragTargets = this.allDragTargets;
-        this.currentDragTarget = {
-            element: null,
-            hint: null,
-            onPress: this.handlePress.bind(this),
-            onRelease: this.handleRelease.bind(this),
-            onDragStart: this.handleDragStart.bind(this),
-            onDrag: this.handleDrag.bind(this),
-            onDragEnd: this.handleDragEnd.bind(this)
-        };
-        this.setCursorStyle();
-    }
-    isDragHandle(el) {
-        return this.dragHandles.some(dh => contains(dh, el, true));
-    }
-    get isHandleSelectorValid() {
-        return isPresent(this.dragHandle) && this.dragHandle !== '';
+        this.dragTarget.hint = null;
     }
-    setCursorStyle() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        if (isPresent(this.dragHandle) && this.dragHandle !== '') {
-            if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
-                this.dragHandles.forEach(handle => {
-                    this.renderer.setStyle(handle, 'cursor', 'move');
-                });
-            }
+    emitZoneAwareEvent(event, normalizedEvent) {
+        const eventProps = {
+            dragTarget: this.nativeElement,
+            dragEvent: normalizedEvent
+        };
+        if (this.hint && isPresent(this.hintElem)) {
+            eventProps.hintElement = this.hintElem;
         }
-        else {
-            this.allDragTargets.forEach(target => {
-                this.renderer.setStyle(target, 'cursor', 'move');
-            });
+        if (this.dragTargetId && this.dragTargetId !== '') {
+            eventProps.dragTargetId = this.dragTargetIdResult;
         }
-    }
-    queryHost(selector) {
-        if (isPresent(selector) && selector !== "") {
-            return Array.from(this.nativeElement.querySelectorAll(selector));
+        let eventArgs;
+        switch (event) {
+            case 'onDragReady':
+                eventArgs = new DragTargetDragReadyEvent(eventProps);
+                break;
+            case 'onPress':
+                eventArgs = new DragTargetPressEvent(eventProps);
+                break;
+            case 'onDragStart':
+                eventArgs = new DragTargetDragStartEvent(eventProps);
+                break;
+            case 'onDrag':
+                eventArgs = new DragTargetDragEvent(eventProps);
+                break;
+            case 'onRelease':
+                eventArgs = new DragTargetReleaseEvent(eventProps);
+                break;
+            case 'onDragEnd':
+                eventArgs = new DragTargetDragEndEvent(eventProps);
+                break;
+            default:
+                break;
         }
-    }
-    clearPreviousTargets() {
-        this.previousDragTargets.forEach(dragTarget => {
-            const idx = this.service.dragTargets.findIndex(serviceDragTarget => serviceDragTarget.element === dragTarget);
-            if (idx > -1) {
-                this.service.dragTargets.splice(idx, 1);
-            }
+        this.ngZone.run(() => {
+            this[event].emit(eventArgs);
         });
-        this.previousDragTargets = [];
+        return eventArgs;
+    }
+    get dragTargetIdResult() {
+        if (this.dragTargetId && this.dragTargetId !== '') {
+            return typeof this.dragTargetId === 'string' ? this.dragTargetId : this.dragTargetId({ dragTarget: this.dragTarget.element, dragTargetIndex: null });
+        }
     }
     performDrag() {
-        const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
+        const elem = this.hint ? this.hintElem : this.nativeElement;
         if (elem) {
             const styles = this.getStylesPerElement(elem);
             setElementStyles(this.renderer, elem, styles);
@@ -1630,6 +1490,12 @@ class DragTargetContainerDirective {
         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) {
@@ -1652,46 +1518,74 @@ class DragTargetContainerDirective {
         }
     }
 }
-DragTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DragStateService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-DragTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: { hint: "hint", dragTargetFilter: "dragTargetFilter", dragHandle: "dragHandle", dragDelay: "dragDelay", threshold: "threshold", dragTargetId: "dragTargetId", dragData: "dragData", dragDisabled: "dragDisabled", mode: "mode" }, outputs: { onDragReady: "onDragReady", onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onRelease: "onRelease", onDragEnd: "onDragEnd" }, exportAs: ["kendoDragTargetContainer"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetContainerDirective, decorators: [{
+DragTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: DragStateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDragTargetContainer]',
-                    exportAs: 'kendoDragTargetContainer'
+                    selector: '[kendoDragTarget]',
+                    exportAs: 'kendoDragTarget',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DragStateService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hint: [{
-                type: Input
-            }], dragTargetFilter: [{
-                type: Input
-            }], dragHandle: [{
-                type: Input
-            }], dragDelay: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: DragStateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { hint: [{
                 type: Input
             }], threshold: [{
                 type: Input
+            }], autoScroll: [{
+                type: Input
             }], dragTargetId: [{
                 type: Input
-            }], dragData: [{
+            }], dragDelay: [{
                 type: Input
-            }], dragDisabled: [{
+            }], restrictByAxis: [{
                 type: Input
             }], mode: [{
                 type: Input
-            }], onDragReady: [{
-                type: Output
+            }], dragData: [{
+                type: Input
             }], onPress: [{
                 type: Output
             }], onDragStart: [{
                 type: Output
             }], onDrag: [{
                 type: Output
+            }], onDragReady: [{
+                type: Output
             }], onRelease: [{
                 type: Output
             }], onDragEnd: [{
                 type: Output
+            }], dragHandles: [{
+                type: ContentChildren,
+                args: [DragHandleDirective]
             }] } });
 
+/**
+ * Arguments for the drag events of the DropTarget and DropTargetContainer directives.
+ */
+class DropTargetEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        Object.assign(this, args);
+    }
+    /**
+     * Left for backward compatibility for the DropTarget deprecated events.
+     * @hidden
+     */
+    get normalizedEvent() {
+        return this.dragEvent;
+    }
+    /**
+     * Left for backward compatibility for the DropTarget deprecated events.
+     * @hidden
+     */
+    get hostElement() {
+        return this.dropTarget;
+    }
+}
+
 /**
  * Represents the [Kendo UI DropTargetContainer directive for Angular]({% slug api_utils_droptargetcontainerdirective %}).
  * Used to configure multiple elements as drop targets.
@@ -1890,12 +1784,13 @@ class DropTargetContainerDirective {
     }
 }
 DropTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetContainerDirective, deps: [{ token: DragStateService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-DropTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: { dropTargetFilter: "dropTargetFilter", dropDisabled: "dropDisabled" }, outputs: { onDragEnter: "onDragEnter", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" }, exportAs: ["kendoDropTargetContainer"], ngImport: i0 });
+DropTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropTargetContainerDirective, isStandalone: true, selector: "[kendoDropTargetContainer]", inputs: { dropTargetFilter: "dropTargetFilter", dropDisabled: "dropDisabled" }, outputs: { onDragEnter: "onDragEnter", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" }, exportAs: ["kendoDropTargetContainer"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropTargetContainer]',
-                    exportAs: 'kendoDropTargetContainer'
+                    exportAs: 'kendoDropTargetContainer',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropTargetFilter: [{
                 type: Input
@@ -1911,7 +1806,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
-const EXPORTS = [
+/**
+ * Represents the Kendo UI DropTarget directive for Angular.
+ */
+class DropTargetDirective {
+    constructor(service, element, ngZone) {
+        this.service = service;
+        this.element = element;
+        this.ngZone = ngZone;
+        /**
+         * Fires when a DragTarget element enters the DropTarget.
+         */
+        this.onDragEnter = new EventEmitter();
+        /**
+         * Fires when a DragTarget element is being dragged over the DropTarget.
+         */
+        this.onDragOver = new EventEmitter();
+        /**
+         * Fires when a DragTarget element leaves the DropTarget.
+         */
+        this.onDragLeave = new EventEmitter();
+        /**
+         * Fires when a DragTarget element is dropped over the DropTarget.
+         */
+        this.onDrop = new EventEmitter();
+        validatePackage(packageMetadata);
+    }
+    ngOnInit() {
+        this.initializeDropTarget();
+        this.service.dropTargets.push(this.dropTarget);
+    }
+    /**
+     * @hidden
+     */
+    handleDragEnter(event) {
+        if (!this.service.dragTarget) {
+            return;
+        }
+        this.service.dropTarget = this.dropTarget;
+        this.emitZoneAwareEvent('onDragEnter', event);
+    }
+    /**
+     * @hidden
+     */
+    handleDragLeave(event) {
+        this.service.dropTarget = null;
+        if (!this.service.dragTarget) {
+            return;
+        }
+        this.emitZoneAwareEvent('onDragLeave', event);
+    }
+    /**
+     * @hidden
+     */
+    handleDragOver(event) {
+        if (!this.service.dragTarget) {
+            return;
+        }
+        this.emitZoneAwareEvent('onDragOver', event);
+    }
+    /**
+     * @hidden
+     */
+    handleDrop(event) {
+        this.emitZoneAwareEvent('onDrop', event);
+        this.service.dropTarget = null;
+    }
+    initializeDropTarget() {
+        this.dropTarget = {
+            element: this.element.nativeElement,
+            onDragEnter: this.handleDragEnter.bind(this),
+            onDragLeave: this.handleDragLeave.bind(this),
+            onDragOver: this.handleDragOver.bind(this),
+            onDrop: this.handleDrop.bind(this)
+        };
+    }
+    emitZoneAwareEvent(event, normalizedEvent) {
+        var _a, _b;
+        const eventProps = {
+            dropTarget: this.element.nativeElement,
+            dragTarget: (_a = this.service.dragTarget) === null || _a === void 0 ? void 0 : _a.element,
+            dragEvent: normalizedEvent,
+            dragData: this.service.dragData
+        };
+        if (isPresent((_b = this.service.dragTarget) === null || _b === void 0 ? void 0 : _b.hint)) {
+            eventProps.hintElement = this.service.dragTarget.element;
+        }
+        const eventArgs = new DropTargetEvent(eventProps);
+        this.ngZone.run(() => {
+            this[event].emit(eventArgs);
+        });
+    }
+}
+DropTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetDirective, deps: [{ token: DragStateService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+DropTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropTargetDirective, isStandalone: true, selector: "[kendoDropTarget]", outputs: { onDragEnter: "onDragEnter", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" }, exportAs: ["kendoDropTarget"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDropTarget]',
+                    exportAs: 'kendoDropTarget',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { onDragEnter: [{
+                type: Output
+            }], onDragOver: [{
+                type: Output
+            }], onDragLeave: [{
+                type: Output
+            }], onDrop: [{
+                type: Output
+            }] } });
+
+/**
+ * Utility array that contains all `Drag and Drop` related components and directives
+ */
+const KENDO_DRAGANDDROP = [
     DragTargetDirective,
     DragHandleDirective,
     DropTargetDirective,
@@ -1919,15 +1928,24 @@ const EXPORTS = [
     DropTargetContainerDirective,
     HintComponent
 ];
+/**
+* Utility array that contains all `@progress/kendo-angular-utils` related components and directives.
+* > As of now, `KENDO_UTILS` includes only the `KENDO_DRAGANDDROP` utility array and their usage is equivalent.
+*/
+const KENDO_UTILS = [
+    ...KENDO_DRAGANDDROP
+];
+
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
- * definition for the Drag and Drop directives.
+ * definition for the Utils components.
  *
  * @example
  *
  * ```ts-no-run
- * // Import the DragAndDrop module
- * import { DragAndDropModule } from '@progress/kendo-angular-utils';
+ * // Import the Utils module
+ * import { UtilsModule } from '@progress/kendo-angular-utils';
  *
  * // The browser platform with a compiler
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -1940,7 +1958,7 @@ const EXPORTS = [
  * // Define the app module
  * _@NgModule({
  *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, DragAndDropModule], // import DragAndDropModule module
+ *     imports:      [BrowserModule, UtilsModule], // import Utils module
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
@@ -1950,40 +1968,29 @@ const EXPORTS = [
  *
  * ```
  */
-class DragAndDropModule {
+class UtilsModule {
 }
-DragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, declarations: [DragTargetDirective,
-        DragHandleDirective,
-        DropTargetDirective,
-        DragTargetContainerDirective,
-        DropTargetContainerDirective,
-        HintComponent], imports: [CommonModule], exports: [DragTargetDirective,
-        DragHandleDirective,
-        DropTargetDirective,
-        DragTargetContainerDirective,
-        DropTargetContainerDirective,
-        HintComponent] });
-DragAndDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, decorators: [{
+UtilsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UtilsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, imports: [DragTargetDirective, DragHandleDirective, DropTargetDirective, DragTargetContainerDirective, DropTargetContainerDirective, HintComponent], exports: [DragTargetDirective, DragHandleDirective, DropTargetDirective, DragTargetContainerDirective, DropTargetContainerDirective, HintComponent] });
+UtilsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, imports: [HintComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...EXPORTS],
-                    exports: [...EXPORTS],
-                    imports: [CommonModule],
-                    entryComponents: [HintComponent]
+                    exports: [...KENDO_UTILS],
+                    imports: [...KENDO_UTILS]
                 }]
         }] });
 
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
- * definition for the Utils components.
+ * definition for the Drag and Drop directives.
  *
  * @example
  *
  * ```ts-no-run
- * // Import the Utils module
- * import { UtilsModule } from '@progress/kendo-angular-utils';
+ * // Import the DragAndDrop module
+ * import { DragAndDropModule } from '@progress/kendo-angular-utils';
  *
  * // The browser platform with a compiler
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -1996,7 +2003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * // Define the app module
  * _@NgModule({
  *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, UtilsModule], // import Utils module
+ *     imports:      [BrowserModule, DragAndDropModule], // import DragAndDropModule module
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
@@ -2006,15 +2013,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  *
  * ```
  */
-class UtilsModule {
+class DragAndDropModule {
 }
-UtilsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UtilsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, exports: [DragAndDropModule] });
-UtilsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, imports: [DragAndDropModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, decorators: [{
+DragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, imports: [DragTargetDirective, DragHandleDirective, DropTargetDirective, DragTargetContainerDirective, DropTargetContainerDirective, HintComponent], exports: [DragTargetDirective, DragHandleDirective, DropTargetDirective, DragTargetContainerDirective, DropTargetContainerDirective, HintComponent] });
+DragAndDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, imports: [HintComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [DragAndDropModule]
+                    exports: [...KENDO_DRAGANDDROP],
+                    imports: [...KENDO_DRAGANDDROP],
+                    entryComponents: [HintComponent]
                 }]
         }] });
 
@@ -2022,5 +2031,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DragAndDropModule, DragHandleDirective, DragTargetContainerDirective, DragTargetDirective, DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragReadyEvent, DragTargetDragStartEvent, DragTargetPressEvent, DragTargetReleaseEvent, DropTargetContainerDirective, DropTargetDirective, DropTargetEvent, HintComponent, UtilsModule };
+export { DragAndDropModule, DragHandleDirective, DragTargetContainerDirective, DragTargetDirective, DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragReadyEvent, DragTargetDragStartEvent, DragTargetPressEvent, DragTargetReleaseEvent, DropTargetContainerDirective, DropTargetDirective, DropTargetEvent, HintComponent, KENDO_DRAGANDDROP, KENDO_UTILS, UtilsModule };