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

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

@@ -3,12 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, HostBinding, Component, Input, Injectable, EventEmitter, Output, ContentChildren, NgModule } 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 } from '@progress/kendo-angular-common';
+import { PreventableEvent, contains, isDocumentAvailable, parseCSSClassNames } from '@progress/kendo-angular-common';
+import { fromEvent, merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
 /**
  * @hidden
@@ -17,13 +19,14 @@ const packageMetadata = {
     name: '@progress/kendo-angular-utils',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1681813768,
-    version: '12.0.0-develop.8',
+    publishDate: 1682434159,
+    version: '12.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /**
  * Represents the Kendo UI DragHandle directive for Angular.
+ * It is used to specify a concrete element within a drag target as a handle for dragging, instead the drag target itself.
  */
 class DragHandleDirective {
     constructor(element) {
@@ -44,68 +47,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['class.k-cursor-pointer']
             }] } });
 
-/**
- * Arguments for the press event of the DragTarget.
- */
-class DragTargetPressEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        Object.assign(this, args);
-    }
+function isDocumentNode(container) {
+    return container.nodeType === 9;
 }
-
 /**
- * Arguments for the dragStart event of the DragTarget.
+ * @hidden
  */
-class DragTargetDragStartEvent extends PreventableEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        super();
-        Object.assign(this, args);
-    }
-}
-
+const getAction = (event, draggable) => {
+    return {
+        event: event,
+        payload: draggable
+    };
+};
 /**
- * Arguments for the dragEnd event of the DragTarget.
+ * @hidden
  */
-class DragTargetDragEndEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        Object.assign(this, args);
-    }
-}
-
+const dragTargetTransition = 'transform .3s ease-in-out';
 /**
- * Arguments for the drag event of the DragTarget.
+ * @hidden
  */
-class DragTargetDragEvent extends PreventableEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        super();
-        Object.assign(this, args);
-    }
-}
-
+const isPresent = (value) => value !== null && value !== undefined;
 /**
  * @hidden
  */
-const dragTargetTransition = 'transform .3s ease-in-out';
+function closestBySelector(element, selector) {
+    if (element.closest) {
+        return element.closest(selector);
+    }
+    const matches = Element.prototype.matches ?
+        (el, sel) => el.matches(sel)
+        : (el, sel) => el.msMatchesSelector(sel);
+    let node = element;
+    while (node && !isDocumentNode(node)) {
+        if (matches(node, selector)) {
+            return node;
+        }
+        node = node.parentNode;
+    }
+}
 /**
  * @hidden
  */
-const getAction = (event, draggable) => {
-    return {
-        event: event,
-        payload: draggable
-    };
+const intersect = (element, candidates) => {
+    let max = 0;
+    let result = null;
+    candidates.forEach((candidate) => {
+        if (candidate && element) {
+            const ration = getRatio(element, candidate);
+            if (ration > max) {
+                max = ration;
+                result = candidate;
+            }
+        }
+    });
+    return result;
+};
+const getRatio = (element, target) => {
+    const elementRect = element.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const top = Math.max(targetRect.top, elementRect.top);
+    const left = Math.max(targetRect.left, elementRect.left);
+    const right = Math.min(targetRect.left + targetRect.width, elementRect.left + elementRect.width);
+    const bottom = Math.min(targetRect.top + targetRect.height, elementRect.top + elementRect.height);
+    const width = right - left;
+    const height = bottom - top;
+    if (left < right && top < bottom) {
+        const targetArea = targetRect.width * targetRect.height;
+        const entryArea = elementRect.width * elementRect.height;
+        const intersectionArea = width * height;
+        const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
+        return Number(intersectionRatio.toFixed(4));
+    }
+    return 0;
 };
 /**
  * @hidden
@@ -119,30 +132,36 @@ const setElementStyles = (renderer, elem, styles) => {
 /**
  * @hidden
  */
-const isPresent = (value) => value !== null && value !== undefined;
+const allPointerDownEvents = ['pointerdown', 'mousedown', 'touchstart'];
+/**
+ * @hidden
+ */
+const allPointerMoveEvents = ['pointermove', 'mousemove', 'touchmove'];
+/**
+ * @hidden
+ */
+const allPointerUpEvents = ['pointerup', 'pointercancel', 'mouseup', 'contextmenu', 'touchend', 'touchcancel'];
 
-const DEFAULT_ZINDEX = 10;
 /**
  * @hidden
  */
 class HintComponent {
     constructor(element) {
         this.element = element;
-        this.hostClasses = true;
-        this.zIndex = DEFAULT_ZINDEX;
-        this.touchAction = 'none';
+        this.pointerEvents = 'none';
     }
 }
 HintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HintComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-HintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HintComponent, selector: "ng-component", inputs: { template: "template", directive: "directive" }, host: { properties: { "class.k-pos-absolute": "this.hostClasses", "class.k-cursor-grab": "this.hostClasses", "style.zIndex": "this.zIndex", "style.touch-action": "this.touchAction" } }, ngImport: i0, template: `
-        <ng-container *ngTemplateOutlet="template; context: { $implicit: directive }">
+HintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HintComponent, 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, directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HintComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-draghint',
                     template: `
-        <ng-container *ngTemplateOutlet="template; context: { $implicit: directive }">
+        <ng-container *ngTemplateOutlet="template; context: { $implicit: directive, index: targetIndex, data: contextData }">
         </ng-container>
     `
                 }]
@@ -150,20 +169,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], directive: [{
                 type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-pos-absolute']
-            }, {
-                type: HostBinding,
-                args: ['class.k-cursor-grab']
-            }], zIndex: [{
-                type: HostBinding,
-                args: ['style.zIndex']
-            }], touchAction: [{
+            }], targetIndex: [{
+                type: Input
+            }], contextData: [{
+                type: Input
+            }], pointerEvents: [{
                 type: HostBinding,
-                args: ['style.touch-action']
+                args: ['style.pointer-events']
             }] } });
 
+/**
+ * Arguments for the press event of the DragTarget and DragTargetContainer.
+ */
+class DragTargetPressEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        Object.assign(this, args);
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get normalizedEvent() {
+        return this.dragEvent;
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get hostElement() {
+        return this.dragTarget;
+    }
+}
+
+/**
+ * Arguments for the dragReady event of the DragTarget and DragTargetContainer.
+ */
+class DragTargetDragReadyEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * Arguments for the dragStart event of the DragTarget and DragTargetContainer.
+ */
+class DragTargetDragStartEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get normalizedEvent() {
+        return this.dragEvent;
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get hostElement() {
+        return this.dragTarget;
+    }
+}
+
+/**
+ * Arguments for the dragEnd event of the DragTarget and DragTargetContainer.
+ */
+class DragTargetDragEndEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        Object.assign(this, args);
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get normalizedEvent() {
+        return this.dragEvent;
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get hostElement() {
+        return this.dragTarget;
+    }
+}
+
+/**
+ * Arguments for the drag event of the DragTarget and DragTargetContainer.
+ */
+class DragTargetDragEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get normalizedEvent() {
+        return this.dragEvent;
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get hostElement() {
+        return this.dragTarget;
+    }
+}
+
+/**
+ * Arguments for the release event of the DragTarget and DragTargetContainer.
+ */
+class DragTargetReleaseEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        Object.assign(this, args);
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get normalizedEvent() {
+        return this.dragEvent;
+    }
+    /**
+     * Left for backward compatibility for the DragTarget deprecated events.
+     * @hidden
+     */
+    get hostElement() {
+        return this.dragTarget;
+    }
+}
+
 /**
  * @hidden
  */
@@ -186,6 +344,8 @@ class DragStateService {
         this.offset = { x: 0, y: 0 };
         this.pageOffset = { x: 0, y: 0 };
         this.velocity = { x: 0, y: 0 };
+        this.dragIndex = null;
+        this.dropIndex = null;
         this.callbacks = {};
         this.scrollInterval = null;
         this.setCallbacks();
@@ -284,21 +444,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-let isDragStartPrevented = false;
-let isDragPrevented = false;
+let isDragStartPrevented$1 = false;
+let isDragPrevented$1 = false;
 /**
  * Represents the Kendo UI DragTarget directive for Angular.
  */
 class DragTargetDirective {
-    constructor(element, renderer, ngZone, service, viewContainer, resolver) {
+    constructor(element, renderer, ngZone, service, viewContainer) {
         this.element = element;
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.service = service;
         this.viewContainer = viewContainer;
-        this.resolver = resolver;
         /**
-         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})).
+         * Defines whether a hint will be used for dragging. By default, the hint is a copy of the drag target. ([see example]({% slug drag_hint %})).
+         *
+         * @default false
+         */
+        this.hint = false;
+        /**
+         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})). Applicable when `manualDrag` is set to `false`.
          *
          * @default 0
          */
@@ -315,18 +480,22 @@ class DragTargetDirective {
          * @default 0
          */
         this.dragDelay = 0;
+        /**
+         * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
+         *
+         * @default 'auto'
+         */
+        this.mode = 'auto';
         /**
          * Fires when the user presses the DragTarget element.
          */
         this.press = new EventEmitter();
         /**
          * Fires when the dragging of the DragTarget element begins.
-         * This event is preventable.
          */
         this.dragStart = new EventEmitter();
         /**
          * Fires while the user drags the DragTarget element.
-         * This event is preventable.
          */
         this.drag = new EventEmitter();
         /**
@@ -341,32 +510,42 @@ class DragTargetDirective {
          * Fires when the dragging of the DragTarget ends and the element is released.
          */
         this.dragEnd = new EventEmitter();
-        this.touchAction = 'none';
         this.dragTarget = null;
         this.domSubscriptions = [];
-        this.hint = null;
-        this.initialPosition = { x: 0, y: 0 };
+        this.hintComponent = null;
         this.dragStarted = false;
         this.pressed = false;
         this.dragTimeout = null;
+        this.initialPosition = { x: 0, y: 0 };
         this.position = { x: 0, y: 0 };
+        this.scrollableParent = null;
+        this.defaultHint = null;
+        this._dragData = () => null;
         validatePackage(packageMetadata);
     }
     /**
-     * @hidden
+     * Defines a callback function used for attaching custom data to the dragTarget.
+     * The data will be available in the events of the respective [`DropTarget`]({% slug api_utils_droptargetdirective %}) or [`DropTargetContainer`]({% slug api_utils_droptargetcontainerdirective %}) directives.
+     * The current DragTarget HTML element and its `dragTargetId` will be available as arguments.
      */
+    set dragData(fn) {
+        if (isDevMode && typeof fn !== 'function') {
+            throw new Error(`dragData must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._dragData = fn;
+    }
+    get dragData() {
+        return this._dragData;
+    }
+    get hintTemplate() {
+        return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
+    }
     get nativeElement() {
         return this.element.nativeElement;
     }
