@progress/kendo-angular-sortable 24.2.2 → 25.0.0-develop.12

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

@@ -3,9 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, HostBinding, Input, Directive, QueryList, EventEmitter, TemplateRef, forwardRef, Output, ViewChild, ViewChildren, ContentChildren, Component, NgModule } from '@angular/core';
+import { signal, Injectable, HostBinding, Input, Directive, QueryList, EventEmitter, computed, afterNextRender, TemplateRef, forwardRef, Output, ViewChild, ViewChildren, ContentChildren, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { Subject, merge } from 'rxjs';
-import { isDocumentAvailable, focusableSelector, isChanged, Keys, normalizeKeys, EventsOutsideAngularDirective, KENDO_WEBMCP_HOST } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, focusableSelector, Keys, normalizeKeys, EventsOutsideAngularDirective, KENDO_WEBMCP_HOST } 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';
@@ -193,8 +193,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783511687,
-    version: '24.2.2',
+    publishDate: 1785318043,
+    version: '25.0.0-develop.12',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -240,12 +240,6 @@ class SortableService {
      * @hidden
      */
     onReleaseSubject = new Subject();
-    subscriptions;
-    source = null;
-    _target = null;
-    sortableCounter = 0;
-    sortableRegister = {};
-    pressArgs;
     /**
      * Specifies the `SortableComponent` instance under the currently dragged item.
      */
@@ -255,6 +249,16 @@ class SortableService {
     get target() {
         return this._target;
     }
+    subscriptions;
+    source = signal(null, ...(ngDevMode ? [{ debugName: "source" }] : []));
+    _target = null;
+    sortableCounter = 0;
+    sortableRegister = {};
+    pressArgs;
+    /**
+     * @hidden
+     */
+    source$ = this.source.asReadonly();
     /**
      * @hidden
      */
@@ -328,7 +332,7 @@ class SortableService {
      * @param sortable - The `SortableComponent`.
      */
     setSource(sortable) {
-        this.source = sortable;
+        this.source.set(sortable);
     }
     /**
      * Returns the source `SortableComponent` from which
@@ -337,7 +341,7 @@ class SortableService {
      * @return - The `SourceComponent`.
      */
     getSource() {
-        return this.source;
+        return this.source();
     }
     /**
      * The method that finds the `SortableComponent` which is registered to
@@ -378,14 +382,14 @@ class SortableService {
         }
     }
     release(event) {
-        if (this.source) {
+        if (this.source()) {
             this.ngZone.run(() => {
                 if (this.targetSortable) {
                     const dropTarget = draggableFromEvent(event, this.targetSortable.component);
-                    this.source.endDrag({ target: dropTarget, originalEvent: event });
+                    this.source().endDrag({ target: dropTarget, originalEvent: event });
                 }
-                this.source.positionHintFromEvent(null);
-                this.source.markForCheck();
+                this.source().positionHintFromEvent(null);
+                this.source().markForCheck();
             });
         }
         this.targetSortable = null;
@@ -400,27 +404,27 @@ class SortableService {
             if (this.start()) {
                 return;
             }
-            this.source.positionHintFromEvent(event);
+            this.source().positionHintFromEvent(event);
             const sortable = this.getSortableComponentFromTouch(event);
             if (!sortable || sortable && sortable.component !== this.target) {
                 if (this.target) {
                     this.target.leave({ target: undefined, originalEvent: event });
                 }
-                else if (this.source !== this.target) {
-                    this.source.leave({ target: undefined, originalEvent: event });
+                else if (this.source() !== this.target) {
+                    this.source().leave({ target: undefined, originalEvent: event });
                 }
             }
             if (sortable && sortable.component) {
                 const draggable = draggableFromEvent(event, sortable.component);
                 sortable.component.drag({ target: draggable, originalEvent: event });
             }
-            this.source.markForCheck();
+            this.source().markForCheck();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -431,10 +435,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * @hidden
  */
 class SortableContainer {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableContainer });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableContainer });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableContainer, decorators: [{
             type: Injectable
         }] });
 
