@progress/kendo-angular-sortable 19.0.0-develop.1 → 19.0.0-develop.11

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745317667,
-    version: '19.0.0-develop.1',
+    publishDate: 1746798703,
+    version: '19.0.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/sortable.component.mjs

@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, Input, Output, QueryList, ContentChildren, ViewChild, ViewChildren, TemplateRef, ElementRef, EventEmitter, HostBinding, NgZone, ChangeDetectorRef, forwardRef, Renderer2 } from '@angular/core';
 import { Subject, merge } from 'rxjs';
-import { isDocumentAvailable, isChanged, Keys } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isChanged, Keys, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
 import { getAllFocusableChildren, keepFocusWithinComponent, relativeContextElement } from './util';
 import { filter, take } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -37,10 +37,15 @@ export class SortableComponent {
     renderer;
     changeDetector;
     localization;
+    cdr;
     /**
      * Specifies the tab index of the Sortable component.
      */
     tabIndex = null;
+    /**
+     * Configures how the Sortable component will track changes in its items collection.
+     */
+    trackBy = (_, idx) => idx;
     /**
      * Sets an array of any data that is used as a data source for the Sortable.
      */
@@ -299,11 +304,12 @@ export class SortableComponent {
         }
         return template;
     }
-    constructor(ngZone, renderer, changeDetector, localization, wrapper, sortableService) {
+    constructor(ngZone, renderer, changeDetector, localization, wrapper, sortableService, cdr) {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.changeDetector = changeDetector;
         this.localization = localization;
+        this.cdr = cdr;
         validatePackage(packageMetadata);
         this.wrapper = wrapper.nativeElement;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -597,9 +603,9 @@ export class SortableComponent {
     /**
      * @hidden
      */
-    onEscapeHandler() {
+    onEscapeHandler(event) {
         const focusableItems = this.focusableItems[this.prevActiveIndex];
-        const item = this.itemWrappers.toArray()[this.prevActiveIndex].nativeElement;
+        const item = (event?.target).closest('[data-sortable-item]');
         focusableItems.forEach(focusableItem => {
             this.renderer.setAttribute(focusableItem, 'tabindex', '-1');
         });
@@ -609,27 +615,37 @@ export class SortableComponent {
     /**
      * @hidden
      */
-    keydownHandler(event) {
+    keydownHandler = (event) => {
+        if (!this.navigable) {
+            return;
+        }
+        this.cdr.markForCheck();
+        const targetIsWrapper = this.itemWrappers.toArray().some((item) => item.nativeElement === event.target);
         const index = this.activeIndex === -1 ? this.prevActiveIndex : this.activeIndex;
-        const item = this.itemWrappers.toArray()[index].nativeElement;
+        const item = this.itemWrappers.toArray()[index]?.nativeElement;
         const isItemFocused = document.activeElement === item;
         const hasFocus = this.activeIndex !== -1;
         const keyCode = event.keyCode;
+        if (keyCode === Keys.Tab && !isItemFocused) {
+            keepFocusWithinComponent(event, item);
+            return;
+        }
+        if (keyCode === Keys.Escape && this.focusableItems.length > 0 && this.activeIndex === -1) {
+            this.onEscapeHandler(event);
+            return;
+        }
+        if (!targetIsWrapper) {
+            return;
+        }
         if (this.navigable && hasFocus) {
             if (keyCode >= Keys.ArrowLeft && keyCode <= Keys.ArrowDown) {
-                this.onArrowHandler(event, keyCode);
+                this.ngZone.run(() => this.onArrowHandler(event, keyCode));
             }
-            if (keyCode === Keys.Enter && isItemFocused && this.focusableItems.length > 0) {
+            else if (keyCode === Keys.Enter && isItemFocused && this.focusableItems.length > 0) {
                 this.onEnterHandler(item);
             }
         }
-        if (keyCode === Keys.Tab && !isItemFocused) {
-            keepFocusWithinComponent(event, item);
-        }
-        if (keyCode === Keys.Escape && this.focusableItems.length > 0 && this.activeIndex === -1) {
-            this.onEscapeHandler();
-        }
-    }
+    };
     /**
      * Removes the currently active item from the Data collection that the Sortable uses.
      */
@@ -857,6 +873,9 @@ export class SortableComponent {
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
         this.dragStartSubscription = this.onDragStartSubject
             .subscribe((event) => {
+            if (!event.target) {
+                return;
+            }
             this.sortableService.originDraggable = event.target;
             this.sortableService.originIndex = event.target.index;
             this.sortableService.activeDraggable = event.target;
@@ -994,8 +1013,8 @@ export class SortableComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i2.SortableService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", data: "data", navigable: "navigable", navigatable: "navigatable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i2.SortableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", trackBy: "trackBy", data: "data", navigable: "navigable", navigatable: "navigatable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -1006,7 +1025,7 @@ export class SortableComponent {
                 useExisting: forwardRef(() => SortableComponent)
             }
         ], queries: [{ propertyName: "defaultTemplateRef", predicate: TemplateRef }, { propertyName: "itemTemplateDirectiveRef", predicate: ItemTemplateDirective, read: TemplateRef }, { propertyName: "placeholderTemplateDirectiveRef", predicate: PlaceholderTemplateDirective, read: TemplateRef }], viewQueries: [{ propertyName: "noDataContainer", first: true, predicate: ["noDataRef"], descendants: true }, { propertyName: "hint", first: true, predicate: ["hint"], descendants: true }, { propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true }, { propertyName: "draggables", predicate: DraggableDirective, descendants: true }], exportAs: ["kendoSortable"], usesOnChanges: true, ngImport: i0, template: `
-    <div #itemWrapper *ngFor="let item of _localData;let i=index"
+    <div #itemWrapper *ngFor="let item of _localData; let i=index; trackBy: trackBy;"
         kendoDraggable
         role="listitem"
         [attr.aria-grabbed]="i===dragIndex"
@@ -1024,7 +1043,9 @@ export class SortableComponent {
 
         (focus)="focusHandler(i)"
         (blur)="blurHandler()"
-        (keydown)="keydownHandler($event)"
+        [kendoEventsOutsideAngular]="{
+            keydown: keydownHandler
+        }"
     >
         <ng-container *ngIf="itemTemplateRef"
             [ngTemplateOutlet]="itemTemplate(i)"
@@ -1051,7 +1072,7 @@ export class SortableComponent {
         </ng-container>
         <ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableComponent, decorators: [{
             type: Component,
@@ -1070,7 +1091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ],
                     selector: 'kendo-sortable',
                     template: `
-    <div #itemWrapper *ngFor="let item of _localData;let i=index"
+    <div #itemWrapper *ngFor="let item of _localData; let i=index; trackBy: trackBy;"
         kendoDraggable
         role="listitem"
         [attr.aria-grabbed]="i===dragIndex"
@@ -1088,7 +1109,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
         (focus)="focusHandler(i)"
         (blur)="blurHandler()"
-        (keydown)="keydownHandler($event)"
+        [kendoEventsOutsideAngular]="{
+            keydown: keydownHandler
+        }"
     >
         <ng-container *ngIf="itemTemplateRef"
             [ngTemplateOutlet]="itemTemplate(i)"
@@ -1117,9 +1140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     </div>
   `,
                     standalone: true,
-                    imports: [NgFor, DraggableDirective, NgClass, NgStyle, NgIf, NgTemplateOutlet]
+                    imports: [NgFor, DraggableDirective, NgClass, NgStyle, NgIf, NgTemplateOutlet, EventsOutsideAngularDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i2.SortableService }]; }, propDecorators: { tabIndex: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i2.SortableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tabIndex: [{
+                type: Input
+            }], trackBy: [{
                 type: Input
             }], data: [{
                 type: Input

package/esm2022/sortable.service.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, NgZone } from '@angular/core';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { draggableFromEvent, isFocusable, widgetTarget } from './util';
+import { draggableFromEvent, isFocusable, MINIMAL_DRAG_DISTANCE, widgetTarget } from './util';
 import { Subject } from 'rxjs';
 import { switchMap, filter, take, tap } from 'rxjs/operators';
 import * as i0 from "@angular/core";
@@ -202,6 +202,10 @@ export class SortableService {
         this.pressArgs = null;
     }
     drag(event) {
+        const distance = this.pressArgs && Math.sqrt((event.pageX - this.pressArgs.pageX) ** 2 + (event.pageY - this.pressArgs.pageY) ** 2);
+        if (distance && distance < MINIMAL_DRAG_DISTANCE) {
+            return;
+        }
         this.ngZone.run(() => {
             if (this.start()) {
                 return;

package/esm2022/util.mjs

@@ -6,6 +6,10 @@ import { focusableSelector, isDocumentAvailable } from '@progress/kendo-angular-
 const NODE_NAME_PREDICATES = {};
 const NODE_ATTR_PREDICATES = {};
 const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
+/**
+ * @hidden
+ */
+export const MINIMAL_DRAG_DISTANCE = 5;
 /**
  * @hidden
  */

package/fesm2022/progress-kendo-angular-sortable.mjs

@@ -5,7 +5,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Directive, Input, HostBinding, QueryList, EventEmitter, forwardRef, TemplateRef, Component, ContentChildren, ViewChildren, ViewChild, Output, NgModule } from '@angular/core';
 import { Subject, merge } from 'rxjs';
-import { isDocumentAvailable, focusableSelector, isChanged, Keys } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, focusableSelector, isChanged, Keys, EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
 import { filter, tap, take, switchMap } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -16,6 +16,10 @@ import { NgFor, NgClass, NgStyle, NgIf, NgTemplateOutlet } from '@angular/common
 const NODE_NAME_PREDICATES = {};
 const NODE_ATTR_PREDICATES = {};
 const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
+/**
+ * @hidden
+ */
+const MINIMAL_DRAG_DISTANCE = 5;
 /**
  * @hidden
  */
@@ -189,8 +193,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745317667,
-    version: '19.0.0-develop.1',
+    publishDate: 1746798703,
+    version: '19.0.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -388,6 +392,10 @@ class SortableService {
         this.pressArgs = null;
     }
     drag(event) {
+        const distance = this.pressArgs && Math.sqrt((event.pageX - this.pressArgs.pageX) ** 2 + (event.pageY - this.pressArgs.pageY) ** 2);
+        if (distance && distance < MINIMAL_DRAG_DISTANCE) {
+            return;
+        }
         this.ngZone.run(() => {
             if (this.start()) {
                 return;
@@ -660,10 +668,15 @@ class SortableComponent {
     renderer;
     changeDetector;
     localization;
+    cdr;
     /**
      * Specifies the tab index of the Sortable component.
      */
     tabIndex = null;
+    /**
+     * Configures how the Sortable component will track changes in its items collection.
+     */
+    trackBy = (_, idx) => idx;
     /**
      * Sets an array of any data that is used as a data source for the Sortable.
      */
@@ -922,11 +935,12 @@ class SortableComponent {
         }
         return template;
     }
-    constructor(ngZone, renderer, changeDetector, localization, wrapper, sortableService) {
+    constructor(ngZone, renderer, changeDetector, localization, wrapper, sortableService, cdr) {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.changeDetector = changeDetector;
         this.localization = localization;
+        this.cdr = cdr;
         validatePackage(packageMetadata);
         this.wrapper = wrapper.nativeElement;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -1220,9 +1234,9 @@ class SortableComponent {
     /**
      * @hidden
      */
-    onEscapeHandler() {
+    onEscapeHandler(event) {
         const focusableItems = this.focusableItems[this.prevActiveIndex];
-        const item = this.itemWrappers.toArray()[this.prevActiveIndex].nativeElement;
+        const item = (event?.target).closest('[data-sortable-item]');
         focusableItems.forEach(focusableItem => {
             this.renderer.setAttribute(focusableItem, 'tabindex', '-1');
         });
@@ -1232,27 +1246,37 @@ class SortableComponent {
     /**
      * @hidden
      */
-    keydownHandler(event) {
+    keydownHandler = (event) => {
+        if (!this.navigable) {
+            return;
+        }
+        this.cdr.markForCheck();
+        const targetIsWrapper = this.itemWrappers.toArray().some((item) => item.nativeElement === event.target);
         const index = this.activeIndex === -1 ? this.prevActiveIndex : this.activeIndex;
-        const item = this.itemWrappers.toArray()[index].nativeElement;
+        const item = this.itemWrappers.toArray()[index]?.nativeElement;
         const isItemFocused = document.activeElement === item;
         const hasFocus = this.activeIndex !== -1;
         const keyCode = event.keyCode;
+        if (keyCode === Keys.Tab && !isItemFocused) {
+            keepFocusWithinComponent(event, item);
+            return;
+        }
+        if (keyCode === Keys.Escape && this.focusableItems.length > 0 && this.activeIndex === -1) {
+            this.onEscapeHandler(event);
+            return;
+        }
+        if (!targetIsWrapper) {
+            return;
+        }
         if (this.navigable && hasFocus) {
             if (keyCode >= Keys.ArrowLeft && keyCode <= Keys.ArrowDown) {
-                this.onArrowHandler(event, keyCode);
+                this.ngZone.run(() => this.onArrowHandler(event, keyCode));
             }
-            if (keyCode === Keys.Enter && isItemFocused && this.focusableItems.length > 0) {
+            else if (keyCode === Keys.Enter && isItemFocused && this.focusableItems.length > 0) {
                 this.onEnterHandler(item);
             }
         }
-        if (keyCode === Keys.Tab && !isItemFocused) {
-            keepFocusWithinComponent(event, item);
-        }
-        if (keyCode === Keys.Escape && this.focusableItems.length > 0 && this.activeIndex === -1) {
-            this.onEscapeHandler();
-        }
-    }
+    };
     /**
      * Removes the currently active item from the Data collection that the Sortable uses.
      */
@@ -1480,6 +1504,9 @@ class SortableComponent {
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
         this.dragStartSubscription = this.onDragStartSubject
             .subscribe((event) => {
+            if (!event.target) {
+                return;
+            }
             this.sortableService.originDraggable = event.target;
             this.sortableService.originIndex = event.target.index;
             this.sortableService.activeDraggable = event.target;
@@ -1617,8 +1644,8 @@ class SortableComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", data: "data", navigable: "navigable", navigatable: "navigatable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: SortableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", trackBy: "trackBy", data: "data", navigable: "navigable", navigatable: "navigatable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -1629,7 +1656,7 @@ class SortableComponent {
                 useExisting: forwardRef(() => SortableComponent)
             }
         ], queries: [{ propertyName: "defaultTemplateRef", predicate: TemplateRef }, { propertyName: "itemTemplateDirectiveRef", predicate: ItemTemplateDirective, read: TemplateRef }, { propertyName: "placeholderTemplateDirectiveRef", predicate: PlaceholderTemplateDirective, read: TemplateRef }], viewQueries: [{ propertyName: "noDataContainer", first: true, predicate: ["noDataRef"], descendants: true }, { propertyName: "hint", first: true, predicate: ["hint"], descendants: true }, { propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true }, { propertyName: "draggables", predicate: DraggableDirective, descendants: true }], exportAs: ["kendoSortable"], usesOnChanges: true, ngImport: i0, template: `
-    <div #itemWrapper *ngFor="let item of _localData;let i=index"
+    <div #itemWrapper *ngFor="let item of _localData; let i=index; trackBy: trackBy;"
         kendoDraggable
         role="listitem"
         [attr.aria-grabbed]="i===dragIndex"
@@ -1647,7 +1674,9 @@ class SortableComponent {
 
         (focus)="focusHandler(i)"
         (blur)="blurHandler()"
-        (keydown)="keydownHandler($event)"
+        [kendoEventsOutsideAngular]="{
+            keydown: keydownHandler
+        }"
     >
         <ng-container *ngIf="itemTemplateRef"
             [ngTemplateOutlet]="itemTemplate(i)"
@@ -1674,7 +1703,7 @@ class SortableComponent {
         </ng-container>
         <ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableComponent, decorators: [{
             type: Component,
@@ -1693,7 +1722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ],
                     selector: 'kendo-sortable',
                     template: `
-    <div #itemWrapper *ngFor="let item of _localData;let i=index"
+    <div #itemWrapper *ngFor="let item of _localData; let i=index; trackBy: trackBy;"
         kendoDraggable
         role="listitem"
         [attr.aria-grabbed]="i===dragIndex"
@@ -1711,7 +1740,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
         (focus)="focusHandler(i)"
         (blur)="blurHandler()"
-        (keydown)="keydownHandler($event)"
+        [kendoEventsOutsideAngular]="{
+            keydown: keydownHandler
+        }"
     >
         <ng-container *ngIf="itemTemplateRef"
             [ngTemplateOutlet]="itemTemplate(i)"
@@ -1740,9 +1771,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     </div>
   `,
                     standalone: true,
-                    imports: [NgFor, DraggableDirective, NgClass, NgStyle, NgIf, NgTemplateOutlet]
+                    imports: [NgFor, DraggableDirective, NgClass, NgStyle, NgIf, NgTemplateOutlet, EventsOutsideAngularDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: SortableService }]; }, propDecorators: { tabIndex: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: SortableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tabIndex: [{
+                type: Input
+            }], trackBy: [{
                 type: Input
             }], data: [{
                 type: Input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-sortable",
-  "version": "19.0.0-develop.1",
+  "version": "19.0.0-develop.11",
   "description": "A Sortable Component for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1745317667,
+      "publishDate": 1746798703,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -29,13 +29,13 @@
     "@angular/core": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-common": "19.0.0-develop.1",
-    "@progress/kendo-angular-l10n": "19.0.0-develop.1",
+    "@progress/kendo-angular-common": "19.0.0-develop.11",
+    "@progress/kendo-angular-l10n": "19.0.0-develop.11",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.0.0-develop.1",
+    "@progress/kendo-angular-schematics": "19.0.0-develop.11",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/sortable.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { QueryList, TemplateRef, ElementRef, EventEmitter, OnInit, OnDestroy, AfterViewChecked, AfterContentInit, NgZone, ChangeDetectorRef, SimpleChanges, OnChanges, Renderer2, AfterViewInit } from '@angular/core';
+import { QueryList, TemplateRef, ElementRef, EventEmitter, OnInit, OnDestroy, AfterViewChecked, AfterContentInit, NgZone, ChangeDetectorRef, SimpleChanges, OnChanges, Renderer2, AfterViewInit, TrackByFunction } from '@angular/core';
 import { Subject } from 'rxjs';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { SortableService } from './sortable.service';
@@ -20,10 +20,15 @@ export declare class SortableComponent implements OnInit, OnDestroy, OnChanges,
     private renderer;
     private changeDetector;
     private localization;
+    private cdr;
     /**
      * Specifies the tab index of the Sortable component.
      */
     tabIndex: number;
+    /**
+     * Configures how the Sortable component will track changes in its items collection.
+     */
+    trackBy: TrackByFunction<any>;
     /**
      * Sets an array of any data that is used as a data source for the Sortable.
      */
@@ -266,7 +271,7 @@ export declare class SortableComponent implements OnInit, OnDestroy, OnChanges,
      * @hidden
      */
     itemTemplate(index: number): TemplateRef<any>;
-    constructor(ngZone: NgZone, renderer: Renderer2, changeDetector: ChangeDetectorRef, localization: LocalizationService, wrapper: ElementRef, sortableService: SortableService);
+    constructor(ngZone: NgZone, renderer: Renderer2, changeDetector: ChangeDetectorRef, localization: LocalizationService, wrapper: ElementRef, sortableService: SortableService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -356,11 +361,11 @@ export declare class SortableComponent implements OnInit, OnDestroy, OnChanges,
     /**
      * @hidden
      */
-    onEscapeHandler(): void;
+    onEscapeHandler(event: KeyboardEvent): void;
     /**
      * @hidden
      */
-    keydownHandler(event: any): void;
+    keydownHandler: (event: KeyboardEvent) => void;
     /**
      * Removes the currently active item from the Data collection that the Sortable uses.
      */
@@ -433,5 +438,5 @@ export declare class SortableComponent implements OnInit, OnDestroy, OnChanges,
     private placeHolderItemData;
     private fixFocus;
     static ɵfac: i0.ɵɵFactoryDeclaration<SortableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SortableComponent, "kendo-sortable", ["kendoSortable"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "data": { "alias": "data"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "navigatable": { "alias": "navigatable"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "disabledIndexes": { "alias": "disabledIndexes"; "required": false; }; "zone": { "alias": "zone"; "required": false; }; "acceptZones": { "alias": "acceptZones"; "required": false; }; "itemStyle": { "alias": "itemStyle"; "required": false; }; "emptyItemStyle": { "alias": "emptyItemStyle"; "required": false; }; "activeItemStyle": { "alias": "activeItemStyle"; "required": false; }; "disabledItemStyle": { "alias": "disabledItemStyle"; "required": false; }; "itemClass": { "alias": "itemClass"; "required": false; }; "activeItemClass": { "alias": "activeItemClass"; "required": false; }; "emptyItemClass": { "alias": "emptyItemClass"; "required": false; }; "disabledItemClass": { "alias": "disabledItemClass"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; }, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "dragOver": "dragOver"; "dragLeave": "dragLeave"; "dataMove": "dataMove"; "dataAdd": "dataAdd"; "dataRemove": "dataRemove"; "navigate": "navigate"; }, ["defaultTemplateRef", "itemTemplateDirectiveRef", "placeholderTemplateDirectiveRef"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SortableComponent, "kendo-sortable", ["kendoSortable"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "data": { "alias": "data"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "navigatable": { "alias": "navigatable"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "disabledIndexes": { "alias": "disabledIndexes"; "required": false; }; "zone": { "alias": "zone"; "required": false; }; "acceptZones": { "alias": "acceptZones"; "required": false; }; "itemStyle": { "alias": "itemStyle"; "required": false; }; "emptyItemStyle": { "alias": "emptyItemStyle"; "required": false; }; "activeItemStyle": { "alias": "activeItemStyle"; "required": false; }; "disabledItemStyle": { "alias": "disabledItemStyle"; "required": false; }; "itemClass": { "alias": "itemClass"; "required": false; }; "activeItemClass": { "alias": "activeItemClass"; "required": false; }; "emptyItemClass": { "alias": "emptyItemClass"; "required": false; }; "disabledItemClass": { "alias": "disabledItemClass"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; }, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "dragOver": "dragOver"; "dragLeave": "dragLeave"; "dataMove": "dataMove"; "dataAdd": "dataAdd"; "dataRemove": "dataRemove"; "navigate": "navigate"; }, ["defaultTemplateRef", "itemTemplateDirectiveRef", "placeholderTemplateDirectiveRef"], never, true, never>;
 }

package/util.d.ts

@@ -2,6 +2,10 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare const MINIMAL_DRAG_DISTANCE = 5;
 /**
  * @hidden
  */