@progress/kendo-angular-utils 13.0.0-develop.9 → 13.0.1-develop.1

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

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export declare class DragHandleDirective {
     element: ElementRef;
     constructor(element: ElementRef);
-    hostClass: boolean;
+    cursorStyle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DragHandleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DragHandleDirective, "[kendoDragHandle]", ["kendoDragHandle"], {}, {}, never>;
 }

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
      */

package/drag-and-drop/models/functions.d.ts

@@ -8,10 +8,40 @@
  * It returns the custom data that will be available in the events of the respective [`DropTarget`]({% slug api_utils_droptargetdirective %}) or [`DropTargetContainer`]({% slug api_utils_droptargetcontainerdirective %}) directives upon interaction.
  *
  */
-export declare type DragTargetDataFn = (dragTarget: HTMLElement, dragTargetId?: any, dragTargetIndex?: number) => any;
+export declare type DragTargetDataFn = (args: DragTargetDataArgs) => any;
 /**
  * Represents the callback that is used by the `dragTargetId` property of the [`DragTargetContainer`]({% slug api_utils_dragtargetcontainerdirective %}) directive.
  *
  * It returns a custom identifier that will be available in the events of the respective directive upon its interaction with a valid DropTarget.
  */
-export declare type DragTargetIdFn = (dragTarget: HTMLElement, dragTargetIndex?: number) => any;
+export declare type DragTargetIdFn = (args: DragTargetIdArgs) => any;
+/**
+ * Represents the callback arguments used by the `dragData` property.
+ */
+export interface DragTargetDataArgs {
+    /**
+     * The drag target HTML element.
+     */
+    dragTarget: HTMLElement;
+    /**
+     * The drag target unique identifier, result from executing the callback used by the `dragTargetId` property. Applicable for the `DragTargetContainerDirective`.
+     */
+    dragTargetId: any;
+    /**
+     * The index of the current drag target in the collection of drag targets. Applicable for the `DragTargetContainerDirective`.
+     */
+    dragTargetIndex: number;
+}
+/**
+ * Represents the callback arguments used by the `dragTargetId` property.
+ */
+export interface DragTargetIdArgs {
+    /**
+     * The drag target HTML element.
+     */
+    dragTarget: HTMLElement;
+    /**
+     * The index of the current drag target in the collection of drag targets. Applicable for the `DragTargetContainerDirective`.
+     */
+    dragTargetIndex: number;
+}

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

@@ -11,18 +11,18 @@ import * as i0 from "@angular/core";
 export 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']
             }] } });

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
          */
@@ -251,8 +251,10 @@ export 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) {
@@ -364,11 +366,12 @@ export 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;
@@ -443,7 +446,8 @@ export 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() {
@@ -515,12 +519,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.setStyle(handle, 'cursor', 'move');
             });
         }
         else {
             this.allDragTargets.forEach(target => {
-                this.renderer.addClass(target, 'k-cursor-pointer');
+                this.renderer.setStyle(target, 'cursor', 'move');
             });
         }
     }
@@ -548,8 +552,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;

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

@@ -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.setStyle(this.nativeElement, 'cursor', 'move');
             }
         }
         this.service.dragTargets.push(this.dragTarget);
@@ -194,7 +194,7 @@ export 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) {
@@ -406,7 +406,7 @@ export 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) {
@@ -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;

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

@@ -174,7 +174,7 @@ export class DropTargetContainerDirective {
     }
     emitZoneAwareEvent(event, normalizedEvent) {
         const eventProps = {
-            dragTarget: this.service.dragTarget,
+            dragTarget: this.service.dragTarget?.element,
             dropTarget: this.currentDropTargetElement,
             dragData: this.service.dragData,
             dragEvent: normalizedEvent,

package/esm2020/package-metadata.mjs

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

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: 1685110787,
-    version: '13.0.0-develop.9',
+    publishDate: 1686070425,
+    version: '13.0.1-develop.1',
     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) {
@@ -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);
@@ -622,7 +622,7 @@ 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) {
@@ -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;
@@ -1085,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
          */
@@ -1299,8 +1301,10 @@ 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) {
@@ -1413,11 +1417,12 @@ 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;
@@ -1492,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() {
@@ -1564,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');
             });
         }
     }
@@ -1597,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;
@@ -1833,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);

package/fesm2020/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: 1685110787,
-    version: '13.0.0-develop.9',
+    publishDate: 1686070425,
+    version: '13.0.1-develop.1',
     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']
             }] } });
 
 /**
@@ -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);
@@ -622,7 +622,7 @@ 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) {
@@ -834,7 +834,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) {
@@ -847,8 +847,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;
@@ -1083,13 +1085,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
          */
@@ -1297,8 +1299,10 @@ 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) {
@@ -1410,11 +1414,12 @@ 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;
@@ -1489,7 +1494,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() {
@@ -1561,12 +1567,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');
             });
         }
     }
@@ -1594,8 +1600,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;
@@ -1831,7 +1839,7 @@ class DropTargetContainerDirective {
     }
     emitZoneAwareEvent(event, normalizedEvent) {
         const eventProps = {
-            dragTarget: this.service.dragTarget,
+            dragTarget: this.service.dragTarget?.element,
             dropTarget: this.currentDropTargetElement,
             dragData: this.service.dragData,
             dragEvent: normalizedEvent,

package/package.json

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