@progress/kendo-angular-sortable 25.0.0-develop.1 → 25.0.0-develop.3

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: 1783680012,
-    version: '25.0.0-develop.1',
+    publishDate: 1783692661,
+    version: '25.0.0-develop.3',
     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,21 +404,21 @@ 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: "20.3.25", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.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;
@@ -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,7 +1730,7 @@ class SortableComponent {
             }
         }
     }
-    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.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    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,
             {
@@ -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: "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: "20.3.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: "20.3.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: "20.3.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

package/index.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { OnInit, ElementRef, Renderer2, OnDestroy, NgZone, OnChanges, AfterViewInit, AfterViewChecked, AfterContentInit, TrackByFunction, QueryList, TemplateRef, EventEmitter, ChangeDetectorRef, SimpleChanges } from '@angular/core';
+import { OnInit, ElementRef, Renderer2, OnDestroy, NgZone, AfterViewInit, AfterViewChecked, AfterContentInit, TrackByFunction, QueryList, TemplateRef, EventEmitter, ChangeDetectorRef, Injector } from '@angular/core';
 import { Subject } from 'rxjs';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 
@@ -24,15 +24,19 @@ declare class DraggableDirective implements OnInit {
     parent: SortableContainer;
     el: ElementRef;
     private renderer;
-    index: number;
-    disabled: boolean;
+    set index(value: number);
+    get index(): number;
+    set disabled(value: boolean);
+    get disabled(): boolean;
     set hidden(value: boolean);
     get hidden(): boolean;
-    _hidden: any;
     get _focused(): boolean;
     get display(): string;
     set display(display: string);
     private _display;
+    private _index;
+    private _disabled;
+    private _hidden;
     constructor(parent: SortableContainer, el: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
     private updateDisplayStyle;
@@ -81,6 +85,11 @@ declare class SortableService implements OnDestroy {
      * @hidden
      */
     onReleaseSubject: Subject<any>;
+    /**
+     * Specifies the `SortableComponent` instance under the currently dragged item.
+     */
+    set target(target: SortableComponent);
+    get target(): SortableComponent;
     private subscriptions;
     private source;
     private _target;
@@ -88,10 +97,9 @@ declare class SortableService implements OnDestroy {
     private sortableRegister;
     private pressArgs;
     /**
-     * Specifies the `SortableComponent` instance under the currently dragged item.
+     * @hidden
      */
-    set target(target: SortableComponent);
-    get target(): SortableComponent;
+    readonly source$: i0.Signal<SortableComponent>;
     /**
      * @hidden
      */
@@ -279,20 +287,22 @@ declare class DataMoveEvent extends PreventableEvent implements DataEvent {
  * <kendo-sortable [data]="['Item 1', 'Item 2', 'Item 3']"></kendo-sortable>
  * ```
  */
-declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit, AfterViewChecked, AfterContentInit, SortableContainer {
+declare class SortableComponent implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked, AfterContentInit, SortableContainer {
     private ngZone;
     private renderer;
-    private changeDetector;
-    private localization;
     private cdr;
+    private localization;
+    private injector;
     /**
      * Specifies the tab index of the Sortable component.
      */
-    tabIndex: number;
+    set tabIndex(value: number);
+    get tabIndex(): number;
     /**
      * Configures how the Sortable component tracks changes in its items collection.
      */
-    trackBy: TrackByFunction<any>;
+    set trackBy(value: TrackByFunction<any>);
+    get trackBy(): TrackByFunction<any>;
     /**
      * Sets an array of any data that is used as a data source for the Sortable.
      */
@@ -305,72 +315,94 @@ declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterVi
      * @remarks
      * This property is related to accessibility.
      */
-    navigable: boolean;
+    set navigable(value: boolean);
+    get navigable(): boolean;
     /**
      * Enables or disables built-in animations.
      * @default false
      */
-    animation: boolean;
+    set animation(value: boolean);
+    get animation(): boolean;
     /**
      * 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: number[];
+    set disabledIndexes(value: number[]);
+    get disabledIndexes(): number[];
     /**
      * 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: string;
+    set zone(value: string);
+    get zone(): string;
     /**
      * 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: string[];
+    set acceptZones(value: string[]);
+    get acceptZones(): string[];
     /**
      * Represents the CSS styles applied to each Sortable item.
      */
-    itemStyle: {
+    set itemStyle(value: {
+        [key: string]: string;
+    });
+    get itemStyle(): {
         [key: string]: string;
     };
     /**
      * Defines the CSS styles applied to an empty item ([see example](https://www.telerik.com/kendo-angular-ui/components/sortable/templates)).
      */
-    emptyItemStyle: {
+    set emptyItemStyle(value: {
+        [key: string]: string;
+    });
+    get emptyItemStyle(): {
         [key: string]: string;
     };
     /**
      * 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: {
+    set activeItemStyle(value: {
+        [key: string]: string;
+    });
+    get activeItemStyle(): {
         [key: string]: string;
     };
     /**
      * Defines the CSS styles which are applied to all disabled items.
      */
-    disabledItemStyle: {
+    set disabledItemStyle(value: {
+        [key: string]: string;
+    });
+    get disabledItemStyle(): {
         [key: string]: string;
     };
     /**
      * Defines the class which is applied to each Sortable item.
      */
-    itemClass: string | string[] | Set<string>;
+    set itemClass(value: string | string[] | Set<string>);
+    get itemClass(): string | string[] | Set<string>;
     /**
      * Defines the class which is applied to the active Sortable item.
      */
-    activeItemClass: string | string[] | Set<string>;
+    set activeItemClass(value: string | string[] | Set<string>);
+    get activeItemClass(): string | string[] | Set<string>;
     /**
      * Defines the class which is applied to the empty item when the Sortable has empty data.
      */
-    emptyItemClass: string | string[] | Set<string>;
+    set emptyItemClass(value: string | string[] | Set<string>);
+    get emptyItemClass(): string | string[] | Set<string>;
     /**
      * Defines the class which is applied to each disabled Sortable item.
      */
-    disabledItemClass: string | string[] | Set<string>;
+    set disabledItemClass(value: string | string[] | Set<string>);
+    get disabledItemClass(): string | string[] | Set<string>;
     /**
      * Sets the text message that will be displayed when the Sortable has no items.
      */
-    emptyText: string;
+    set emptyText(value: string);
+    get emptyText(): string;
     /**
      * @hidden
      */
@@ -425,7 +457,8 @@ declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterVi
      * The index of the currently focused item.
      * If no item is focused, set to `-1`.
      */
-    activeIndex: number;
+    set activeIndex(value: number);
+    get activeIndex(): number;
     get touchAction(): string;
     get dir(): string;
     hostRole: string;
@@ -437,11 +470,13 @@ declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterVi
     /**
      * The index of the currently dragged item.
      */
-    dragIndex: number;
+    set dragIndex(value: number);
+    get dragIndex(): number;
     /**
      * The index of the item above which the dragged item is.
      */
-    dragOverIndex: number;
+    set dragOverIndex(value: number);
+    get dragOverIndex(): number;
     onDragStartSubject: Subject<any>;
     onDragOverSubject: Subject<any>;
     onDragLeaveSubject: Subject<any>;
@@ -453,19 +488,43 @@ declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterVi
     /**
      * The location of the hint indicator when dragging on mobile devices.
      */
-    hintLocation: {
+    set hintLocation(value: {
+        x: number;
+        y: number;
+    });
+    get hintLocation(): {
         x: number;
         y: number;
     };
     id: string;
     itemTemplateRef: TemplateRef<any>;
     placeholderTemplateRef: TemplateRef<any>;
-    _data: Array<any>;
     _localData: Array<any>;
     /**
      * @hidden
      */
     ariaKeyShortcuts: string;
+    private _tabIndex;
+    private _trackBy;
+    private _data;
+    private _navigable;
+    private _animation;
+    private _disabledIndexes;
+    private _zone;
+    private _acceptZones;
+    private _itemStyle;
+    private _emptyItemStyle;
+    private _activeItemStyle;
+    private _disabledItemStyle;
+    private _itemClass;
+    private _activeItemClass;
+    private _emptyItemClass;
+    private _disabledItemClass;
+    private _emptyText;
+    private _activeIndex;
+    private _dragIndex;
+    private _dragOverIndex;
+    private _hintLocation;
     private localizationChangeSubscription;
     private dragStartSubscription;
     private dragOverSubscription;
@@ -478,7 +537,7 @@ declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterVi
     private sortableService;
     private _hideActiveItem;
     private prevActiveIndex;
-    private direction;
+    private _direction;
     private _animating;
     private draggable;
     private offsetParent;
@@ -487,10 +546,13 @@ declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterVi
      * @hidden
      */
     itemTemplate(index: number): TemplateRef<any>;
-    constructor(ngZone: NgZone, renderer: Renderer2, changeDetector: ChangeDetectorRef, localization: LocalizationService, wrapper: ElementRef, sortableService: SortableService, cdr: ChangeDetectorRef);
+    /**
+     * @hidden
+     */
+    readonly hintVisible: i0.Signal<boolean>;
+    constructor(ngZone: NgZone, renderer: Renderer2, cdr: ChangeDetectorRef, localization: LocalizationService, wrapper: ElementRef, sortableService: SortableService, injector: Injector);
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
     ngAfterViewChecked(): void;
@@ -526,10 +588,6 @@ declare class SortableComponent implements OnInit, OnDestroy, OnChanges, AfterVi
      * @hidden
      */
     endDrag(event: any): boolean;
-    /**
-     * @hidden
-     */
-    hintVisible(): boolean;
     /**
      * @hidden
      */

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1783680012,
-  "version": "25.0.0-develop.1",
+  "publishDate": 1783692661,
+  "version": "25.0.0-develop.3",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-sortable",
-  "version": "25.0.0-develop.1",
+  "version": "25.0.0-develop.3",
   "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": 1783680012,
+      "publishDate": 1783692661,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -29,13 +29,13 @@
     "@angular/core": "20 - 22",
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "25.0.0-develop.1",
-    "@progress/kendo-angular-l10n": "25.0.0-develop.1",
+    "@progress/kendo-angular-common": "25.0.0-develop.3",
+    "@progress/kendo-angular-l10n": "25.0.0-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.1",
+    "@progress/kendo-angular-schematics": "25.0.0-develop.3",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",