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

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

@@ -27,7 +27,7 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
     private viewContainer;
     private 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
      */
@@ -40,11 +40,11 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
     set dragTargetFilter(value: string);
     get dragTargetFilter(): string;
     /**
-     * Specifies a selector for elements within each DragTarget which will be configured as drag handles ([see example]({% slug drag_target_container_handle %})).
+     * Specifies a selector for elements within each DragTarget which will be configured as drag handles.
      */
     dragHandle: string;
     /**
-     * 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
      */
@@ -83,27 +83,27 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
     /**
      * Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
      */
-    dragReady: EventEmitter<DragTargetDragReadyEvent>;
+    onDragReady: EventEmitter<DragTargetDragReadyEvent>;
     /**
      * Fires when the user presses a DragTarget element.
      */
-    press: EventEmitter<DragTargetPressEvent>;
+    onPress: EventEmitter<DragTargetPressEvent>;
     /**
      * Fires when the dragging of a DragTarget element begins.
     */
-    dragStart: EventEmitter<DragTargetDragStartEvent>;
+    onDragStart: EventEmitter<DragTargetDragStartEvent>;
     /**
      * Fires while the user drags a DragTarget element.
      */
-    drag: EventEmitter<DragTargetDragEvent>;
+    onDrag: EventEmitter<DragTargetDragEvent>;
     /**
      * Fires when the user releases a DragTarget element after being pressed.
      */
-    release: EventEmitter<DragTargetReleaseEvent>;
+    onRelease: EventEmitter<DragTargetReleaseEvent>;
     /**
      * Fires when the dragging of a DragTarget ends and the element is released.
      */
-    dragEnd: EventEmitter<DragTargetDragEndEvent>;
+    onDragEnd: EventEmitter<DragTargetDragEndEvent>;
     /**
      * Used for notifying the DragTargetContainer that its content has changed.
      */
@@ -161,5 +161,5 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
     private calculatePosition;
     private getStylesPerElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<DragTargetContainerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetContainerDirective, "[kendoDragTargetContainer]", ["kendoDragTargetContainer"], { "hint": "hint"; "dragTargetFilter": "dragTargetFilter"; "dragHandle": "dragHandle"; "dragDelay": "dragDelay"; "threshold": "threshold"; "dragTargetId": "dragTargetId"; "dragData": "dragData"; "dragDisabled": "dragDisabled"; "mode": "mode"; }, { "dragReady": "dragReady"; "press": "press"; "dragStart": "dragStart"; "drag": "drag"; "release": "release"; "dragEnd": "dragEnd"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetContainerDirective, "[kendoDragTargetContainer]", ["kendoDragTargetContainer"], { "hint": "hint"; "dragTargetFilter": "dragTargetFilter"; "dragHandle": "dragHandle"; "dragDelay": "dragDelay"; "threshold": "threshold"; "dragTargetId": "dragTargetId"; "dragData": "dragData"; "dragDisabled": "dragDisabled"; "mode": "mode"; }, { "onDragReady": "onDragReady"; "onPress": "onPress"; "onDragStart": "onDragStart"; "onDrag": "onDrag"; "onRelease": "onRelease"; "onDragEnd": "onDragEnd"; }, never>;
 }

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

@@ -68,27 +68,27 @@ export declare class DragTargetDirective implements OnInit, AfterContentInit, On
     /**
      * Fires when the user presses the DragTarget element.
      */
-    press: EventEmitter<DragTargetPressEvent>;
+    onPress: EventEmitter<DragTargetPressEvent>;
     /**
      * Fires when the dragging of the DragTarget element begins.
      */
-    dragStart: EventEmitter<DragTargetDragStartEvent>;
+    onDragStart: EventEmitter<DragTargetDragStartEvent>;
     /**
      * Fires while the user drags the DragTarget element.
      */
-    drag: EventEmitter<DragTargetDragEvent>;
+    onDrag: EventEmitter<DragTargetDragEvent>;
     /**
      * Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
      */
-    dragReady: EventEmitter<DragTargetDragReadyEvent>;
+    onDragReady: EventEmitter<DragTargetDragReadyEvent>;
     /**
      * Fires when the user releases the DragTarget element after being pressed.
      */
-    release: EventEmitter<DragTargetReleaseEvent>;
+    onRelease: EventEmitter<DragTargetReleaseEvent>;
     /**
      * Fires when the dragging of the DragTarget ends and the element is released.
      */
-    dragEnd: EventEmitter<DragTargetDragEndEvent>;
+    onDragEnd: EventEmitter<DragTargetDragEndEvent>;
     private dragTarget;
     private domSubscriptions;
     private hintComponent;