@@ -445,16 +449,25 @@ class DraggableDirective {
     parent;
     el;
     renderer;
-    index;
-    disabled;
+    set index(value) {
+        this._index.set(value);
+    }
+    get index() {
+        return this._index();
+    }
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     set hidden(value) {
-        this._hidden = value;
+        this._hidden.set(value);
         this.updateDisplayStyle();
     }
     get hidden() {
-        return this._hidden;
+        return this._hidden();
     }
-    _hidden;
     get _focused() {
         return this.disabled ? false : (this.index === this.parent.activeIndex);
     }
@@ -466,6 +479,9 @@ class DraggableDirective {
         this.updateDisplayStyle();
     }
     _display;
+    _index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _hidden = signal(undefined, ...(ngDevMode ? [{ debugName: "_hidden" }] : []));
     constructor(parent, el, renderer) {
         this.parent = parent;
         this.el = el;
@@ -484,10 +500,10 @@ class DraggableDirective {
     updateDisplayStyle() {
         this.renderer.setStyle(this.el.nativeElement, 'display', this.display);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DraggableDirective, deps: [{ token: SortableContainer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: DraggableDirective, isStandalone: true, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DraggableDirective, deps: [{ token: SortableContainer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DraggableDirective, isStandalone: true, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DraggableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDraggable]',
@@ -513,10 +529,10 @@ class ItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoSortableItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoSortableItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSortableItemTemplate]',
@@ -531,10 +547,10 @@ class PlaceholderTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: PlaceholderTemplateDirective, isStandalone: true, selector: "[kendoSortablePlaceholderTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: PlaceholderTemplateDirective, isStandalone: true, selector: "[kendoSortablePlaceholderTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PlaceholderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PlaceholderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSortablePlaceholderTemplate]',
@@ -664,29 +680,39 @@ const KEY_SHORTCUTS = 'Control+ArrowLeft Control+ArrowRight Meta+ArrowLeft Meta+
 class SortableComponent {
     ngZone;
     renderer;
-    changeDetector;
-    localization;
     cdr;
+    localization;
+    injector;
     /**
      * Specifies the tab index of the Sortable component.
      */
-    tabIndex = null;
+    set tabIndex(value) {
+        this._tabIndex.set(value);
+    }
+    get tabIndex() {
+        return this._tabIndex();
+    }
     /**
      * Configures how the Sortable component tracks changes in its items collection.
      */
-    trackBy = (_, idx) => idx;
+    set trackBy(value) {
+        this._trackBy.set(value);
+    }
+    get trackBy() {
+        return this._trackBy();
+    }
     /**
      * Sets an array of any data that is used as a data source for the Sortable.
      */
     set data(data) {
-        this._data = data;
+        this._data.set(data);
         //Cache each _data item instance locally to avoid repaint due to the ngTemplateOutletContext (generated by itemData)
         //This prevents destroying the kendoDraggable instance, which otherwise leads to losing the dragEnd event
         //due to non-exisitng HTML element
         this.cacheData();
     }
     get data() {
-        return this._data;
+        return this._data();
     }
     /**
      * Sets a boolean value that determines whether the Sortable items are navigable using the keyboard. [See example](https://www.telerik.com/kendo-angular-ui/components/sortable/keyboard-navigation).
@@ -695,64 +721,137 @@ class SortableComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    navigable = true;
+    set navigable(value) {
+        this._navigable.set(value);
+    }
+    get navigable() {
+        return this._navigable();
+    }
     /**
      * Enables or disables built-in animations.
      * @default false
      */
-    animation = false;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
     /**
      * Sets an array of integers that represent the indexes of the disabled items from the data array. [See example](https://www.telerik.com/kendo-angular-ui/components/sortable/items#disabling-items).
      */
-    disabledIndexes = [];
+    set disabledIndexes(value) {
+        this._disabledIndexes.set(value);
+        if (this.data) {
+            this.cacheData();
+        }
+    }
+    get disabledIndexes() {
+        return this._disabledIndexes();
+    }
     /**
      * Sets a string that represents the name of the zone to which the Sortable belongs
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/sortable/items#transferring-items)). Items can be transferred
      * between Sortables in the same zone.
      */
-    zone = undefined;
+    set zone(value) {
+        this._zone.set(value);
+    }
+    get zone() {
+        return this._zone();
+    }
     /**
      * Defines the zones from which items can be transferred onto the current Sortable component
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/sortable/items#transferring-items)). If the `acceptZones` property
      * of the target Sortable is set, you can transfer items between Sortables in different zones.
      */
-    acceptZones = undefined;
+    set acceptZones(value) {
+        this._acceptZones.set(value);
+    }
+    get acceptZones() {
+        return this._acceptZones();
+    }
     /**
      * Represents the CSS styles applied to each Sortable item.
      */
-    itemStyle = {};
+    set itemStyle(value) {
+        this._itemStyle.set(value);
+    }
+    get itemStyle() {
+        return this._itemStyle();
+    }
     /**
      * Defines the CSS styles applied to an empty item ([see example](https://www.telerik.com/kendo-angular-ui/components/sortable/templates)).
      */
-    emptyItemStyle = undefined;
+    set emptyItemStyle(value) {
+        this._emptyItemStyle.set(value);
+    }
+    get emptyItemStyle() {
+        return this._emptyItemStyle();
+    }
     /**
      * Defines the CSS styles which are applied to the currently dragged item ([see example](https://www.telerik.com/kendo-angular-ui/components/sortable/templates)).
      */
-    activeItemStyle = undefined;
+    set activeItemStyle(value) {
+        this._activeItemStyle.set(value);
+    }
+    get activeItemStyle() {
+        return this._activeItemStyle();
+    }
     /**
      * Defines the CSS styles which are applied to all disabled items.
      */
-    disabledItemStyle = undefined;
+    set disabledItemStyle(value) {
+        this._disabledItemStyle.set(value);
+    }
+    get disabledItemStyle() {
+        return this._disabledItemStyle();
+    }
     /**
      * Defines the class which is applied to each Sortable item.
      */
-    itemClass = "";
+    set itemClass(value) {
+        this._itemClass.set(value);
+    }
+    get itemClass() {
+        return this._itemClass();
+    }
     /**
      * Defines the class which is applied to the active Sortable item.
      */
-    activeItemClass = null;
+    set activeItemClass(value) {
+        this._activeItemClass.set(value);
+    }
+    get activeItemClass() {
+        return this._activeItemClass();
+    }
     /**
      * Defines the class which is applied to the empty item when the Sortable has empty data.
      */
-    emptyItemClass = null;
+    set emptyItemClass(value) {
+        this._emptyItemClass.set(value);
+    }
+    get emptyItemClass() {
+        return this._emptyItemClass();
+    }
     /**
      * Defines the class which is applied to each disabled Sortable item.
      */
-    disabledItemClass = null;
+    set disabledItemClass(value) {
+        this._disabledItemClass.set(value);
+    }
+    get disabledItemClass() {
+        return this._disabledItemClass();
+    }
     /**
      * Sets the text message that will be displayed when the Sortable has no items.
      */
-    emptyText = "Empty";
+    set emptyText(value) {
+        this._emptyText.set(value);
+    }
+    get emptyText() {
+        return this._emptyText();
+    }
     /**
      * @hidden
      */
@@ -807,12 +906,17 @@ class SortableComponent {
      * The index of the currently focused item.
      * If no item is focused, set to `-1`.
      */
-    activeIndex = -1;
+    set activeIndex(value) {
+        this._activeIndex.set(value);
+    }
+    get activeIndex() {
+        return this._activeIndex();
+    }
     get touchAction() {
         return "none";
     }
     get dir() {
-        return this.direction;
+        return this._direction();
     }
     hostRole = 'list';
     /**
@@ -823,11 +927,21 @@ class SortableComponent {
     /**
      * The index of the currently dragged item.
      */
-    dragIndex = -1;
+    set dragIndex(value) {
+        this._dragIndex.set(value);
+    }
+    get dragIndex() {
+        return this._dragIndex();
+    }
     /**
      * The index of the item above which the dragged item is.
      */
-    dragOverIndex = -1;
+    set dragOverIndex(value) {
+        this._dragOverIndex.set(value);
+    }
+    get dragOverIndex() {
+        return this._dragOverIndex();
+    }
     onDragStartSubject = new Subject();
     onDragOverSubject = new Subject();
     onDragLeaveSubject = new Subject();
@@ -839,16 +953,41 @@ class SortableComponent {
     /**
      * The location of the hint indicator when dragging on mobile devices.
      */
-    hintLocation = null;
+    set hintLocation(value) {
+        this._hintLocation.set(value);
+    }
+    get hintLocation() {
+        return this._hintLocation();
+    }
     id;
     itemTemplateRef;
     placeholderTemplateRef;
-    _data;
     _localData = [];
     /**
      * @hidden
      */
     ariaKeyShortcuts = KEY_SHORTCUTS;
+    _tabIndex = signal(null, ...(ngDevMode ? [{ debugName: "_tabIndex" }] : []));
+    _trackBy = signal((_, idx) => idx, ...(ngDevMode ? [{ debugName: "_trackBy" }] : []));
+    _data = signal(undefined, ...(ngDevMode ? [{ debugName: "_data" }] : []));
+    _navigable = signal(true, ...(ngDevMode ? [{ debugName: "_navigable" }] : []));
+    _animation = signal(false, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _disabledIndexes = signal([], ...(ngDevMode ? [{ debugName: "_disabledIndexes" }] : []));
+    _zone = signal(undefined, ...(ngDevMode ? [{ debugName: "_zone" }] : []));
+    _acceptZones = signal(undefined, ...(ngDevMode ? [{ debugName: "_acceptZones" }] : []));
+    _itemStyle = signal({}, ...(ngDevMode ? [{ debugName: "_itemStyle" }] : []));
+    _emptyItemStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_emptyItemStyle" }] : []));
+    _activeItemStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_activeItemStyle" }] : []));
+    _disabledItemStyle = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabledItemStyle" }] : []));
+    _itemClass = signal("", ...(ngDevMode ? [{ debugName: "_itemClass" }] : []));
+    _activeItemClass = signal(null, ...(ngDevMode ? [{ debugName: "_activeItemClass" }] : []));
+    _emptyItemClass = signal(null, ...(ngDevMode ? [{ debugName: "_emptyItemClass" }] : []));
+    _disabledItemClass = signal(null, ...(ngDevMode ? [{ debugName: "_disabledItemClass" }] : []));
+    _emptyText = signal("Empty", ...(ngDevMode ? [{ debugName: "_emptyText" }] : []));
+    _activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : []));
+    _dragIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_dragIndex" }] : []));
+    _dragOverIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_dragOverIndex" }] : []));
+    _hintLocation = signal(null, ...(ngDevMode ? [{ debugName: "_hintLocation" }] : []));
     localizationChangeSubscription;
     dragStartSubscription;
     dragOverSubscription;
@@ -859,9 +998,9 @@ class SortableComponent {
     animationDuration = 300;
     afterKeyPress = false;
     sortableService = null;
-    _hideActiveItem = false;
+    _hideActiveItem = signal(false, ...(ngDevMode ? [{ debugName: "_hideActiveItem" }] : []));
     prevActiveIndex = 0;
-    direction;
+    _direction = signal('ltr', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     _animating;
     draggable;
     offsetParent;
@@ -883,15 +1022,19 @@ class SortableComponent {
         }
         return template;
     }
-    constructor(ngZone, renderer, changeDetector, localization, wrapper, sortableService, cdr) {
+    /**
+     * @hidden
+     */
+    hintVisible = computed(() => this._dragIndex() >= 0 && this._hintLocation() !== null && this === this.sortableService.source$(), ...(ngDevMode ? [{ debugName: "hintVisible" }] : []));
+    constructor(ngZone, renderer, cdr, localization, wrapper, sortableService, injector) {
         this.ngZone = ngZone;
         this.renderer = renderer;
-        this.changeDetector = changeDetector;
-        this.localization = localization;
         this.cdr = cdr;
+        this.localization = localization;
+        this.injector = injector;
         validatePackage(packageMetadata);
         this.wrapper = wrapper.nativeElement;
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
         this.sortableService = sortableService;
         this.subscribeEvents();
     }
@@ -931,11 +1074,6 @@ class SortableComponent {
             }
         });
     }
-    ngOnChanges(changes) {
-        if (this.data && isChanged('disabledIndexes', changes, false)) {
-            this.cacheData();
-        }
-    }
     ngOnDestroy() {
         this.unsubscribeEvents();
         this.sortableService.unregisterComponent(this.id);
@@ -990,7 +1128,7 @@ class SortableComponent {
      */
     cacheData() {
         this._localData = [];
-        this._data.forEach((item, index) => {
+        this.data.forEach((item, index) => {
             this._localData.push({ item: item, active: false, disabled: !this.itemEnabled(index), index: index, hidden: false });
         });
     }
@@ -1045,12 +1183,6 @@ class SortableComponent {
         this.onDragEndSubject.next(endEvent);
         return endEvent.isDefaultPrevented();
     }
-    /**
-     * @hidden
-     */
-    hintVisible() {
-        return this.dragIndex >= 0 && this.hintLocation && this === this.sortableService.getSource();
-    }
     /**
      * @hidden
      */
@@ -1144,7 +1276,7 @@ class SortableComponent {
      * @hidden
      */
     onArrowHandler(event, keyCode) {
-        const leftKey = this.direction === 'rtl' ? Keys.ArrowRight : Keys.ArrowLeft;
+        const leftKey = this._direction() === 'rtl' ? Keys.ArrowRight : Keys.ArrowLeft;
         const dir = keyCode === Keys.ArrowUp || keyCode === leftKey ? -1 : 1;
         const limit = this.data.length - 1;
         let targetIndex = this.activeIndex + dir;
@@ -1198,7 +1330,6 @@ class SortableComponent {
         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;
@@ -1250,11 +1381,11 @@ class SortableComponent {
      * If the currently dragged item is visible, returns `false`.
      */
     get hideActiveItem() {
-        return this._hideActiveItem;
+        return this._hideActiveItem();
     }
     set hideActiveItem(value) {
         this.activeIndex = -1;
-        this._hideActiveItem = value;
+        this._hideActiveItem.set(value);
     }
     /**
      * Clears the active item.
@@ -1299,12 +1430,12 @@ class SortableComponent {
         }
         this.dragIndex = index;
         this.dragOverIndex = index;
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             this.sortableService.target = this;
             this.sortableService.setSource(this);
             this.sortableService.activeDraggable = this.draggables.toArray()[index];
             this.sortableService.lastDraggable = null;
-        });
+        }, { injector: this.injector });
     }
     /**
      * Moves a data item from one index to another in the Sortable component.
@@ -1352,10 +1483,10 @@ class SortableComponent {
                 this.animate(toAnimate);
             });
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             this.sortableService.activeDraggable = this.draggables.toArray()[dragIndex];
             this.sortableService.lastDraggable = null;
-        });
+        }, { injector: this.injector });
     }
     /**
      * @hidden
@@ -1421,7 +1552,9 @@ class SortableComponent {
      * @hidden
      */
     markForCheck() {
-        this.changeDetector.markForCheck();
+        // Retained markForCheck: called by SortableService from native Draggable library callbacks
+        // to trigger CD after _localData mutations and drag state changes
+        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -1450,7 +1583,7 @@ class SortableComponent {
     subscribeEvents() {
         this.localizationChangeSubscription = this.localization
             .changes
-            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+            .subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr'));
         this.dragStartSubscription = this.onDragStartSubject
             .subscribe((event) => {
             if (!event.target) {
@@ -1527,6 +1660,7 @@ class SortableComponent {
                     target.dragIndex = -1;
                     target.dragOverIndex = -1;
                 }
+                // Retained setTimeout: deferred cleanup allows event propagation to complete before resetting service state
                 setTimeout(() => {
                     this.sortableService.activeDraggable = null;
                     this.sortableService.lastDraggable = null;
@@ -1596,8 +1730,8 @@ class SortableComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", 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: "17.0.0", version: "19.2.25", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", trackBy: "trackBy", data: "data", navigable: "navigable", 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: "20.3.25", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: SortableService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", trackBy: "trackBy", data: "data", navigable: "navigable", 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,
@@ -1611,7 +1745,7 @@ class SortableComponent {
                 provide: KENDO_WEBMCP_HOST,
                 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: `
+        ], 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"], ngImport: i0, template: `
     @for (item of _localData; track trackBy(i, item); let i = $index) {
       <div #itemWrapper
         kendoDraggable
@@ -1638,14 +1772,13 @@ class SortableComponent {
             [ngTemplateOutlet]="itemTemplate(i)"
             [ngTemplateOutletContext]="item">
           </ng-container>
-        }
-        @if (!itemTemplateRef) {
+        } @else {
           {{item.item}}
         }
       </div>
     }
 
-    @if (!_data.length || _localData.length === 1 && _localData[0].hidden) {
+    @if (!data.length || _localData.length === 1 && _localData[0].hidden) {
       <ng-container #noDataRef>
         <div
           kendoDraggable
@@ -1665,18 +1798,18 @@ class SortableComponent {
             [ngTemplateOutlet]="itemTemplateRef"
             [ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
           </ng-container>
-        }
-        @if (!itemTemplateRef) {
+        } @else {
           {{_localData[dragIndex].item}}
         }
       </div>
     }
-    `, isInline: true, dependencies: [{ 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, dependencies: [{ 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSortable',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         LocalizationService,
                         {
@@ -1720,14 +1853,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             [ngTemplateOutlet]="itemTemplate(i)"
             [ngTemplateOutletContext]="item">
           </ng-container>
-        }
-        @if (!itemTemplateRef) {
+        } @else {
           {{item.item}}
         }
       </div>
     }
 
-    @if (!_data.length || _localData.length === 1 && _localData[0].hidden) {
+    @if (!data.length || _localData.length === 1 && _localData[0].hidden) {
       <ng-container #noDataRef>
         <div
           kendoDraggable
@@ -1747,8 +1879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             [ngTemplateOutlet]="itemTemplateRef"
             [ngTemplateOutletContext]="{item: _localData[dragIndex].item}">
           </ng-container>
-        }
-        @if (!itemTemplateRef) {
+        } @else {
           {{_localData[dragIndex].item}}
         }
       </div>
@@ -1757,7 +1888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     standalone: true,
                     imports: [DraggableDirective, NgClass, NgStyle, NgTemplateOutlet, EventsOutsideAngularDirective]
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: SortableService }, { type: i0.ChangeDetectorRef }], propDecorators: { tabIndex: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: SortableService }, { type: i0.Injector }], propDecorators: { tabIndex: [{
                 type: Input
             }], trackBy: [{
                 type: Input
@@ -2162,10 +2293,10 @@ class SortableBindingDirective {
             this.removeHiddenSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableBindingDirective, deps: [{ token: SortableComponent }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: SortableBindingDirective, isStandalone: true, selector: "[kendoSortableBinding]", inputs: { data: ["kendoSortableBinding", "data"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableBindingDirective, deps: [{ token: SortableComponent }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SortableBindingDirective, isStandalone: true, selector: "[kendoSortableBinding]", inputs: { data: ["kendoSortableBinding", "data"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSortableBinding]',
@@ -2227,11 +2358,11 @@ const KENDO_SORTABLE = [
  * ```
  */
 class SortableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: SortableModule, imports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective], exports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableModule, providers: [SortableService] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SortableModule, imports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective], exports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableModule, providers: [SortableService] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SortableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SortableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_SORTABLE],