@progress/kendo-angular-utils 13.0.0-develop.2 → 13.0.0-develop.21

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

@@ -19,8 +19,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-utils',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846458,
-    version: '13.0.0-develop.2',
+    publishDate: 1685972670,
+    version: '13.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -31,20 +31,20 @@ const packageMetadata = {
 class DragHandleDirective {
     constructor(element) {
         this.element = element;
-        this.hostClass = true;
+        this.cursorStyle = 'move';
     }
 }
 DragHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-DragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragHandleDirective, selector: "[kendoDragHandle]", host: { properties: { "class.k-cursor-pointer": "this.hostClass" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
+DragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragHandleDirective, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDragHandle]',
                     exportAs: 'kendoDragHandle'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { cursorStyle: [{
                 type: HostBinding,
-                args: ['class.k-cursor-pointer']
+                args: ['style.cursor']
             }] } });
 
 function isDocumentNode(container) {
@@ -489,27 +489,27 @@ class DragTargetDirective {
         /**
          * Fires when the user presses the DragTarget element.
          */
-        this.press = new EventEmitter();
+        this.onPress = new EventEmitter();
         /**
          * Fires when the dragging of the DragTarget element begins.
          */
-        this.dragStart = new EventEmitter();
+        this.onDragStart = new EventEmitter();
         /**
          * Fires while the user drags the DragTarget element.
          */
-        this.drag = new EventEmitter();
+        this.onDrag = new EventEmitter();
         /**
          * Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
          */
-        this.dragReady = new EventEmitter();
+        this.onDragReady = new EventEmitter();
         /**
          * Fires when the user releases the DragTarget element after being pressed.
          */
-        this.release = new EventEmitter();
+        this.onRelease = new EventEmitter();
         /**
          * Fires when the dragging of the DragTarget ends and the element is released.
          */
-        this.dragEnd = new EventEmitter();
+        this.onDragEnd = new EventEmitter();
         this.dragTarget = null;
         this.domSubscriptions = [];
         this.hintComponent = null;
@@ -576,7 +576,7 @@ class DragTargetDirective {
         if (isPresent(this.element) || isPresent(this.dragTarget)) {
             this.attachDomHandlers();
             if (!this.dragHandles.length) {
-                this.renderer.addClass(this.nativeElement, 'k-cursor-pointer');
+                this.renderer.setStyle(this.nativeElement, 'cursor', 'move');
             }
         }
         this.service.dragTargets.push(this.dragTarget);
@@ -588,14 +588,14 @@ class DragTargetDirective {
         if (this.dragDelay > 0) {
             this.dragTimeout = window.setTimeout(() => {
                 this.pressed = true;
-                this.emitZoneAwareEvent('dragReady', event);
+                this.emitZoneAwareEvent('onDragReady', event);
             }, this.dragDelay);
         }
         else {
             this.pressed = true;
         }
         this.scrollableParent = this.dragTarget.element ? getScrollableParent(this.dragTarget.element) : null;
-        this.emitZoneAwareEvent('press', event);
+        this.emitZoneAwareEvent('onPress', event);
     }
     handleDragStart(event) {
         if (!this.pressed) {
@@ -605,7 +605,7 @@ class DragTargetDirective {
             }
             return;
         }
-        isDragStartPrevented$1 = this.emitZoneAwareEvent('dragStart', event).isDefaultPrevented();
+        isDragStartPrevented$1 = this.emitZoneAwareEvent('onDragStart', event).isDefaultPrevented();
         if (isDragStartPrevented$1) {
             return;
         }
@@ -622,13 +622,13 @@ class DragTargetDirective {
         this.dragStarted = this.threshold === 0;
         this.service.dragTarget = this.dragTarget;
         this.service.dragTargetDirective = this;
-        this.service.dragData = this.dragData(this.dragTarget.element, this.dragTargetIdResult);
+        this.service.dragData = this.dragData({ dragTarget: this.dragTarget.element, dragTargetId: this.dragTargetIdResult, dragTargetIndex: null });
     }
     handleDrag(event) {
         if (!this.pressed || isDragStartPrevented$1) {
             return;
         }
-        isDragPrevented$1 = this.emitZoneAwareEvent('drag', event).isDefaultPrevented();
+        isDragPrevented$1 = this.emitZoneAwareEvent('onDrag', event).isDefaultPrevented();
         if (isDragPrevented$1) {
             return;
         }
@@ -645,7 +645,7 @@ class DragTargetDirective {
             this.dragTimeout = null;
             this.pressed = false;
         }
-        this.emitZoneAwareEvent('release', event);
+        this.emitZoneAwareEvent('onRelease', event);
     }
     handleDragEnd(event) {
         var _a, _b;
@@ -671,7 +671,7 @@ class DragTargetDirective {
         if (!this.dragStarted || isDragStartPrevented$1 || isDragPrevented$1) {
             return;
         }
-        this.emitZoneAwareEvent('dragEnd', event);
+        this.emitZoneAwareEvent('onDragEnd', event);
         this.dragStarted = false;
     }
     initializeDragTarget() {
@@ -807,22 +807,22 @@ class DragTargetDirective {
         }
         let eventArgs;
         switch (event) {
-            case 'dragReady':
+            case 'onDragReady':
                 eventArgs = new DragTargetDragReadyEvent(eventProps);
                 break;
-            case 'press':
+            case 'onPress':
                 eventArgs = new DragTargetPressEvent(eventProps);
                 break;
-            case 'dragStart':
+            case 'onDragStart':
                 eventArgs = new DragTargetDragStartEvent(eventProps);
                 break;
-            case 'drag':
+            case 'onDrag':
                 eventArgs = new DragTargetDragEvent(eventProps);
                 break;
-            case 'release':
+            case 'onRelease':
                 eventArgs = new DragTargetReleaseEvent(eventProps);
                 break;
-            case 'dragEnd':
+            case 'onDragEnd':
                 eventArgs = new DragTargetDragEndEvent(eventProps);
                 break;
             default:
@@ -835,7 +835,7 @@ class DragTargetDirective {
     }
     get dragTargetIdResult() {
         if (this.dragTargetId && this.dragTargetId !== '') {
-            return typeof this.dragTargetId === 'string' ? this.dragTargetId : this.dragTargetId(this.dragTarget.element);
+            return typeof this.dragTargetId === 'string' ? this.dragTargetId : this.dragTargetId({ dragTarget: this.dragTarget.element, dragTargetIndex: null });
         }
     }
     performDrag(event) {
@@ -848,8 +848,10 @@ class DragTargetDirective {
         if (!this.dragStarted && this.threshold > 0) {
             this.dragStarted = true;
         }
-        const styles = this.getStylesPerElement(elem);
-        setElementStyles(this.renderer, elem, styles);
+        if (elem) {
+            const styles = this.getStylesPerElement(elem);
+            setElementStyles(this.renderer, elem, styles);
+        }
     }
     calculatePosition(element, event) {
         let position = null;
@@ -888,7 +890,7 @@ class DragTargetDirective {
     }
 }
 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 });
+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: { 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: "13.3.12", ngImport: i0, type: DragTargetDirective, decorators: [{
             type: Directive,
             args: [{
@@ -911,17 +913,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], dragData: [{
                 type: Input
-            }], press: [{
+            }], onPress: [{
                 type: Output
-            }], dragStart: [{
+            }], onDragStart: [{
                 type: Output
-            }], drag: [{
+            }], onDrag: [{
                 type: Output
-            }], dragReady: [{
+            }], onDragReady: [{
                 type: Output
-            }], release: [{
+            }], onRelease: [{
                 type: Output
-            }], dragEnd: [{
+            }], onDragEnd: [{
                 type: Output
             }], dragHandles: [{
                 type: ContentChildren,
@@ -965,19 +967,19 @@ class DropTargetDirective {
         /**
          * Fires when a DragTarget element enters the DropTarget.
          */
-        this.dragEnter = new EventEmitter();
+        this.onDragEnter = new EventEmitter();
         /**
          * Fires when a DragTarget element is being dragged over the DropTarget.
          */
-        this.dragOver = new EventEmitter();
+        this.onDragOver = new EventEmitter();
         /**
          * Fires when a DragTarget element leaves the DropTarget.
          */
-        this.dragLeave = new EventEmitter();
+        this.onDragLeave = new EventEmitter();
         /**
          * Fires when a DragTarget element is dropped over the DropTarget.
          */
-        this.drop = new EventEmitter();
+        this.onDrop = new EventEmitter();
         validatePackage(packageMetadata);
     }
     ngOnInit() {
@@ -992,9 +994,7 @@ class DropTargetDirective {
             return;
         }
         this.service.dropTarget = this.dropTarget;
-        this.ngZone.run(() => {
-            this.emitEvent('dragEnter', event);
-        });
+        this.emitZoneAwareEvent('onDragEnter', event);
     }
     /**
      * @hidden
@@ -1004,9 +1004,7 @@ class DropTargetDirective {
         if (!this.service.dragTarget) {
             return;
         }
-        this.ngZone.run(() => {
-            this.emitEvent('dragLeave', event);
-        });
+        this.emitZoneAwareEvent('onDragLeave', event);
     }
     /**
      * @hidden
@@ -1015,17 +1013,13 @@ class DropTargetDirective {
         if (!this.service.dragTarget) {
             return;
         }
-        this.ngZone.run(() => {
-            this.emitEvent('dragOver', event);
-        });
+        this.emitZoneAwareEvent('onDragOver', event);
     }
     /**
      * @hidden
      */
     handleDrop(event) {
-        this.ngZone.run(() => {
-            this.emitEvent('drop', event);
-        });
+        this.emitZoneAwareEvent('onDrop', event);
     }
     initializeDropTarget() {
         this.dropTarget = {
@@ -1036,7 +1030,7 @@ class DropTargetDirective {
             onDrop: this.handleDrop.bind(this)
         };
     }
-    emitEvent(event, normalizedEvent) {
+    emitZoneAwareEvent(event, normalizedEvent) {
         var _a, _b;
         const eventProps = {
             dropTarget: this.element.nativeElement,
@@ -1048,24 +1042,26 @@ class DropTargetDirective {
             eventProps.hintElement = this.service.dragTarget.element;
         }
         const eventArgs = new DropTargetEvent(eventProps);
-        this[event].emit(eventArgs);
+        this.ngZone.run(() => {
+            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]", 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: { onDragEnter: "onDragEnter", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" }, 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: { dragEnter: [{
+        }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { onDragEnter: [{
                 type: Output
-            }], dragOver: [{
+            }], onDragOver: [{
                 type: Output
-            }], dragLeave: [{
+            }], onDragLeave: [{
                 type: Output
-            }], drop: [{
+            }], onDrop: [{
                 type: Output
             }] } });
 
@@ -1091,13 +1087,13 @@ class DragTargetContainerDirective {
         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 %})).
+         * 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;
         /**
-         * Defines the delay in milliseconds after which the drag will begin ([see example]({% slug drag_target_container_delay %})).
+         * Defines the delay in milliseconds after which the drag will begin ([see example](slug drag_target_container#toc-events)).
          *
          * @default 0
          */
@@ -1117,27 +1113,27 @@ class DragTargetContainerDirective {
         /**
          * Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
          */
-        this.dragReady = new EventEmitter();
+        this.onDragReady = new EventEmitter();
         /**
          * Fires when the user presses a DragTarget element.
          */
-        this.press = new EventEmitter();
+        this.onPress = new EventEmitter();
         /**
          * Fires when the dragging of a DragTarget element begins.
         */
-        this.dragStart = new EventEmitter();
+        this.onDragStart = new EventEmitter();
         /**
          * Fires while the user drags a DragTarget element.
          */
-        this.drag = new EventEmitter();
+        this.onDrag = new EventEmitter();
         /**
          * Fires when the user releases a DragTarget element after being pressed.
          */
-        this.release = new EventEmitter();
+        this.onRelease = new EventEmitter();
         /**
          * Fires when the dragging of a DragTarget ends and the element is released.
          */
-        this.dragEnd = new EventEmitter();
+        this.onDragEnd = new EventEmitter();
         this.currentDragTarget = null;
         this.dragTimeout = null;
         this.pressed = false;
@@ -1268,7 +1264,7 @@ class DragTargetContainerDirective {
         if (this.dragDelay > 0) {
             this.dragTimeout = window.setTimeout(() => {
                 this.pressed = true;
-                this.emitZoneAwareEvent('dragReady', event);
+                this.emitZoneAwareEvent('onDragReady', event);
             }, this.dragDelay);
         }
         else {
@@ -1279,7 +1275,7 @@ class DragTargetContainerDirective {
         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);
+        this.emitZoneAwareEvent('onPress', event);
     }
     handleDragStart(event) {
         if (!this.pressed) {
@@ -1289,7 +1285,7 @@ class DragTargetContainerDirective {
             }
             return;
         }
-        isDragStartPrevented = this.emitZoneAwareEvent('dragStart', event).isDefaultPrevented();
+        isDragStartPrevented = this.emitZoneAwareEvent('onDragStart', event).isDefaultPrevented();
         if (isDragStartPrevented) {
             return;
         }
@@ -1305,14 +1301,16 @@ class DragTargetContainerDirective {
         }
         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);
+        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) {
             return;
         }
-        isDragPrevented = this.emitZoneAwareEvent('drag', event).isDefaultPrevented();
+        isDragPrevented = this.emitZoneAwareEvent('onDrag', event).isDefaultPrevented();
         if (isDragPrevented) {
             return;
         }
@@ -1322,7 +1320,6 @@ class DragTargetContainerDirective {
         else {
             this.dragStarted = true;
         }
-        this.dragStarted && this.emitZoneAwareEvent('drag', event);
     }
     handleRelease(event) {
         if (this.dragStarted) {
@@ -1333,7 +1330,7 @@ class DragTargetContainerDirective {
             this.dragTimeout = null;
             this.pressed = false;
         }
-        this.emitZoneAwareEvent('release', event);
+        this.emitZoneAwareEvent('onRelease', event);
     }
     handleDragEnd(event) {
         var _a, _b;
@@ -1360,7 +1357,7 @@ class DragTargetContainerDirective {
         this.service.dragTarget = null;
         this.service.dragIndex = null;
         this.currentDragTarget.element = null;
-        this.emitZoneAwareEvent('dragEnd', event);
+        this.emitZoneAwareEvent('onDragEnd', event);
         if (isDragStartPrevented || isDragPrevented) {
             return;
         }
@@ -1420,33 +1417,34 @@ class DragTargetContainerDirective {
         });
     }
     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(this.currentDragTargetElement, this.service.dragIndex)
+            dragTargetId: this.dragTargetId(targetIdArgs)
         };
         if (this.hint && isPresent(this.hintElem)) {
             eventProps.hintElement = this.hintElem;
         }
         let eventArgs;
         switch (event) {
-            case 'dragReady':
+            case 'onDragReady':
                 eventArgs = new DragTargetDragReadyEvent(eventProps);
                 break;
-            case 'press':
+            case 'onPress':
                 eventArgs = new DragTargetPressEvent(eventProps);
                 break;
-            case 'dragStart':
+            case 'onDragStart':
                 eventArgs = new DragTargetDragStartEvent(eventProps);
                 break;
-            case 'drag':
+            case 'onDrag':
                 eventArgs = new DragTargetDragEvent(eventProps);
                 break;
-            case 'release':
+            case 'onRelease':
                 eventArgs = new DragTargetReleaseEvent(eventProps);
                 break;
-            case 'dragEnd':
+            case 'onDragEnd':
                 eventArgs = new DragTargetDragEndEvent(eventProps);
                 break;
             default:
@@ -1499,7 +1497,8 @@ class DragTargetContainerDirective {
         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);
+        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() {
@@ -1571,12 +1570,12 @@ class DragTargetContainerDirective {
         }
         if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
             this.dragHandles.forEach(handle => {
-                this.renderer.addClass(handle, 'k-cursor-pointer');
+                this.renderer.setStyle(handle, 'cursor', 'move');
             });
         }
         else {
             this.allDragTargets.forEach(target => {
-                this.renderer.addClass(target, 'k-cursor-pointer');
+                this.renderer.setStyle(target, 'cursor', 'move');
             });
         }
     }
@@ -1604,8 +1603,10 @@ class DragTargetContainerDirective {
         if (!this.dragStarted && this.threshold > 0) {
             this.dragStarted = true;
         }
-        const styles = this.getStylesPerElement(elem);
-        setElementStyles(this.renderer, elem, styles);
+        if (elem) {
+            const styles = this.getStylesPerElement(elem);
+            setElementStyles(this.renderer, elem, styles);
+        }
     }
     calculatePosition(element, event) {
         let position = null;
@@ -1638,7 +1639,7 @@ class DragTargetContainerDirective {
     }
 }
 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 });
+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: { onDragReady: "onDragReady", onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onRelease: "onRelease", onDragEnd: "onDragEnd" }, exportAs: ["kendoDragTargetContainer"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetContainerDirective, decorators: [{
             type: Directive,
             args: [{
@@ -1663,17 +1664,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], mode: [{
                 type: Input
-            }], dragReady: [{
+            }], onDragReady: [{
                 type: Output
-            }], press: [{
+            }], onPress: [{
                 type: Output
-            }], dragStart: [{
+            }], onDragStart: [{
                 type: Output
-            }], drag: [{
+            }], onDrag: [{
                 type: Output
-            }], release: [{
+            }], onRelease: [{
                 type: Output
-            }], dragEnd: [{
+            }], onDragEnd: [{
                 type: Output
             }] } });
 
@@ -1697,19 +1698,19 @@ class DropTargetContainerDirective {
         /**
          * Fires when a DragTarget element enters the DropTarget.
          */
-        this.dragEnter = new EventEmitter();
+        this.onDragEnter = new EventEmitter();
         /**
          * Fires when a DragTarget element is being dragged over the DropTarget.
          */
-        this.dragOver = new EventEmitter();
+        this.onDragOver = new EventEmitter();
         /**
          * Fires when a DragTarget element leaves the DropTarget.
          */
-        this.dragLeave = new EventEmitter();
+        this.onDragLeave = new EventEmitter();
         /**
          * Fires when a DragTarget element is dropped over the DropTarget.
          */
-        this.drop = new EventEmitter();
+        this.onDrop = new EventEmitter();
         this.currentDropTarget = null;
         this.currentDropTargetElement = null;
         this.previousDropTargets = [];
@@ -1776,7 +1777,7 @@ class DropTargetContainerDirective {
         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);
+        this.emitZoneAwareEvent('onDragEnter', event);
     }
     /**
      * @hidden
@@ -1786,7 +1787,7 @@ class DropTargetContainerDirective {
         if (!this.service.dragTarget) {
             return;
         }
-        this.emitZoneAwareEvent('dragLeave', event);
+        this.emitZoneAwareEvent('onDragLeave', event);
     }
     /**
      * @hidden
@@ -1795,7 +1796,7 @@ class DropTargetContainerDirective {
         if (!this.service.dragTarget) {
             return;
         }
-        this.emitZoneAwareEvent('dragOver', event);
+        this.emitZoneAwareEvent('onDragOver', event);
     }
     /**
      * @hidden
@@ -1804,7 +1805,7 @@ class DropTargetContainerDirective {
         if (!this.service.dragTarget) {
             return;
         }
-        this.emitZoneAwareEvent('drop', event);
+        this.emitZoneAwareEvent('onDrop', event);
         this.currentDropTarget = null;
         this.currentDropTargetElement = null;
         this.service.dropIndex = null;
@@ -1840,15 +1841,15 @@ class DropTargetContainerDirective {
         this.previousDropTargets = this.allDropTargets;
     }
     emitZoneAwareEvent(event, normalizedEvent) {
-        var _a;
+        var _a, _b;
         const eventProps = {
-            dragTarget: this.service.dragTarget,
+            dragTarget: (_a = this.service.dragTarget) === null || _a === void 0 ? void 0 : _a.element,
             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)) {
+        if (isPresent((_b = this.service.dragTarget) === null || _b === void 0 ? void 0 : _b.hint)) {
             eventProps.hintElement = this.service.dragTarget.hint;
         }
         const eventArgs = new DropTargetEvent(eventProps);
@@ -1871,7 +1872,7 @@ class DropTargetContainerDirective {
     }
 }
 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 });
+DropTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DropTargetContainerDirective, 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: "13.3.12", ngImport: i0, type: DropTargetContainerDirective, decorators: [{
             type: Directive,
             args: [{
@@ -1882,13 +1883,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], dropDisabled: [{
                 type: Input
-            }], dragEnter: [{
+            }], onDragEnter: [{
                 type: Output
-            }], dragOver: [{
+            }], onDragOver: [{
                 type: Output
-            }], dragLeave: [{
+            }], onDragLeave: [{
                 type: Output
-            }], drop: [{
+            }], onDrop: [{
                 type: Output
             }] } });