@@ -130,5 +130,5 @@ export declare class DragTargetDirective implements OnInit, AfterContentInit, On
     private calculatePosition;
     private getStylesPerElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<DragTargetDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetDirective, "[kendoDragTarget]", ["kendoDragTarget"], { "hint": "hint"; "threshold": "threshold"; "autoScroll": "autoScroll"; "dragTargetId": "dragTargetId"; "dragDelay": "dragDelay"; "restrictByAxis": "restrictByAxis"; "mode": "mode"; "dragData": "dragData"; }, { "press": "press"; "dragStart": "dragStart"; "drag": "drag"; "dragReady": "dragReady"; "release": "release"; "dragEnd": "dragEnd"; }, ["dragHandles"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetDirective, "[kendoDragTarget]", ["kendoDragTarget"], { "hint": "hint"; "threshold": "threshold"; "autoScroll": "autoScroll"; "dragTargetId": "dragTargetId"; "dragDelay": "dragDelay"; "restrictByAxis": "restrictByAxis"; "mode": "mode"; "dragData": "dragData"; }, { "onPress": "onPress"; "onDragStart": "onDragStart"; "onDrag": "onDrag"; "onDragReady": "onDragReady"; "onRelease": "onRelease"; "onDragEnd": "onDragEnd"; }, ["dragHandles"]>;
 }

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

@@ -38,19 +38,19 @@ export declare class DropTargetContainerDirective implements AfterViewInit {
     /**
      * Fires when a DragTarget element enters the DropTarget.
      */
-    dragEnter: EventEmitter<DropTargetEvent>;
+    onDragEnter: EventEmitter<DropTargetEvent>;
     /**
      * Fires when a DragTarget element is being dragged over the DropTarget.
      */
-    dragOver: EventEmitter<DropTargetEvent>;
+    onDragOver: EventEmitter<DropTargetEvent>;
     /**
      * Fires when a DragTarget element leaves the DropTarget.
      */
-    dragLeave: EventEmitter<DropTargetEvent>;
+    onDragLeave: EventEmitter<DropTargetEvent>;
     /**
      * Fires when a DragTarget element is dropped over the DropTarget.
      */
-    drop: EventEmitter<DropTargetEvent>;
+    onDrop: EventEmitter<DropTargetEvent>;
     /**
      * Used for notifying the DropTargetContainer that its content has changed.
      */
@@ -85,5 +85,5 @@ export declare class DropTargetContainerDirective implements AfterViewInit {
     private getDropIndex;
     private clearPreviousTargets;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropTargetContainerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetContainerDirective, "[kendoDropTargetContainer]", ["kendoDropTargetContainer"], { "dropTargetFilter": "dropTargetFilter"; "dropDisabled": "dropDisabled"; }, { "dragEnter": "dragEnter"; "dragOver": "dragOver"; "dragLeave": "dragLeave"; "drop": "drop"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetContainerDirective, "[kendoDropTargetContainer]", ["kendoDropTargetContainer"], { "dropTargetFilter": "dropTargetFilter"; "dropDisabled": "dropDisabled"; }, { "onDragEnter": "onDragEnter"; "onDragOver": "onDragOver"; "onDragLeave": "onDragLeave"; "onDrop": "onDrop"; }, never>;
 }

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

@@ -17,19 +17,19 @@ export declare class DropTargetDirective implements OnInit {
     /**
      * Fires when a DragTarget element enters the DropTarget.
      */
-    dragEnter: EventEmitter<DropTargetEvent>;
+    onDragEnter: EventEmitter<DropTargetEvent>;
     /**
      * Fires when a DragTarget element is being dragged over the DropTarget.
      */
-    dragOver: EventEmitter<DropTargetEvent>;
+    onDragOver: EventEmitter<DropTargetEvent>;
     /**
      * Fires when a DragTarget element leaves the DropTarget.
      */
-    dragLeave: EventEmitter<DropTargetEvent>;
+    onDragLeave: EventEmitter<DropTargetEvent>;
     /**
      * Fires when a DragTarget element is dropped over the DropTarget.
      */
-    drop: EventEmitter<DropTargetEvent>;
+    onDrop: EventEmitter<DropTargetEvent>;
     constructor(service: DragStateService, element: ElementRef, ngZone: NgZone);
     private dropTarget;
     ngOnInit(): void;
@@ -50,7 +50,7 @@ export declare class DropTargetDirective implements OnInit {
      */
     handleDrop(event: NormalizedDragEvent): void;
     private initializeDropTarget;
-    private emitEvent;
+    private emitZoneAwareEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropTargetDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetDirective, "[kendoDropTarget]", ["kendoDropTarget"], {}, { "dragEnter": "dragEnter"; "dragOver": "dragOver"; "dragLeave": "dragLeave"; "drop": "drop"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetDirective, "[kendoDropTarget]", ["kendoDropTarget"], {}, { "onDragEnter": "onDragEnter"; "onDragOver": "onDragOver"; "onDragLeave": "onDragLeave"; "onDrop": "onDrop"; }, never>;
 }

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

@@ -15,7 +15,7 @@ export class DragHandleDirective {
     }
 }
 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: { "class.k-cursor-move": "this.hostClass" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragHandleDirective, decorators: [{
             type: Directive,
             args: [{
@@ -24,5 +24,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
-                args: ['class.k-cursor-pointer']
+                args: ['class.k-cursor-move']
             }] } });

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

@@ -37,13 +37,13 @@ export 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
          */
@@ -63,27 +63,27 @@ export 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;
@@ -214,7 +214,7 @@ export class DragTargetContainerDirective {
         if (this.dragDelay > 0) {
             this.dragTimeout = window.setTimeout(() => {
                 this.pressed = true;
-                this.emitZoneAwareEvent('dragReady', event);
+                this.emitZoneAwareEvent('onDragReady', event);
             }, this.dragDelay);
         }
         else {
@@ -225,7 +225,7 @@ export 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) {
@@ -235,7 +235,7 @@ export class DragTargetContainerDirective {
             }
             return;
         }
-        isDragStartPrevented = this.emitZoneAwareEvent('dragStart', event).isDefaultPrevented();
+        isDragStartPrevented = this.emitZoneAwareEvent('onDragStart', event).isDefaultPrevented();
         if (isDragStartPrevented) {
             return;
         }
@@ -258,7 +258,7 @@ export class DragTargetContainerDirective {
         if (!this.pressed || isDragStartPrevented) {
             return;
         }
-        isDragPrevented = this.emitZoneAwareEvent('drag', event).isDefaultPrevented();
+        isDragPrevented = this.emitZoneAwareEvent('onDrag', event).isDefaultPrevented();
         if (isDragPrevented) {
             return;
         }
@@ -268,7 +268,6 @@ export class DragTargetContainerDirective {
         else {
             this.dragStarted = true;
         }
-        this.dragStarted && this.emitZoneAwareEvent('drag', event);
     }
     handleRelease(event) {
         if (this.dragStarted) {
@@ -279,7 +278,7 @@ export class DragTargetContainerDirective {
             this.dragTimeout = null;
             this.pressed = false;
         }
-        this.emitZoneAwareEvent('release', event);
+        this.emitZoneAwareEvent('onRelease', event);
     }
     handleDragEnd(event) {
         if (!this.dragStarted) {
@@ -305,7 +304,7 @@ export 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;
         }
@@ -376,22 +375,22 @@ export class DragTargetContainerDirective {
         }
         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:
@@ -516,12 +515,12 @@ export class DragTargetContainerDirective {
         }
         if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
             this.dragHandles.forEach(handle => {
-                this.renderer.addClass(handle, 'k-cursor-pointer');
+                this.renderer.addClass(handle, 'k-cursor-move');
             });
         }
         else {
             this.allDragTargets.forEach(target => {
-                this.renderer.addClass(target, 'k-cursor-pointer');
+                this.renderer.addClass(target, 'k-cursor-move');
             });
         }
     }
@@ -549,8 +548,10 @@ export 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;
@@ -583,7 +584,7 @@ export 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: i1.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: [{
@@ -608,16 +609,16 @@ 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
             }] } });

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

@@ -61,27 +61,27 @@ export 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;
@@ -148,7 +148,7 @@ export 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.addClass(this.nativeElement, 'k-cursor-move');
             }
         }
         this.service.dragTargets.push(this.dragTarget);
