@progress/kendo-angular-utils 17.0.0-develop.4 → 17.0.0-develop.41

package/README.md

@@ -1,31 +1,42 @@
-<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
+<a href="https://www.telerik.com/kendo-angular-ui/components/utils" target="_blank">
 <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
 </a>
 
-## Native UI and Data Visualization Components for Angular
+## Kendo UI for Angular Utilities Package
 
-Kendo UI for Angular is a commercial UI library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
-
-> **Important**
 > * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)&mdash;a commercial UI library.
-> * You will need to install a license key when adding the package to your project. For more information, please refer to the [My License page](https://www.telerik.com/kendo-angular-ui/my-license/).
-> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui/) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui). Doing so indicates that you [Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui).
-> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI dev team!
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
+> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
+
+The Kendo UI for Angular Utilities deliver a Drag and Drop functionality that can be used with Angular components or regular HTML elements to enhance their performance and functionality. The Drag and Drop is built from the ground up and specifically for Angular, so that you get high-performance controls which integrate tightly with your application and with the rest of the Kendo UI for Angular components.
+
+## Key Features
+
+Among the many features which the Kendo UI for Angular Drag and Drop delivers are:
+
+* Drag Target&mdash;The [`DragTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/dragtarget) directive turns any HTML element or Angular component in a draggable item. This enables the user to change the position of the element by dragging it. The `DragTarget` can also be dropped on any [`DropTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/droptarget).
+* Drop Target&mdash;The [`DropTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/droptarget) directive allows for any HTML element or Angular component to handle drag targets that dropped on it. The directive emits a number of events when a valid drag target interacts with it. This enables you to execute custom logic and fine tune the behavior.
+* Drag Target Container&mdash;The [`DragTargetContainer`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/drag-container) directive is an extended [`DragTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/dragtarget) directive. It enables you to configure multiple elements within а container as drag targets. Thе directive is also suitable when the drag target elements are not accessible in the template.
+* Drop Target Container&mdash;The [`DropTargetContainer`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/drop-container) directive is an extended [`DropTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/droptarget) directive. It enables you to configure multiple elements within the container as drop targets. This directive is also suitable when the drop target elements are not accessible in the template.
+* Auto Scroll and Axis Lock&mdash;The Drag and Drop allows you to automatically scroll the nearest scrollable parent element while also providing an option to restrict the drag either to the horizontal or the vertical axis. Read more about the [auto scroll](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/autoscroll) and [axis lock](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/axis) features.
+* Drag Hint&mdash;The Drag and Drop utility allows you to dynamically create and customize an element that can be used for the purpose of dragging instead of the drag target element itself. [Read more about the drag hint element...](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/hint)
+
+## Support Options
+
+For any issues you might encounter while working with the Kendo UI for Angular Drag and Drop, you have the following support channels available:
+
+* Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
+* Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
 
 ## Resources
 
-* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular Utilities](https://www.telerik.com/kendo-angular-ui/components/utils/installation/getting-started)
 * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
 * [Blogs](http://www.telerik.com/blogs/kendo-ui)
 * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
-## Questions and Feedback
-
-* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
-* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
-* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
-* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
-
 *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 
 *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

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

@@ -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"; }, { "onDragReady": "onDragReady"; "onPress": "onPress"; "onDragStart": "onDragStart"; "onDrag": "onDrag"; "onRelease": "onRelease"; "onDragEnd": "onDragEnd"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetContainerDirective, "[kendoDragTargetContainer]", ["kendoDragTargetContainer"], { "hint": { "alias": "hint"; "required": false; }; "dragTargetFilter": { "alias": "dragTargetFilter"; "required": false; }; "dragHandle": { "alias": "dragHandle"; "required": false; }; "dragDelay": { "alias": "dragDelay"; "required": false; }; "threshold": { "alias": "threshold"; "required": false; }; "dragTargetId": { "alias": "dragTargetId"; "required": false; }; "dragData": { "alias": "dragData"; "required": false; }; "dragDisabled": { "alias": "dragDisabled"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "onDragReady": "onDragReady"; "onPress": "onPress"; "onDragStart": "onDragStart"; "onDrag": "onDrag"; "onRelease": "onRelease"; "onDragEnd": "onDragEnd"; }, never, never, true, never>;
 }

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

@@ -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"; }, { "onPress": "onPress"; "onDragStart": "onDragStart"; "onDrag": "onDrag"; "onDragReady": "onDragReady"; "onRelease": "onRelease"; "onDragEnd": "onDragEnd"; }, ["dragHandles"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetDirective, "[kendoDragTarget]", ["kendoDragTarget"], { "hint": { "alias": "hint"; "required": false; }; "threshold": { "alias": "threshold"; "required": false; }; "autoScroll": { "alias": "autoScroll"; "required": false; }; "dragTargetId": { "alias": "dragTargetId"; "required": false; }; "dragDelay": { "alias": "dragDelay"; "required": false; }; "restrictByAxis": { "alias": "restrictByAxis"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "dragData": { "alias": "dragData"; "required": false; }; }, { "onPress": "onPress"; "onDragStart": "onDragStart"; "onDrag": "onDrag"; "onDragReady": "onDragReady"; "onRelease": "onRelease"; "onDragEnd": "onDragEnd"; }, ["dragHandles"], never, true, never>;
 }

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

@@ -84,5 +84,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"; }, { "onDragEnter": "onDragEnter"; "onDragOver": "onDragOver"; "onDragLeave": "onDragLeave"; "onDrop": "onDrop"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetContainerDirective, "[kendoDropTargetContainer]", ["kendoDropTargetContainer"], { "dropTargetFilter": { "alias": "dropTargetFilter"; "required": false; }; "dropDisabled": { "alias": "dropDisabled"; "required": false; }; }, { "onDragEnter": "onDragEnter"; "onDragOver": "onDragOver"; "onDragLeave": "onDragLeave"; "onDrop": "onDrop"; }, never, never, true, never>;
 }

package/drag-and-drop/hint.component.d.ts

@@ -16,5 +16,5 @@ export declare class HintComponent {
     pointerEvents: string;
     constructor(element: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<HintComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HintComponent, "kendo-draghint", never, { "template": "template"; "directive": "directive"; "targetIndex": "targetIndex"; "contextData": "contextData"; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HintComponent, "kendo-draghint", never, { "template": { "alias": "template"; "required": false; }; "directive": { "alias": "directive"; "required": false; }; "targetIndex": { "alias": "targetIndex"; "required": false; }; "contextData": { "alias": "contextData"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -5,4 +5,4 @@
 /**
  * Represents the axis to which the dragging will be restricted.
  */
-export declare type DragAxis = 'horizontal' | 'vertical';
+export type DragAxis = 'horizontal' | 'vertical';

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

@@ -5,4 +5,4 @@
 /**
  * Represents the available modes for the drag action.
  */
-export declare type DragMode = 'auto' | 'manual';
+export type DragMode = 'auto' | 'manual';

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

@@ -8,13 +8,13 @@
  * 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 = (args: DragTargetDataArgs) => any;
+export 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 = (args: DragTargetIdArgs) => any;
+export type DragTargetIdFn = (args: DragTargetIdArgs) => any;
 /**
  * Represents the callback arguments used by the `dragData` property.
  */

package/{esm2020 → esm2022}/drag-and-drop/drag-state.service.mjs

@@ -11,29 +11,33 @@ import * as i0 from "@angular/core";
  */
 export class DragStateService {
     constructor() {
-        this.dragTarget = null;
-        this.dropTarget = null;
-        this.dragTargets = [];
-        this.dropTargets = [];
-        this.pressed = false;
-        this.ignoreMouse = false;
-        this.autoScroll = true;
-        this.isScrolling = false;
-        this.scrollableParent = null;
-        this.autoScrollDirection = { horizontal: true, vertical: true };
-        this.initialClientOffset = { x: 0, y: 0 };
-        this.clientOffset = { x: 0, y: 0 };
-        this.initialScrollOffset = { x: 0, y: 0 };
-        this.scrollOffset = { x: 0, y: 0 };
-        this.offset = { x: 0, y: 0 };
-        this.pageOffset = { x: 0, y: 0 };
-        this.velocity = { x: 0, y: 0 };
-        this.dragIndex = null;
-        this.dropIndex = null;
-        this.callbacks = {};
-        this.scrollInterval = null;
         this.setCallbacks();
     }
+    dragTarget = null;
+    dropTarget = null;
+    dragTargets = [];
+    dropTargets = [];
+    pressed = false;
+    ignoreMouse = false;
+    autoScroll = true;
+    isScrolling = false;
+    scrollableParent = null;
+    autoScrollDirection = { horizontal: true, vertical: true };
+    initialClientOffset = { x: 0, y: 0 };
+    clientOffset = { x: 0, y: 0 };
+    initialScrollOffset = { x: 0, y: 0 };
+    scrollOffset = { x: 0, y: 0 };
+    offset = { x: 0, y: 0 };
+    pageOffset = { x: 0, y: 0 };
+    velocity = { x: 0, y: 0 };
+    dragTargetDirective;
+    state;
+    dragIndex = null;
+    dropIndex = null;
+    dragData;
+    dragTargetId;
+    callbacks = {};
+    scrollInterval = null;
     handleDragAndDrop(action) {
         this.updateState();
         dispatchDragAndDrop(this.state, action, this.callbacks);
@@ -124,10 +128,10 @@ export class DragStateService {
             this.scrollInterval = null;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragStateService, providedIn: 'root' });
 }
-DragStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DragStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragStateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragStateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/{esm2020 → esm2022}/drag-and-drop/draghandle.directive.mjs

@@ -9,14 +9,15 @@ import * as i0 from "@angular/core";
  * It is used to specify a concrete element within a drag target as a handle for dragging, instead the drag target itself.
  */
 export class DragHandleDirective {
+    element;
     constructor(element) {
         this.element = element;
-        this.cursorStyle = 'move';
     }
+    cursorStyle = 'move';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragHandleDirective, isStandalone: true, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
 }
-DragHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-DragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragHandleDirective, isStandalone: true, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDragHandle]',

package/{esm2020 → esm2022}/drag-and-drop/dragtarget-container.directive.mjs

@@ -29,79 +29,18 @@ let isDragPrevented = false;
  * ```
  */
 export class DragTargetContainerDirective {
-    constructor(wrapper, ngZone, renderer, service, viewContainer, cdr) {
-        this.wrapper = wrapper;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.service = service;
-        this.viewContainer = viewContainer;
-        this.cdr = cdr;
-        /**
-         * Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. ([see example]({% slug drag_hint %})).
-         *
-         * @default false
-         */
-        this.hint = false;
-        /**
-         * Defines the delay in milliseconds after which the drag will begin ([see example](slug:drag_target_container#toc-events)).
-         *
-         * @default 0
-         */
-        this.dragDelay = 0;
-        /**
-         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})).
-         *
-         * @default 0
-         */
-        this.threshold = 0;
-        /**
-         * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
-         *
-         * @default 'auto'
-         */
-        this.mode = 'auto';
-        /**
-         * Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
-         */
-        this.onDragReady = new EventEmitter();
-        /**
-         * Fires when the user presses a DragTarget element.
-         */
-        this.onPress = new EventEmitter();
-        /**
-         * Fires when the dragging of a DragTarget element begins.
-        */
-        this.onDragStart = new EventEmitter();
-        /**
-         * Fires while the user drags a DragTarget element.
-         */
-        this.onDrag = new EventEmitter();
-        /**
-         * Fires when the user releases a DragTarget element after being pressed.
-         */
-        this.onRelease = new EventEmitter();
-        /**
-         * Fires when the dragging of a DragTarget ends and the element is released.
-         */
-        this.onDragEnd = new EventEmitter();
-        this.currentDragTarget = null;
-        this.dragTimeout = null;
-        this.pressed = false;
-        this.dragStarted = false;
-        this.hintComponent = null;
-        this.defaultHint = null;
-        this.currentDragTargetElement = null;
-        this.scrollableParent = null;
-        this.previousDragTargets = [];
-        this.initialPosition = { x: 0, y: 0 };
-        this.position = { x: 0, y: 0 };
-        this.positionsMap = new Map();
-        this._dragTargetFilter = null;
-        this._dragDisabled = false;
-        this._dragData = () => null;
-        this._dragTargetId = () => null;
-        validatePackage(packageMetadata);
-    }
+    wrapper;
+    ngZone;
+    renderer;
+    service;
+    viewContainer;
+    cdr;
+    /**
+     * Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. ([see example]({% slug drag_hint %})).
+     *
+     * @default false
+     */
+    hint = false;
     /**
      * Specifies a selector for elements within a container which will be configured as draggable
      * ([see example]({% slug drag_target_container %})). The possible values include any
@@ -116,6 +55,22 @@ export class DragTargetContainerDirective {
     get dragTargetFilter() {
         return this._dragTargetFilter;
     }
+    /**
+     * Specifies a selector for elements within each DragTarget which will be configured as drag handles.
+     */
+    dragHandle;
+    /**
+     * Defines the delay in milliseconds after which the drag will begin ([see example](slug:drag_target_container#toc-events)).
+     *
+     * @default 0
+     */
+    dragDelay = 0;
+    /**
+     * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})).
+     *
+     * @default 0
+     */
+    threshold = 0;
     /**
      * Defines a unique identifier for each drag target.
      * It exposes the current DragTarget HTML element and its index in the collection of drag targets as arguments.
@@ -166,6 +121,36 @@ export class DragTargetContainerDirective {
     get dragDisabled() {
         return this._dragDisabled;
     }
+    /**
+     * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
+     *
+     * @default 'auto'
+     */
+    mode = 'auto';
+    /**
+     * Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
+     */
+    onDragReady = new EventEmitter();
+    /**
+     * Fires when the user presses a DragTarget element.
+     */
+    onPress = new EventEmitter();
+    /**
+     * Fires when the dragging of a DragTarget element begins.
+    */
+    onDragStart = new EventEmitter();
+    /**
+     * Fires while the user drags a DragTarget element.
+     */
+    onDrag = new EventEmitter();
+    /**
+     * Fires when the user releases a DragTarget element after being pressed.
+     */
+    onRelease = new EventEmitter();
+    /**
+     * Fires when the dragging of a DragTarget ends and the element is released.
+     */
+    onDragEnd = new EventEmitter();
     /**
      * Used for notifying the DragTargetContainer that its content has changed.
      */
@@ -173,6 +158,26 @@ export class DragTargetContainerDirective {
         this.cdr.detectChanges();
         this.initializeDragTargets();
     }
+    pointerDownSubscription;
+    pointerMoveSubscription;
+    pointerUpSubscription;
+    scrollSubscription;
+    currentDragTarget = null;
+    dragTimeout = null;
+    pressed = false;
+    dragStarted = false;
+    hintComponent = null;
+    defaultHint = null;
+    currentDragTargetElement = null;
+    scrollableParent = null;
+    previousDragTargets = [];
+    initialPosition = { x: 0, y: 0 };
+    position = { x: 0, y: 0 };
+    positionsMap = new Map();
+    _dragTargetFilter = null;
+    _dragDisabled = false;
+    _dragData = () => null;
+    _dragTargetId = () => null;
     get allDragTargets() {
         return this.queryHost(this.dragTargetFilter);
     }
@@ -182,6 +187,15 @@ export class DragTargetContainerDirective {
     get hintTemplate() {
         return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
     }
+    constructor(wrapper, ngZone, renderer, service, viewContainer, cdr) {
+        this.wrapper = wrapper;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.service = service;
+        this.viewContainer = viewContainer;
+        this.cdr = cdr;
+        validatePackage(packageMetadata);
+    }
     ngAfterViewInit() {
         const isTargetPresent = isPresent(this.wrapper) || isPresent(this.currentDragTarget);
         if (!this.dragDisabled && isTargetPresent) {
@@ -590,10 +604,10 @@ export class DragTargetContainerDirective {
             };
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragTargetContainerDirective, isStandalone: true, selector: "[kendoDragTargetContainer]", inputs: { hint: "hint", dragTargetFilter: "dragTargetFilter", dragHandle: "dragHandle", dragDelay: "dragDelay", threshold: "threshold", dragTargetId: "dragTargetId", dragData: "dragData", dragDisabled: "dragDisabled", mode: "mode" }, outputs: { onDragReady: "onDragReady", onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onRelease: "onRelease", onDragEnd: "onDragEnd" }, exportAs: ["kendoDragTargetContainer"], ngImport: i0 });
 }
-DragTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.DragStateService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-DragTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragTargetContainerDirective, isStandalone: true, selector: "[kendoDragTargetContainer]", inputs: { hint: "hint", dragTargetFilter: "dragTargetFilter", dragHandle: "dragHandle", dragDelay: "dragDelay", threshold: "threshold", dragTargetId: "dragTargetId", dragData: "dragData", dragDisabled: "dragDisabled", mode: "mode" }, outputs: { onDragReady: "onDragReady", onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onRelease: "onRelease", onDragEnd: "onDragEnd" }, exportAs: ["kendoDragTargetContainer"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragTargetContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDragTargetContainer]',

package/{esm2020 → esm2022}/drag-and-drop/dragtarget.directive.mjs

@@ -22,79 +22,49 @@ let isDragPrevented = false;
  * Represents the Kendo UI DragTarget directive for Angular.
  */
 export class DragTargetDirective {
-    constructor(element, renderer, ngZone, service, viewContainer) {
-        this.element = element;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.service = service;
-        this.viewContainer = viewContainer;
-        /**
-         * Defines whether a hint will be used for dragging. By default, the hint is a copy of the drag target. ([see example]({% slug drag_hint %})).
-         *
-         * @default false
-         */
-        this.hint = false;
-        /**
-         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})). Applicable when `manualDrag` is set to `false`.
-         *
-         * @default 0
-         */
-        this.threshold = 0;
-        /**
-         * Defines the automatic container scrolling behavior when close to the edge ([see example]({% slug auto_scroll %})).
-         *
-         * @default true
-         */
-        this.autoScroll = true;
-        /**
-         * Defines the delay in milliseconds after which the drag will begin ([see example]({% slug drag_delay %})).
-         *
-         * @default 0
-         */
-        this.dragDelay = 0;
-        /**
-         * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
-         *
-         * @default 'auto'
-         */
-        this.mode = 'auto';
-        /**
-         * Fires when the user presses the DragTarget element.
-         */
-        this.onPress = new EventEmitter();
-        /**
-         * Fires when the dragging of the DragTarget element begins.
-         */
-        this.onDragStart = new EventEmitter();
-        /**
-         * Fires while the user drags the DragTarget element.
-         */
-        this.onDrag = new EventEmitter();
-        /**
-         * Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
-         */
-        this.onDragReady = new EventEmitter();
-        /**
-         * Fires when the user releases the DragTarget element after being pressed.
-         */
-        this.onRelease = new EventEmitter();
-        /**
-         * Fires when the dragging of the DragTarget ends and the element is released.
-         */
-        this.onDragEnd = new EventEmitter();
-        this.dragTarget = null;
-        this.domSubscriptions = [];
-        this.hintComponent = null;
-        this.dragStarted = false;
-        this.pressed = false;
-        this.dragTimeout = null;
-        this.initialPosition = { x: 0, y: 0 };
-        this.position = { x: 0, y: 0 };
-        this.scrollableParent = null;
-        this.defaultHint = null;
-        this._dragData = () => null;
-        validatePackage(packageMetadata);
-    }
+    element;
+    renderer;
+    ngZone;
+    service;
+    viewContainer;
+    /**
+     * Defines whether a hint will be used for dragging. By default, the hint is a copy of the drag target. ([see example]({% slug drag_hint %})).
+     *
+     * @default false
+     */
+    hint = false;
+    /**
+     * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})). Applicable when `manualDrag` is set to `false`.
+     *
+     * @default 0
+     */
+    threshold = 0;
+    /**
+     * Defines the automatic container scrolling behavior when close to the edge ([see example]({% slug auto_scroll %})).
+     *
+     * @default true
+     */
+    autoScroll = true;
+    /**
+     * Defines a unique identifier for the dragTarget.
+     */
+    dragTargetId;
+    /**
+     * Defines the delay in milliseconds after which the drag will begin ([see example]({% slug drag_delay %})).
+     *
+     * @default 0
+     */
+    dragDelay = 0;
+    /**
+     * Restricts the element to be dragged horizontally or vertically only ([see example]({% slug axis_lock %})). Applicable when `mode` is set to `auto`.
+     */
+    restrictByAxis;
+    /**
+     * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
+     *
+     * @default 'auto'
+     */
+    mode = 'auto';
     /**
      * Defines a callback function used for attaching custom data to the dragTarget.
      * The data will be available in the events of the respective [`DropTarget`]({% slug api_utils_droptargetdirective %}) or [`DropTargetContainer`]({% slug api_utils_droptargetcontainerdirective %}) directives.
@@ -109,6 +79,41 @@ export class DragTargetDirective {
     get dragData() {
         return this._dragData;
     }
+    /**
+     * Fires when the user presses the DragTarget element.
+     */
+    onPress = new EventEmitter();
+    /**
+     * Fires when the dragging of the DragTarget element begins.
+     */
+    onDragStart = new EventEmitter();
+    /**
+     * Fires while the user drags the DragTarget element.
+     */
+    onDrag = new EventEmitter();
+    /**
+     * Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
+     */
+    onDragReady = new EventEmitter();
+    /**
+     * Fires when the user releases the DragTarget element after being pressed.
+     */
+    onRelease = new EventEmitter();
+    /**
+     * Fires when the dragging of the DragTarget ends and the element is released.
+     */
+    onDragEnd = new EventEmitter();
+    dragTarget = null;
+    domSubscriptions = [];
+    hintComponent = null;
+    dragStarted = false;
+    pressed = false;
+    dragTimeout = null;
+    initialPosition = { x: 0, y: 0 };
+    position = { x: 0, y: 0 };
+    scrollableParent = null;
+    defaultHint = null;
+    _dragData = () => null;
     get hintTemplate() {
         return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
     }
@@ -141,6 +146,15 @@ export class DragTargetDirective {
         this.service.handleDragAndDrop(action);
         this.attachDomHandlers();
     }
+    dragHandles;
+    constructor(element, renderer, ngZone, service, viewContainer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.service = service;
+        this.viewContainer = viewContainer;
+        validatePackage(packageMetadata);
+    }
     ngOnInit() {
         this.initializeDragTarget();
     }
@@ -155,6 +169,8 @@ export class DragTargetDirective {
     }
     ngOnDestroy() {
         this.domSubscriptions.forEach(subscription => subscription());
+        const currentDragTargetIndex = this.service.dragTargets.indexOf(this.dragTarget);
+        this.service.dragTargets.splice(currentDragTargetIndex, 1);
     }
     handlePress(event) {
         if (this.dragDelay > 0) {
@@ -460,10 +476,10 @@ export class DragTargetDirective {
             };
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DragTargetDirective, isStandalone: true, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onDragReady: "onDragReady", onRelease: "onRelease", onDragEnd: "onDragEnd" }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
 }
-DragTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.DragStateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragTargetDirective, isStandalone: true, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onDragReady: "onDragReady", onRelease: "onRelease", onDragEnd: "onDragEnd" }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDragTarget]',