-    /**
-     * @hidden
-     */
     get hintElem() {
-        return this.hint.instance.element.nativeElement;
+        return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
     }
-    /**
-     * @hidden
-     */
     onPointerDown(event) {
         if (this.dragHandles.length && !this.isDragHandle(event.target)) {
             return;
@@ -377,127 +556,88 @@ class DragTargetDirective {
         this.service.autoScroll = typeof this.autoScroll === 'object' ? this.autoScroll.enabled !== false : this.autoScroll;
         this.service.scrollableParent = this.getAutoScrollContainer();
         this.service.autoScrollDirection = typeof this.autoScroll === 'object' ? this.autoScroll.direction : { horizontal: true, vertical: true };
-        this.ngZone.runOutsideAngular(() => {
-            this.attachDomHandlers();
-        });
+        this.attachDomHandlers();
     }
-    /**
-     * @hidden
-     */
     onPointerMove(event) {
         event.preventDefault();
         const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
     }
-    /**
-     * @hidden
-     */
     onPointerUp(event) {
         event.preventDefault();
         const action = getAction(event, this.dragTarget);
         this.service.handleDragAndDrop(action);
-        this.ngZone.runOutsideAngular(() => {
-            this.attachDomHandlers();
-        });
+        this.attachDomHandlers();
     }
     ngOnInit() {
-        this.initializeDraggable();
+        this.initializeDragTarget();
     }
     ngAfterContentInit() {
         if (isPresent(this.element) || isPresent(this.dragTarget)) {
-            this.ngZone.runOutsideAngular(() => {
-                this.attachDomHandlers();
-                if (!this.dragHandles.length) {
-                    this.renderer.addClass(this.nativeElement, 'k-cursor-pointer');
-                }
-            });
+            this.attachDomHandlers();
+            if (!this.dragHandles.length) {
+                this.renderer.addClass(this.nativeElement, 'k-cursor-pointer');
+            }
         }
         this.service.dragTargets.push(this.dragTarget);
     }
     ngOnDestroy() {
         this.domSubscriptions.forEach(subscription => subscription());
     }
-    /**
-     * @hidden
-     */
     handlePress(event) {
         if (this.dragDelay > 0) {
-            this.dragTimeout = setTimeout(() => {
+            this.dragTimeout = window.setTimeout(() => {
                 this.pressed = true;
-                this.ngZone.run(() => {
-                    this.dragReady.emit();
-                });
+                this.emitZoneAwareEvent('dragReady', event);
             }, this.dragDelay);
         }
         else {
             this.pressed = true;
         }
-        this.ngZone.run(() => {
-            const eventArgs = new DragTargetPressEvent({ normalizedEvent: event, hostElement: this.nativeElement });
-            this.press.emit(eventArgs);
-        });
+        this.scrollableParent = this.dragTarget.element ? getScrollableParent(this.dragTarget.element) : null;
+        this.emitZoneAwareEvent('press', event);
     }
-    /**
-     * @hidden
-     */
     handleDragStart(event) {
         if (!this.pressed) {
             if (this.dragTimeout) {
-                clearTimeout(this.dragTimeout);
+                window.clearTimeout(this.dragTimeout);
                 this.dragTimeout = null;
             }
             return;
         }
-        this.ngZone.run(() => {
-            isDragStartPrevented = this.emitEvent('dragStart', { normalizedEvent: event, hostElement: this.nativeElement }).isDefaultPrevented();
-        });
-        if (isDragStartPrevented) {
+        isDragStartPrevented$1 = this.emitZoneAwareEvent('dragStart', event).isDefaultPrevented();
+        if (isDragStartPrevented$1) {
             return;
         }
-        if (isPresent(this.hintTemplate)) {
+        if (this.hint) {
             this.createHint();
-            if (isPresent(this.hint)) {
+            if (this.mode === 'auto') {
                 this.renderer.setStyle(this.nativeElement, 'opacity', '0.7');
             }
+            this.initialPosition = { x: event.offsetX, y: event.offsetY };
+        }
+        else {
+            this.initialPosition = { x: event.clientX - this.position.x, y: event.clientY - this.position.y };
         }
         this.dragStarted = this.threshold === 0;
         this.service.dragTarget = this.dragTarget;
         this.service.dragTargetDirective = this;
-        this.initialPosition = { x: event.clientX - this.position.x, y: event.clientY - this.position.y };
+        this.service.dragData = this.dragData(this.dragTarget.element, this.dragTargetIdResult);
     }
     handleDrag(event) {
-        if (!this.pressed || isDragStartPrevented) {
+        if (!this.pressed || isDragStartPrevented$1) {
             return;
         }
-        const elem = this.hint ? this.hintElem : this.nativeElement;
-        const eventArgsProps = elem === this.nativeElement ? { normalizedEvent: event, hostElement: this.nativeElement } : { normalizedEvent: event, hostElement: this.nativeElement, hintElement: elem };
-        this.ngZone.run(() => {
-            isDragPrevented = this.emitEvent('drag', eventArgsProps).isDefaultPrevented();
-        });
-        if (isDragPrevented) {
+        isDragPrevented$1 = this.emitZoneAwareEvent('drag', event).isDefaultPrevented();
+        if (isDragPrevented$1) {
             return;
         }
-        if (this.restrictByAxis === 'horizontal') {
-            this.position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: 0 };
-        }
-        else if (this.restrictByAxis === 'vertical') {
-            this.position = { x: 0, y: event.clientY - this.initialPosition.y + event.scrollY };
+        if (this.mode === 'auto') {
+            this.performDrag(event);
         }
         else {
-            this.position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
-        }
-        const thresholdNotReached = Math.abs(this.position.x) < this.threshold && Math.abs(this.position.y) < this.threshold;
-        if (!this.dragStarted && thresholdNotReached) {
-            return;
-        }
-        if (!this.dragStarted && this.threshold > 0) {
             this.dragStarted = true;
         }
-        const transform = `translate(${this.position.x}px, ${this.position.y}px)`;
-        setElementStyles(this.renderer, elem, {
-            transform: transform,
-            transition: 'none'
-        });
     }
     handleRelease(event) {
         if (this.dragTimeout) {
@@ -505,45 +645,36 @@ class DragTargetDirective {
             this.dragTimeout = null;
             this.pressed = false;
         }
-        this.service.dragTarget = null;
-        this.service.dragTargetDirective = null;
-        this.ngZone.run(() => {
-            const eventArgs = new DragTargetPressEvent({ normalizedEvent: event, hostElement: this.nativeElement });
-            this.release.emit(eventArgs);
-        });
+        this.emitZoneAwareEvent('release', event);
     }
     handleDragEnd(event) {
         var _a, _b;
-        if (this.dragTimeout) {
-            clearTimeout(this.dragTimeout);
-            this.dragTimeout = null;
-            this.pressed = false;
-        }
-        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;
-        if (isDroppedOverParentTarget || this.service.dropTargets.length > 0) {
-            this.renderer.removeStyle(elem, 'transform');
-            setElementStyles(this.renderer, elem, {
-                transition: dragTargetTransition
-            });
-            this.position = { x: 0, y: 0 };
+        if (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;
+            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 };
+            }
         }
-        if (isPresent(this.hint)) {
-            this.renderer.removeStyle(this.nativeElement, 'opacity');
+        if (this.hint && isPresent(this.hintElem)) {
             this.destroyHint();
+            if (this.mode === 'auto') {
+                this.renderer.removeStyle(this.nativeElement, 'opacity');
+            }
         }
         this.service.dragTarget = null;
         this.service.dragTargetDirective = null;
-        if (!this.dragStarted || isDragStartPrevented || isDragPrevented) {
+        if (!this.dragStarted || isDragStartPrevented$1 || isDragPrevented$1) {
             return;
         }
-        this.ngZone.run(() => {
-            const eventArgs = new DragTargetDragEndEvent({ normalizedEvent: event, hostElement: this.nativeElement });
-            this.dragEnd.emit(eventArgs);
-        });
+        this.emitZoneAwareEvent('dragEnd', event);
         this.dragStarted = false;
     }
-    initializeDraggable() {
+    initializeDragTarget() {
         this.dragTarget = {
             element: this.nativeElement,
             hint: null,
@@ -555,43 +686,44 @@ class DragTargetDirective {
         };
     }
     attachDomHandlers() {
-        if (this.domSubscriptions.length > 0) {
-            this.domSubscriptions.forEach(subscription => subscription());
-        }
-        if (!(isDocumentAvailable() && isPresent(this.element))) {
-            return;
-        }
-        if (this.service.pressed) {
-            this.onPointerMove = this.onPointerMove.bind(this);
-            this.onPointerUp = this.onPointerUp.bind(this);
-            let scrollable = getScrollableParent(this.nativeElement);
-            this.domSubscriptions = [
-                this.renderer.listen(document, 'pointermove', this.onPointerMove),
-                this.renderer.listen(document, 'mousemove', this.onPointerMove),
-                this.renderer.listen(document, 'touchmove', this.onPointerMove),
-                this.renderer.listen(document, 'pointerup', this.onPointerUp),
-                this.renderer.listen(document, 'pointercancel', this.onPointerUp),
-                this.renderer.listen(document, 'mouseup', this.onPointerUp),
-                this.renderer.listen(document, 'contextmenu', this.onPointerUp),
-                this.renderer.listen(document, 'touchend', this.onPointerUp),
-                this.renderer.listen(document, 'touchcancel', this.onPointerUp)
-            ];
-            if (scrollable) {
-                if (scrollable === document.getElementsByTagName('html')[0]) {
-                    scrollable = document;
+        this.ngZone.runOutsideAngular(() => {
+            if (this.domSubscriptions.length > 0) {
+                this.domSubscriptions.forEach(subscription => subscription());
+            }
+            if (!(isDocumentAvailable() && isPresent(this.element))) {
+                return;
+            }
+            if (this.service.pressed) {
+                this.onPointerMove = this.onPointerMove.bind(this);
+                this.onPointerUp = this.onPointerUp.bind(this);
+                this.domSubscriptions = [
+                    this.renderer.listen(document, 'pointermove', this.onPointerMove),
+                    this.renderer.listen(document, 'mousemove', this.onPointerMove),
+                    this.renderer.listen(document, 'touchmove', this.onPointerMove),
+                    this.renderer.listen(document, 'pointerup', this.onPointerUp),
+                    this.renderer.listen(document, 'pointercancel', this.onPointerUp),
+                    this.renderer.listen(document, 'mouseup', this.onPointerUp),
+                    this.renderer.listen(document, 'contextmenu', this.onPointerUp),
+                    this.renderer.listen(document, 'touchend', this.onPointerUp),
+                    this.renderer.listen(document, 'touchcancel', this.onPointerUp)
+                ];
+                if (isPresent(this.scrollableParent)) {
+                    if (this.scrollableParent === document.getElementsByTagName('html')[0]) {
+                        this.scrollableParent = window;
+                    }
+                    this.domSubscriptions.push(this.renderer.listen(this.scrollableParent, 'scroll', this.onPointerMove));
                 }
-                this.domSubscriptions.push(this.renderer.listen(scrollable, 'scroll', this.onPointerMove));
             }
-        }
-        else {
-            this.onPointerDown = this.onPointerDown.bind(this);
-            const element = this.nativeElement;
-            this.domSubscriptions = [
-                this.renderer.listen(element, 'pointerdown', this.onPointerDown),
-                this.renderer.listen(element, 'mousedown', this.onPointerDown),
-                this.renderer.listen(element, 'touchstart', this.onPointerDown)
-            ];
-        }
+            else {
+                this.onPointerDown = this.onPointerDown.bind(this);
+                const element = this.nativeElement;
+                this.domSubscriptions = [
+                    this.renderer.listen(element, 'pointerdown', this.onPointerDown),
+                    this.renderer.listen(element, 'mousedown', this.onPointerDown),
+                    this.renderer.listen(element, 'touchstart', this.onPointerDown)
+                ];
+            }
+        });
     }
     isDragHandle(el) {
         return this.dragHandles.toArray().some(dh => contains(dh.element.nativeElement, el, true));
@@ -603,55 +735,182 @@ class DragTargetDirective {
             this.autoScroll.boundaryElementRef.nativeElement : null;
     }
     createHint() {
-        const hintComponent = this.resolver.resolveComponentFactory(HintComponent);
-        this.hint = this.viewContainer.createComponent(hintComponent);
-        this.hint.instance.template = this.hintTemplate;
-        this.hint.instance.directive = this;
-        this.hint.changeDetectorRef.detectChanges();
-        this.dragTarget.hint = this.hint.instance.element.nativeElement;
+        if (!(isDocumentAvailable() && isPresent(this.element))) {
+            return;
+        }
+        if (isPresent(this.hint) && typeof this.hint === 'object') {
+            if (isPresent(this.hint.hintTemplate)) {
+                this.createCustomHint();
+            }
+            else {
+                this.createDefaultHint();
+            }
+        }
+        else {
+            this.createDefaultHint();
+        }
+        this.dragTarget.hint = this.hintElem;
+        if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
+            this.hint.appendTo.element.nativeElement.appendChild(this.hintElem);
+        }
+        else {
+            document.body.appendChild(this.hintElem);
+        }
+    }
+    createDefaultHint() {
+        this.defaultHint = this.nativeElement.cloneNode(true);
+        if (typeof this.hint === 'object') {
+            if (isPresent(this.hint.hintClass)) {
+                const hintClasses = parseCSSClassNames(this.hint.hintClass);
+                hintClasses.forEach(className => this.renderer.addClass(this.defaultHint, className));
+            }
+        }
+    }
+    createCustomHint() {
+        if (isPresent(this.hint.appendTo)) {
+            this.hintComponent = this.hint.appendTo.createComponent(HintComponent);
+        }
+        else {
+            this.hintComponent = this.viewContainer.createComponent(HintComponent);
+        }
+        this.hintComponent.instance.template = this.hintTemplate;
+        this.hintComponent.instance.directive = this;
+        this.hintComponent.changeDetectorRef.detectChanges();
     }
     destroyHint() {
-        this.hint.destroy();
-        this.hint.changeDetectorRef.detectChanges();
-        this.hint = null;
+        if (isPresent(this.hintTemplate)) {
+            this.hintComponent.destroy();
+            this.hintComponent.changeDetectorRef.detectChanges();
+            this.hintComponent = null;
+        }
+        else {
+            if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
+                this.hint.appendTo.element.nativeElement.removeChild(this.defaultHint);
+            }
+            else {
+                document.body.removeChild(this.defaultHint);
+            }
+            this.defaultHint = null;
+        }
         this.dragTarget.hint = null;
     }
-    emitEvent(event, args) {
+    emitZoneAwareEvent(event, normalizedEvent) {
+        const eventProps = {
+            dragTarget: this.nativeElement,
+            dragEvent: normalizedEvent
+        };
+        if (this.hint && isPresent(this.hintElem)) {
+            eventProps.hintElement = this.hintElem;
+        }
+        if (this.dragTargetId && this.dragTargetId !== '') {
+            eventProps.dragTargetId = this.dragTargetIdResult;
+        }
         let eventArgs;
         switch (event) {
+            case 'dragReady':
+                eventArgs = new DragTargetDragReadyEvent(eventProps);
+                break;
+            case 'press':
+                eventArgs = new DragTargetPressEvent(eventProps);
+                break;
             case 'dragStart':
-                eventArgs = new DragTargetDragStartEvent(args);
+                eventArgs = new DragTargetDragStartEvent(eventProps);
                 break;
             case 'drag':
-                eventArgs = new DragTargetDragEvent(args);
+                eventArgs = new DragTargetDragEvent(eventProps);
+                break;
+            case 'release':
+                eventArgs = new DragTargetReleaseEvent(eventProps);
+                break;
+            case 'dragEnd':
+                eventArgs = new DragTargetDragEndEvent(eventProps);
                 break;
             default:
                 break;
         }
-        this[event].emit(eventArgs);
+        this.ngZone.run(() => {
+            this[event].emit(eventArgs);
+        });
         return eventArgs;
     }
+    get dragTargetIdResult() {
+        if (this.dragTargetId && this.dragTargetId !== '') {
+            return typeof this.dragTargetId === 'string' ? this.dragTargetId : this.dragTargetId(this.dragTarget.element);
+        }
+    }
+    performDrag(event) {
+        const elem = this.hint ? this.hintElem : this.nativeElement;
+        this.position = this.calculatePosition(elem, event);
+        const thresholdNotReached = Math.abs(this.position.x) < this.threshold && Math.abs(this.position.y) < this.threshold;
+        if (!this.dragStarted && thresholdNotReached) {
+            return;
+        }
+        if (!this.dragStarted && this.threshold > 0) {
+            this.dragStarted = true;
+        }
+        const styles = this.getStylesPerElement(elem);
+        setElementStyles(this.renderer, elem, styles);
+    }
+    calculatePosition(element, event) {
+        let position = null;
+        if (element === this.hintElem) {
+            position = { x: event.clientX, y: event.clientY };
+        }
+        else {
+            position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
+        }
+        if (this.restrictByAxis === 'horizontal') {
+            position.y = 0;
+        }
+        else if (this.restrictByAxis === 'vertical') {
+            position.x = 0;
+        }
+        return position;
+    }
+    getStylesPerElement(element) {
+        if (element === this.hintElem) {
+            const hintCoordinates = { x: this.position.x - this.initialPosition.x, y: this.position.y - this.initialPosition.y };
+            return {
+                top: `${hintCoordinates.y}px`,
+                left: `${hintCoordinates.x}px`,
+                transition: 'none',
+                position: 'absolute',
+                zIndex: 1999
+            };
+        }
+        else {
+            const transform = `translate(${this.position.x}px, ${this.position.y}px)`;
+            return {
+                transform: transform,
+                transition: 'none'
+            };
+        }
+    }
 }
-DragTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: DragStateService }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragTargetDirective, selector: "[kendoDragTarget]", inputs: { hintTemplate: "hintTemplate", threshold: "threshold", autoScroll: "autoScroll", link: "link", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis" }, outputs: { press: "press", dragStart: "dragStart", drag: "drag", dragReady: "dragReady", release: "release", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "this.touchAction" } }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
+DragTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: DragStateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragTargetDirective, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { press: "press", dragStart: "dragStart", drag: "drag", dragReady: "dragReady", release: "release", dragEnd: "dragEnd" }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDragTarget]',
                     exportAs: 'kendoDragTarget'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: DragStateService }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { hintTemplate: [{
+        }], 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
-            }], link: [{
+            }], dragTargetId: [{
                 type: Input
             }], dragDelay: [{
                 type: Input
             }], restrictByAxis: [{
                 type: Input
+            }], mode: [{
+                type: Input
+            }], dragData: [{
+                type: Input
             }], press: [{
                 type: Output
             }], dragStart: [{
@@ -664,59 +923,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], dragEnd: [{
                 type: Output
-            }], touchAction: [{
-                type: HostBinding,
-                args: ['style.touch-action']
             }], dragHandles: [{
                 type: ContentChildren,
                 args: [DragHandleDirective]
             }] } });
 
 /**
- * Arguments for the dragEnter event of the DropTarget.
- */
-class DropTargetDragEnterEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        Object.assign(this, args);
-    }
-}
-
-/**
- * Arguments for the dragOver event of the DropTarget.
+ * Arguments for the drag events of the DropTarget and DropTargetContainer directives.
  */
-class DropTargetDragOverEvent {
+class DropTargetEvent {
     /**
      * @hidden
      */
     constructor(args) {
         Object.assign(this, args);
     }
-}
-
-/**
- * Arguments for the dragLeave event of the DropTarget.
- */
-class DropTargetDragLeaveEvent {
     /**
+     * Left for backward compatibility for the DropTarget deprecated events.
      * @hidden
      */
-    constructor(args) {
-        Object.assign(this, args);
+    get normalizedEvent() {
+        return this.dragEvent;
     }
-}
-
-/**
- * Arguments for the drop event of the DropTarget.
- */
-class DropTargetDropEvent {
     /**
+     * Left for backward compatibility for the DropTarget deprecated events.
      * @hidden
      */
-    constructor(args) {
-        Object.assign(this, args);
+    get hostElement() {
+        return this.dropTarget;
     }
 }
 
@@ -730,22 +964,18 @@ class DropTargetDirective {
         this.ngZone = ngZone;
         /**
          * Fires when a DragTarget element enters the DropTarget.
-         * This event is preventable. Preventing it allows full logic customization.
          */
         this.dragEnter = new EventEmitter();
         /**
          * Fires when a DragTarget element is being dragged over the DropTarget.
-         * This event is preventable. Preventing it allows full logic customization.
          */
         this.dragOver = new EventEmitter();
         /**
          * Fires when a DragTarget element leaves the DropTarget.
-         * This event is preventable. Preventing it allows full logic customization.
          */
         this.dragLeave = new EventEmitter();
         /**
          * Fires when a DragTarget element is dropped over the DropTarget.
-         * This event is preventable. Preventing it allows full logic customization.
          */
         this.drop = new EventEmitter();
         validatePackage(packageMetadata);
@@ -761,29 +991,10 @@ class DropTargetDirective {
         if (!this.service.dragTarget) {
             return;
         }
-        let allowed = true;
-        if (isPresent(this.allowedDragTargets)) {
-            switch (typeof this.allowedDragTargets) {
-                case 'function': {
-                    allowed = this.allowedDragTargets(this.service.dragTargetDirective);
-                    break;
-                }
-                case 'string': {
-                    allowed = this.service.dragTargetDirective.link === this.allowedDragTargets;
-                    break;
-                }
-                default: {
-                    allowed = this.allowedDragTargets.some(dt => dt === this.service.dragTargetDirective.link);
-                }
-            }
-        }
-        if (allowed) {
-            this.service.dropTarget = this.dropTarget;
-            this.ngZone.run(() => {
-                const eventArgs = new DropTargetDragEnterEvent({ normalizedEvent: event, hostElement: this.element.nativeElement });
-                this.dragEnter.emit(eventArgs);
-            });
-        }
+        this.service.dropTarget = this.dropTarget;
+        this.ngZone.run(() => {
+            this.emitEvent('dragEnter', event);
+        });
     }
     /**
      * @hidden
@@ -794,8 +1005,7 @@ class DropTargetDirective {
             return;
         }
         this.ngZone.run(() => {
-            const eventArgs = new DropTargetDragLeaveEvent({ normalizedEvent: event, hostElement: this.element.nativeElement });
-            this.dragLeave.emit(eventArgs);
+            this.emitEvent('dragLeave', event);
         });
     }
     /**
@@ -806,8 +1016,7 @@ class DropTargetDirective {
             return;
         }
         this.ngZone.run(() => {
-            const eventArgs = new DropTargetDragOverEvent({ normalizedEvent: event, hostElement: this.element.nativeElement });
-            this.dragOver.emit(eventArgs);
+            this.emitEvent('dragOver', event);
         });
     }
     /**
@@ -815,13 +1024,9 @@ class DropTargetDirective {
      */
     handleDrop(event) {
         this.ngZone.run(() => {
-            const eventArgs = new DropTargetDropEvent({ normalizedEvent: event, hostElement: this.element.nativeElement });
-            this.drop.emit(eventArgs);
+            this.emitEvent('drop', event);
         });
     }
-    /**
-     * @hidden
-     */
     initializeDropTarget() {
         this.dropTarget = {
             element: this.element.nativeElement,
@@ -831,16 +1036,848 @@ class DropTargetDirective {
             onDrop: this.handleDrop.bind(this)
         };
     }
+    emitEvent(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[event].emit(eventArgs);
+    }
 }
 DropTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropTargetDirective, deps: [{ token: DragStateService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-DropTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: { allowedDragTargets: "allowedDragTargets" }, outputs: { dragEnter: "dragEnter", dragOver: "dragOver", dragLeave: "dragLeave", drop: "drop" }, exportAs: ["kendoDropTarget"], ngImport: i0 });
+DropTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DropTargetDirective, selector: "[kendoDropTarget]", outputs: { dragEnter: "dragEnter", dragOver: "dragOver", dragLeave: "dragLeave", drop: "drop" }, exportAs: ["kendoDropTarget"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropTarget]',
                     exportAs: 'kendoDropTarget'
                 }]
-        }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { allowedDragTargets: [{
+        }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { dragEnter: [{
+                type: Output
+            }], dragOver: [{
+                type: Output
+            }], dragLeave: [{
+                type: Output
+            }], drop: [{
+                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>
+ * ```
+ */
+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 current drag target. ([see example]({% slug drag_target_container_hint %})).
+         *
+         * @default false
+         */
+        this.hint = false;
+        /**
+         * Defines the delay in milliseconds after which the drag will begin ([see example]({% slug drag_target_container_delay %})).
+         *
+         * @default 0
+         */
+        this.dragDelay = 0;
+        /**
+         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug drag_target_container_minimum_distance %})).
+         *
+         * @default 0
+         */
+        this.threshold = 0;
+        /**
+         * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
+         *
+         * @default 'auto'
+         */
+        this.mode = 'auto';
+        /**
+         * Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
+         */
+        this.dragReady = new EventEmitter();
+        /**
+         * Fires when the user presses a DragTarget element.
+         */
+        this.press = new EventEmitter();
+        /**
+         * Fires when the dragging of a DragTarget element begins.
+        */
+        this.dragStart = new EventEmitter();
+        /**
+         * Fires while the user drags a DragTarget element.
+         */
+        this.drag = new EventEmitter();
+        /**
+         * Fires when the user releases a DragTarget element after being pressed.
+         */
+        this.release = new EventEmitter();
+        /**
+         * Fires when the dragging of a DragTarget ends and the element is released.
+         */
+        this.dragEnd = new EventEmitter();
+        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.positionsMap = new Map();
+        this._dragTargetFilter = null;
+        this._dragDisabled = false;
+        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.
+     */
+    set dragData(fn) {
+        if (isDevMode && typeof fn !== 'function') {
+            throw new Error(`dragData must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._dragData = fn;
+    }
+    get dragData() {
+        return this._dragData;
+    }
+    /**
+     * 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.queryHost(this.dragHandle);
+    }
+    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();
+    }
+    onPointerDown(event) {
+        if (isPresent(this.dragHandles) && this.dragHandles.length && !this.isDragHandle(event.target)) {
+            return;
+        }
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+        this.subscribe();
+    }
+    onPointerMove(event) {
+        event.preventDefault();
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+    }
+    onPointerUp(event) {
+        event.preventDefault();
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+        this.ngZone.runOutsideAngular(() => {
+            this.subscribe();
+        });
+    }
+    handlePress(event) {
+        if (this.dragDelay > 0) {
+            this.dragTimeout = window.setTimeout(() => {
+                this.pressed = true;
+                this.emitZoneAwareEvent('dragReady', event);
+            }, this.dragDelay);
+        }
+        else {
+            this.pressed = true;
+        }
+        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('press', event);
+    }
+    handleDragStart(event) {
+        if (!this.pressed) {
+            if (this.dragTimeout) {
+                window.clearTimeout(this.dragTimeout);
+                this.dragTimeout = null;
+            }
+            return;
+        }
+        isDragStartPrevented = this.emitZoneAwareEvent('dragStart', event).isDefaultPrevented();
+        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');
+            }
+        }
+        else {
+            this.initialPosition = { x: event.clientX - this.position.x, y: event.clientY - this.position.y };
+        }
+        this.emitZoneAwareEvent('dragStart', event);
+        this.dragStarted = this.threshold === 0;
+        this.service.dragTarget = this.currentDragTarget;
+        this.service.dragTargetId = this.dragTargetId(this.currentDragTargetElement, this.service.dragIndex);
+        this.service.dragData = this.dragData(this.currentDragTargetElement, this.service.dragTargetId, this.service.dragIndex);
+    }
+    handleDrag(event) {
+        if (!this.pressed || isDragStartPrevented) {
+            return;
+        }
+        isDragPrevented = this.emitZoneAwareEvent('drag', event).isDefaultPrevented();
+        if (isDragPrevented) {
+            return;
+        }
+        if (this.mode === 'auto') {
+            this.performDrag(event);
+        }
+        else {
+            this.dragStarted = true;
+        }
+        this.dragStarted && this.emitZoneAwareEvent('drag', event);
+    }
+    handleRelease(event) {
+        if (this.dragStarted) {
+            this.positionsMap.set(this.currentDragTargetElement, this.position);
+        }
+        if (this.dragTimeout) {
+            clearTimeout(this.dragTimeout);
+            this.dragTimeout = null;
+            this.pressed = false;
+        }
+        this.emitZoneAwareEvent('release', event);
+    }
+    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;
+            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);
+            }
+        }
+        if (this.hint && isPresent(this.hintElem)) {
+            this.destroyHint();
+            if (this.mode === 'auto') {
+                this.renderer.removeStyle(this.currentDragTargetElement, 'opacity');
+            }
+        }
+        this.service.dragTarget = null;
+        this.service.dragIndex = null;
+        this.currentDragTarget.element = null;
+        this.emitZoneAwareEvent('dragEnd', event);
+        if (isDragStartPrevented || isDragPrevented) {
+            return;
+        }
+        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();
+        }
+    }
+    subscribe() {
+        this.ngZone.runOutsideAngular(() => {
+            this.unsubscribe();
+            if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
+                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));
+                if (isPresent(this.scrollableParent)) {
+                    this.scrollSubscription = fromEvent(this.scrollableParent, 'scroll')
+                        .subscribe(e => this.onPointerMove(e));
+                }
+            }
+            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.dragTargetFilter);
+                    if (filterElement) {
+                        this.onPointerDown(e);
+                    }
+                });
+            }
+        });
+    }
+    emitZoneAwareEvent(event, normalizedEvent) {
+        const eventProps = {
+            dragTarget: this.currentDragTargetElement,
+            dragEvent: normalizedEvent,
+            dragTargetIndex: this.service.dragIndex,
+            dragTargetId: this.dragTargetId(this.currentDragTargetElement, this.service.dragIndex)
+        };
+        if (this.hint && isPresent(this.hintElem)) {
+            eventProps.hintElement = this.hintElem;
+        }
+        let eventArgs;
+        switch (event) {
+            case 'dragReady':
+                eventArgs = new DragTargetDragReadyEvent(eventProps);
+                break;
+            case 'press':
+                eventArgs = new DragTargetPressEvent(eventProps);
+                break;
+            case 'dragStart':
+                eventArgs = new DragTargetDragStartEvent(eventProps);
+                break;
+            case 'drag':
+                eventArgs = new DragTargetDragEvent(eventProps);
+                break;
+            case 'release':
+                eventArgs = new DragTargetReleaseEvent(eventProps);
+                break;
+            case 'dragEnd':
+                eventArgs = new DragTargetDragEndEvent(eventProps);
+                break;
+            default:
+                break;
+        }
+        this.ngZone.run(() => {
+            this[event].emit(eventArgs);
+        });
+        return eventArgs;
+    }
+    createHint() {
+        if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
+            return;
+        }
+        if (isPresent(this.hint) && typeof this.hint === 'object') {
+            if (isPresent(this.hint.hintTemplate)) {
+                this.createCustomHint();
+            }
+            else {
+                this.createDefaultHint();
+            }
+        }
+        else {
+            this.createDefaultHint();
+        }
+        this.currentDragTarget.hint = this.hintElem;
+        if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
+            this.hint.appendTo.element.nativeElement.appendChild(this.hintElem);
+        }
+        else {
+            document.body.appendChild(this.hintElem);
+        }
+    }
+    createDefaultHint() {
+        this.defaultHint = this.currentDragTargetElement.cloneNode(true);
+        if (typeof this.hint === 'object') {
+            if (isPresent(this.hint.hintClass)) {
+                const hintClasses = parseCSSClassNames(this.hint.hintClass);
+                hintClasses.forEach(className => this.renderer.addClass(this.defaultHint, className));
+            }
+        }
+    }
+    createCustomHint() {
+        if (isPresent(this.hint.appendTo)) {
+            this.hintComponent = this.hint.appendTo.createComponent(HintComponent);
+        }
+        else {
+            this.hintComponent = this.viewContainer.createComponent(HintComponent);
+        }
+        this.hintComponent.instance.template = this.hintTemplate;
+        this.hintComponent.instance.directive = this;
+        this.hintComponent.instance.targetIndex = this.service.dragIndex;
+        this.hintComponent.instance.contextData = this.dragData(this.currentDragTargetElement, this.service.dragIndex);
+        this.hintComponent.changeDetectorRef.detectChanges();
+    }
+    destroyHint() {
+        if (isPresent(this.hintTemplate)) {
+            this.hintComponent.destroy();
+            this.hintComponent.changeDetectorRef.detectChanges();
+            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();
+            }
+            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)
+        };
+        this.setCursorStyle();
+    }
+    isDragHandle(el) {
+        return this.dragHandles.some(dh => contains(dh, el, true));
+    }
+    setCursorStyle() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
+            this.dragHandles.forEach(handle => {
+                this.renderer.addClass(handle, 'k-cursor-pointer');
+            });
+        }
+        else {
+            this.allDragTargets.forEach(target => {
+                this.renderer.addClass(target, 'k-cursor-pointer');
+            });
+        }
+    }
+    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(event) {
+        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) {
+            return;
+        }
+        if (!this.dragStarted && this.threshold > 0) {
+            this.dragStarted = true;
+        }
+        const styles = this.getStylesPerElement(elem);
+        setElementStyles(this.renderer, elem, styles);
+    }
+    calculatePosition(element, event) {
+        let position = null;
+        if (element === this.hintElem) {
+            position = { x: event.clientX, y: event.clientY };
+        }
+        else {
+            position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
+        }
+        return position;
+    }
+    getStylesPerElement(element) {
+        if (element === this.hintElem) {
+            const hintCoordinates = { x: this.position.x - this.initialPosition.x, y: this.position.y - this.initialPosition.y };
+            return {
+                top: `${hintCoordinates.y}px`,
+                left: `${hintCoordinates.x}px`,
+                transition: 'none',
+                position: 'absolute',
+                zIndex: 1999
+            };
+        }
+        else {
+            const transform = `translate(${this.position.x}px, ${this.position.y}px)`;
+            return {
+                transform: transform,
+                transition: 'none'
+            };
+        }
+    }
+}
+DragTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "12.0.0", version: "13.3.12", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: { hint: "hint", dragTargetFilter: "dragTargetFilter", dragHandle: "dragHandle", dragDelay: "dragDelay", threshold: "threshold", dragTargetId: "dragTargetId", dragData: "dragData", dragDisabled: "dragDisabled", mode: "mode" }, outputs: { dragReady: "dragReady", press: "press", dragStart: "dragStart", drag: "drag", release: "release", dragEnd: "dragEnd" }, exportAs: ["kendoDragTargetContainer"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDragTargetContainer]',
+                    exportAs: 'kendoDragTargetContainer'
+                }]
+        }], 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: [{
+                type: Input
+            }], threshold: [{
+                type: Input
+            }], dragTargetId: [{
+                type: Input
+            }], dragData: [{
+                type: Input
+            }], dragDisabled: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], dragReady: [{
+                type: Output
+            }], press: [{
+                type: Output
+            }], dragStart: [{
+                type: Output
+            }], drag: [{
+                type: Output
+            }], release: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }] } });
+
+/**
+ * Represents the [Kendo UI DropTargetContainer directive for Angular]({% slug api_utils_droptargetcontainerdirective %}).
+ * Used to configure multiple elements as drop targets.
+ *
+ * @example
+ * ```ts-no-run
+ * <div kendoDropTargetContainer dropTargetFilter=".my-droptarget">
+ *    <div class="my-droptarget">foo</div>
+ * </div>
+ * ```
+ */
+class DropTargetContainerDirective {
+    constructor(service, element, ngZone, cdr) {
+        this.service = service;
+        this.element = element;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
+        /**
+         * Fires when a DragTarget element enters the DropTarget.
+         */
+        this.dragEnter = new EventEmitter();
+        /**
+         * Fires when a DragTarget element is being dragged over the DropTarget.
+         */
+        this.dragOver = new EventEmitter();
+        /**
+         * Fires when a DragTarget element leaves the DropTarget.
+         */
+        this.dragLeave = new EventEmitter();
+        /**
+         * Fires when a DragTarget element is dropped over the DropTarget.
+         */
+        this.drop = new EventEmitter();
+        this.currentDropTarget = null;
+        this.currentDropTargetElement = null;
+        this.previousDropTargets = [];
+        this._dropTargetFilter = null;
+        this._dropDisabled = false;
+        validatePackage(packageMetadata);
+    }
+    /**
+     * Specifies a selector for elements within a container which will be configured as drop targets
+     * ([see example]({% slug drop_target_container %})). The possible values include any
+     * DOM `selector`.
+     */
+    set dropTargetFilter(value) {
+        this._dropTargetFilter = value;
+        if (!this.dropDisabled) {
+            this.initializeDropTargets();
+        }
+    }
+    get dropTargetFilter() {
+        return this._dropTargetFilter;
+    }
+    /**
+     * Specifies whether the Drop Targets within the container will emit the corresponding events upon interaction with a Drag Target.
+     */
+    set dropDisabled(value) {
+        if (value) {
+            this.clearPreviousTargets();
+        }
+        else {
+            this.initializeDropTargets();
+        }
+    }
+    get dropDisabled() {
+        return this._dropDisabled;
+    }
+    /**
+     * Used for notifying the DropTargetContainer that its content has changed.
+     */
+    notify() {
+        this.cdr.detectChanges();
+        this.initializeDropTargets();
+    }
+    get nativeElement() {
+        return this.element.nativeElement;
+    }
+    ngAfterViewInit() {
+        !this.dropDisabled && this.initializeDropTargets();
+    }
+    get allDropTargets() {
+        if (isPresent(this.dropTargetFilter) && this.dropTargetFilter !== '') {
+            return Array.from(this.nativeElement.querySelectorAll(this.dropTargetFilter));
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleDragEnter(event) {
+        if (!this.service.dragTarget) {
+            return;
+        }
+        const eventTarget = event.originalEvent.target;
+        this.currentDropTargetElement = intersect(eventTarget, this.allDropTargets);
+        this.currentDropTarget = this.service.dropTargets.find(dt => dt.element === this.currentDropTargetElement);
+        this.service.dropTarget = this.currentDropTarget;
+        this.service.dropIndex = this.getDropIndex();
+        this.emitZoneAwareEvent('dragEnter', event);
+    }
+    /**
+     * @hidden
+     */
+    handleDragLeave(event) {
+        this.service.dropTarget = null;
+        if (!this.service.dragTarget) {
+            return;
+        }
+        this.emitZoneAwareEvent('dragLeave', event);
+    }
+    /**
+     * @hidden
+     */
+    handleDragOver(event) {
+        if (!this.service.dragTarget) {
+            return;
+        }
+        this.emitZoneAwareEvent('dragOver', event);
+    }
+    /**
+     * @hidden
+     */
+    handleDrop(event) {
+        if (!this.service.dragTarget) {
+            return;
+        }
+        this.emitZoneAwareEvent('drop', event);
+        this.currentDropTarget = null;
+        this.currentDropTargetElement = null;
+        this.service.dropIndex = null;
+    }
+    initializeDropTargets() {
+        if (!isPresent(this.allDropTargets)) {
+            if (this.previousDropTargets.length > 0) {
+                this.clearPreviousTargets();
+            }
+            return;
+        }
+        this.allDropTargets.forEach(dropTargetEl => {
+            const isDropTargetInitialized = this.service.dropTargets.find(dt => dt.element === dropTargetEl);
+            if (!isDropTargetInitialized) {
+                this.service.dropTargets.push({
+                    element: dropTargetEl,
+                    onDragEnter: this.handleDragEnter.bind(this),
+                    onDragLeave: this.handleDragLeave.bind(this),
+                    onDragOver: this.handleDragOver.bind(this),
+                    onDrop: this.handleDrop.bind(this)
+                });
+            }
+        });
+        if (this.previousDropTargets.length > 0) {
+            const dropTargetsToRemove = this.previousDropTargets.filter(dt => !this.allDropTargets.includes(dt));
+            dropTargetsToRemove.forEach(dropTarget => {
+                const idx = this.service.dropTargets.findIndex(serviceDropTarget => serviceDropTarget.element === dropTarget);
+                if (idx > -1) {
+                    this.service.dropTargets.splice(idx, 1);
+                }
+            });
+        }
+        this.previousDropTargets = this.allDropTargets;
+    }
+    emitZoneAwareEvent(event, normalizedEvent) {
+        var _a;
+        const eventProps = {
+            dragTarget: this.service.dragTarget,
+            dropTarget: this.currentDropTargetElement,
+            dragData: this.service.dragData,
+            dragEvent: normalizedEvent,
+            dropTargetIndex: this.service.dropIndex
+        };
+        if (isPresent((_a = this.service.dragTarget) === null || _a === void 0 ? void 0 : _a.hint)) {
+            eventProps.hintElement = this.service.dragTarget.hint;
+        }
+        const eventArgs = new DropTargetEvent(eventProps);
+        this.ngZone.run(() => {
+            this[event].emit(eventArgs);
+        });
+    }
+    getDropIndex() {
+        const allTargets = this.nativeElement.querySelectorAll(this.dropTargetFilter);
+        return Array.from(allTargets).indexOf(this.currentDropTargetElement);
+    }
+    clearPreviousTargets() {
+        this.previousDropTargets.forEach(dropTarget => {
+            const idx = this.service.dropTargets.findIndex(serviceDropTarget => serviceDropTarget.element === dropTarget);
+            if (idx > -1) {
+                this.service.dropTargets.splice(idx, 1);
+            }
+        });
+        this.previousDropTargets = [];
+    }
+}
+DropTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "12.0.0", version: "13.3.12", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: { dropTargetFilter: "dropTargetFilter", dropDisabled: "dropDisabled" }, outputs: { dragEnter: "dragEnter", dragOver: "dragOver", dragLeave: "dragLeave", drop: "drop" }, exportAs: ["kendoDropTargetContainer"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropTargetContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDropTargetContainer]',
+                    exportAs: 'kendoDropTargetContainer'
+                }]
+        }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropTargetFilter: [{
+                type: Input
+            }], dropDisabled: [{
                 type: Input
             }], dragEnter: [{
                 type: Output
@@ -856,6 +1893,8 @@ const EXPORTS = [
     DragTargetDirective,
     DragHandleDirective,
     DropTargetDirective,
+    DragTargetContainerDirective,
+    DropTargetContainerDirective,
     HintComponent
 ];
 /**
@@ -895,9 +1934,13 @@ DragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 DragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", ngImport: i0, type: DragAndDropModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragAndDropModule, decorators: [{
@@ -957,5 +2000,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DragAndDropModule, DragHandleDirective, DragTargetDirective, DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragStartEvent, DragTargetPressEvent, DropTargetDirective, DropTargetDragEnterEvent, DropTargetDragLeaveEvent, DropTargetDragOverEvent, DropTargetDropEvent, HintComponent, UtilsModule };
+export { DragAndDropModule, DragHandleDirective, DragTargetContainerDirective, DragTargetDirective, DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragReadyEvent, DragTargetDragStartEvent, DragTargetPressEvent, DragTargetReleaseEvent, DropTargetContainerDirective, DropTargetDirective, DropTargetEvent, HintComponent, UtilsModule };