@@ -160,14 +160,14 @@ export 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) {
@@ -177,7 +177,7 @@ export class DragTargetDirective {
             }
             return;
         }
-        isDragStartPrevented = this.emitZoneAwareEvent('dragStart', event).isDefaultPrevented();
+        isDragStartPrevented = this.emitZoneAwareEvent('onDragStart', event).isDefaultPrevented();
         if (isDragStartPrevented) {
             return;
         }
@@ -200,7 +200,7 @@ export class DragTargetDirective {
         if (!this.pressed || isDragStartPrevented) {
             return;
         }
-        isDragPrevented = this.emitZoneAwareEvent('drag', event).isDefaultPrevented();
+        isDragPrevented = this.emitZoneAwareEvent('onDrag', event).isDefaultPrevented();
         if (isDragPrevented) {
             return;
         }
@@ -217,7 +217,7 @@ export class DragTargetDirective {
             this.dragTimeout = null;
             this.pressed = false;
         }
-        this.emitZoneAwareEvent('release', event);
+        this.emitZoneAwareEvent('onRelease', event);
     }
     handleDragEnd(event) {
         if (this.mode === 'auto') {
@@ -242,7 +242,7 @@ export class DragTargetDirective {
         if (!this.dragStarted || isDragStartPrevented || isDragPrevented) {
             return;
         }
-        this.emitZoneAwareEvent('dragEnd', event);
+        this.emitZoneAwareEvent('onDragEnd', event);
         this.dragStarted = false;
     }
     initializeDragTarget() {
@@ -378,22 +378,22 @@ export 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:
@@ -419,8 +419,10 @@ export 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;
@@ -459,7 +461,7 @@ export 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: i1.DragStateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragTargetDirective, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { press: "press", dragStart: "dragStart", drag: "drag", dragReady: "dragReady", release: "release", dragEnd: "dragEnd" }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
+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: [{
@@ -482,17 +484,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,