@progress/kendo-angular-sortable 19.1.2-develop.4 → 19.1.2-develop.5

package/binding.directive.d.ts

@@ -7,8 +7,23 @@ import { SortableComponent } from './sortable.component';
 import { SortableService } from './sortable.service';
 import * as i0 from "@angular/core";
 /**
- * A Directive which handles the most common scenarios such reordering and moving items between Sortables, thus minimizng boilerplate code.
- * This is achieved by subscribing to the Sortable's events and handling them using the API methods it provides.
+ * Represents a directive that handles common scenarios such as reordering and moving items between Sortables, reducing boilerplate code.
+ *
+ * This directive subscribes to the Sortable's events and handles them using the provided API methods.
+ *
+ * @example
+ * ```html
+ * <kendo-sortable
+ *      [kendoSortableBinding]="items"
+ *      [navigable]="true"
+ *      [animation]="true"
+ *      itemClass="item col-xs-6 col-sm-3"
+ *      activeItemClass="item col-xs-6 col-sm-3 active">
+ * </kendo-sortable>
+ * ```
+ *
+ * @remarks
+ * Applied to: {@link SortableComponent}
  */
 export declare class SortableBindingDirective implements OnInit, OnDestroy {
     sortable: SortableComponent;
@@ -18,10 +33,7 @@ export declare class SortableBindingDirective implements OnInit, OnDestroy {
     private navigateSubscription;
     private lastTarget;
     /**
-     * Sets a data-bound array that is used as a data source for the Sortable.
-     *
-     * <demo metaUrl="sortable/overview/" height="430"></demo>
-     *
+     * Sets a data-bound array that is used as a data source for the Sortable ([see example](slug:overview_sortable)).
      */
     set data(data: any[]);
     constructor(sortable: SortableComponent, sortableService: SortableService);

package/data-event-args.interface.d.ts

@@ -3,16 +3,16 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * The arguments for the `dataAdd`, or `dataRemove` events.
+ * Represents the arguments for the `dataAdd` and `dataRemove` events.
  * @hidden
  */
 export interface DataEvent {
     /**
-     * The index of the data item.
+     * Specifies the index of the data item.
      */
     index: number;
     /**
-     * The data item that will be added or removed.
+     * Specifies the data item to add or remove.
      */
     dataItem: Object;
 }

package/data-events.d.ts

@@ -5,15 +5,15 @@
 import { PreventableEvent } from './preventable-event';
 import { DataEvent } from './data-event-args.interface';
 /**
- * The arguments for the `SortableComponent` `dataAdd` event.
+ * Represents the arguments for the `SortableComponent` `dataAdd` event.
  */
 export declare class DataAddEvent extends PreventableEvent implements DataEvent {
     /**
-     * The index of the data item.
+     * Specifies the index of the data item.
      */
     index: number;
     /**
-     * The data item that will be added.
+     * Specifies the data item to add.
      */
     dataItem: number;
     /**
@@ -22,15 +22,15 @@ export declare class DataAddEvent extends PreventableEvent implements DataEvent
     constructor(options: any);
 }
 /**
- * The arguments for the `SortableComponent` `dataRemove` event.
+ * Represents the arguments for the `SortableComponent` `dataRemove` event.
  */
 export declare class DataRemoveEvent extends PreventableEvent implements DataEvent {
     /**
-     * The index of the data item.
+     * Specifies the index of the data item.
      */
     index: number;
     /**
-     * The data item that will be removed.
+     * Specifies the data item to remove.
      */
     dataItem: number;
     /**
@@ -39,19 +39,19 @@ export declare class DataRemoveEvent extends PreventableEvent implements DataEve
     constructor(options: any);
 }
 /**
- * The arguments for the `SortableComponent` `dataMove` event.
+ * Represents the arguments for the `SortableComponent` `dataMove` event.
  */
 export declare class DataMoveEvent extends PreventableEvent implements DataEvent {
     /**
-     * The index of the data item.
+     * Specifies the index of the data item.
      */
     index: number;
     /**
-     * The old index of the data item.
+     * Specifies the old index of the data item.
      */
     oldIndex: number;
     /**
-     * The data item that will be removed.
+     * Specifies the data item to move.
      */
     dataItem: number;
     /**

package/directives.d.ts

@@ -7,6 +7,26 @@ import { DraggableDirective } from "./draggable.directive";
 import { ItemTemplateDirective, PlaceholderTemplateDirective } from "./item-template.directive";
 import { SortableComponent } from "./sortable.component";
 /**
- * Utility array that contains all `@progress/kendo-angular-sortable` related components and directives
+ * Use this utility array to access all `@progress/kendo-angular-sortable`-related components and directives in a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
+ *
+ * @Component({
+ *   selector: 'my-app',
+ *   standalone: true,
+ *   imports: [KENDO_SORTABLE],
+ *   template: `
+ *      <kendo-sortable [kendoSortableBinding]="items">
+ *      </kendo-sortable>
+ *   `
+ * })
+ *
+ * export class AppComponent {
+ *    public items = ['Item 1', 'Item 2', 'Item 3'];
+ * }
+ * ```
  */
 export declare const KENDO_SORTABLE: readonly [typeof SortableComponent, typeof DraggableDirective, typeof PlaceholderTemplateDirective, typeof ItemTemplateDirective, typeof SortableBindingDirective];

package/draggable-event.d.ts

@@ -5,16 +5,16 @@
 import { PreventableEvent } from './preventable-event';
 import { DraggableDirective } from './draggable.directive';
 /**
- * The arguments for the `DraggableDirective` events.
+ * Represents the arguments for the `DraggableDirective` events.
  * @hidden
  */
 export declare class DraggableEvent extends PreventableEvent {
     /**
-     * The target DraggableDirective instance.
+     * Specifies the target `DraggableDirective` instance.
      */
     target: DraggableDirective;
     /**
-     * The browser event emitted by the target's native element.
+     * Specifies the browser event emitted by the target's native element.
      */
     originalEvent: any;
     /**

package/esm2022/binding.directive.mjs

@@ -11,8 +11,23 @@ import * as i0 from "@angular/core";
 import * as i1 from "./sortable.component";
 import * as i2 from "./sortable.service";
 /**
- * A Directive which handles the most common scenarios such reordering and moving items between Sortables, thus minimizng boilerplate code.
- * This is achieved by subscribing to the Sortable's events and handling them using the API methods it provides.
+ * Represents a directive that handles common scenarios such as reordering and moving items between Sortables, reducing boilerplate code.
+ *
+ * This directive subscribes to the Sortable's events and handles them using the provided API methods.
+ *
+ * @example
+ * ```html
+ * <kendo-sortable
+ *      [kendoSortableBinding]="items"
+ *      [navigable]="true"
+ *      [animation]="true"
+ *      itemClass="item col-xs-6 col-sm-3"
+ *      activeItemClass="item col-xs-6 col-sm-3 active">
+ * </kendo-sortable>
+ * ```
+ *
+ * @remarks
+ * Applied to: {@link SortableComponent}
  */
 export class SortableBindingDirective {
     sortable;
@@ -22,10 +37,7 @@ export class SortableBindingDirective {
     navigateSubscription;
     lastTarget;
     /**
-     * Sets a data-bound array that is used as a data source for the Sortable.
-     *
-     * <demo metaUrl="sortable/overview/" height="430"></demo>
-     *
+     * Sets a data-bound array that is used as a data source for the Sortable ([see example](slug:overview_sortable)).
      */
     set data(data) {
         this.sortable.data = data;

package/esm2022/data-events.mjs

@@ -4,15 +4,15 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from './preventable-event';
 /**
- * The arguments for the `SortableComponent` `dataAdd` event.
+ * Represents the arguments for the `SortableComponent` `dataAdd` event.
  */
 export class DataAddEvent extends PreventableEvent {
     /**
-     * The index of the data item.
+     * Specifies the index of the data item.
      */
     index;
     /**
-     * The data item that will be added.
+     * Specifies the data item to add.
      */
     dataItem;
     /**
@@ -24,15 +24,15 @@ export class DataAddEvent extends PreventableEvent {
     }
 }
 /**
- * The arguments for the `SortableComponent` `dataRemove` event.
+ * Represents the arguments for the `SortableComponent` `dataRemove` event.
  */
 export class DataRemoveEvent extends PreventableEvent {
     /**
-     * The index of the data item.
+     * Specifies the index of the data item.
      */
     index;
     /**
-     * The data item that will be removed.
+     * Specifies the data item to remove.
      */
     dataItem;
     /**
@@ -44,19 +44,19 @@ export class DataRemoveEvent extends PreventableEvent {
     }
 }
 /**
- * The arguments for the `SortableComponent` `dataMove` event.
+ * Represents the arguments for the `SortableComponent` `dataMove` event.
  */
 export class DataMoveEvent extends PreventableEvent {
     /**
-     * The index of the data item.
+     * Specifies the index of the data item.
      */
     index;
     /**
-     * The old index of the data item.
+     * Specifies the old index of the data item.
      */
     oldIndex;
     /**
-     * The data item that will be removed.
+     * Specifies the data item to move.
      */
     dataItem;
     /**

package/esm2022/directives.mjs

@@ -7,7 +7,27 @@ import { DraggableDirective } from "./draggable.directive";
 import { ItemTemplateDirective, PlaceholderTemplateDirective } from "./item-template.directive";
 import { SortableComponent } from "./sortable.component";
 /**
- * Utility array that contains all `@progress/kendo-angular-sortable` related components and directives
+ * Use this utility array to access all `@progress/kendo-angular-sortable`-related components and directives in a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
+ *
+ * @Component({
+ *   selector: 'my-app',
+ *   standalone: true,
+ *   imports: [KENDO_SORTABLE],
+ *   template: `
+ *      <kendo-sortable [kendoSortableBinding]="items">
+ *      </kendo-sortable>
+ *   `
+ * })
+ *
+ * export class AppComponent {
+ *    public items = ['Item 1', 'Item 2', 'Item 3'];
+ * }
+ * ```
  */
 export const KENDO_SORTABLE = [
     SortableComponent,

package/esm2022/draggable-event.mjs

@@ -4,16 +4,16 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from './preventable-event';
 /**
- * The arguments for the `DraggableDirective` events.
+ * Represents the arguments for the `DraggableDirective` events.
  * @hidden
  */
 export class DraggableEvent extends PreventableEvent {
     /**
-     * The target DraggableDirective instance.
+     * Specifies the target `DraggableDirective` instance.
      */
     target;
     /**
-     * The browser event emitted by the target's native element.
+     * Specifies the browser event emitted by the target's native element.
      */
     originalEvent; //DragEvent | TouchEvent;
     /**

package/esm2022/navigate-event.mjs

@@ -4,19 +4,19 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from './preventable-event';
 /**
- * The `navigate` event is emitted when using the keyboard arrows.
+ * Represents the event arguments for the `navigate` event, which is emitted when you use the keyboard arrows.
  */
 export class NavigateEvent extends PreventableEvent {
     /**
-     * The index of the draggable item.
+     * Specifies the index of the draggable item.
      */
     index;
     /**
-     * The old index of the draggable item.
+     * Specifies the old index of the draggable item.
      */
     oldIndex;
     /**
-     * Indicates whether the ctrl or meta keys are pressed.
+     * Indicates whether the `Ctrl` or meta keys are pressed.
      */
     ctrlKey;
     /**

package/esm2022/package-metadata.mjs

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

package/esm2022/sortable-events.mjs

@@ -4,15 +4,17 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from './preventable-event';
 /**
- * Arguments for the `dragStart` event.
+ * Represents the arguments for the `dragStart` event.
  */
 export class DragStartEvent extends PreventableEvent {
     /**
-     * The index of the draggable item.
+     * Specifies the index of the draggable item.
      */
     index;
     /**
-     * The old index of the draggable item.
+     * Specifies the previous index of the draggable item.
+     * This property is used for the `dragEnd and `dragOver` events to determine the original position of the item before dragging.
+     * It doesn't apply to the `dragStart` event as there is no previous position at that point.
      */
     oldIndex;
     /**
@@ -24,12 +26,12 @@ export class DragStartEvent extends PreventableEvent {
     }
 }
 /**
- * Arguments for the `dragOver` event.
+ * Represents the arguments for the `dragOver` event.
  */
 export class DragOverEvent extends DragStartEvent {
 }
 /**
- * Arguments for the `dragEnd` event.
+ * Represents the arguments for the `dragEnd` event.
  */
 export class DragEndEvent extends DragOverEvent {
 }

package/esm2022/sortable.component.mjs

@@ -27,7 +27,10 @@ const KEY_SHORTCUTS = 'Control+ArrowLeft Control+ArrowRight Meta+ArrowLeft Meta+
 /**
  * Represents the [Kendo UI Sortable component for Angular]({% slug overview_sortable %}).
  *
- * <demo metaUrl="sortable/sortable-api/" height="430"></demo>
+ * @example
+ * ```html
+ * <kendo-sortable [data]="['Item 1', 'Item 2', 'Item 3']"></kendo-sortable>
+ * ```
  */
 /**
  * Represents the Kendo UI Sortable component for Angular.
@@ -43,7 +46,7 @@ export class SortableComponent {
      */
     tabIndex = null;
     /**
-     * Configures how the Sortable component will track changes in its items collection.
+     * Configures how the Sortable component tracks changes in its items collection.
      */
     trackBy = (_, idx) => idx;
     /**
@@ -60,61 +63,33 @@ export class SortableComponent {
         return this._data;
     }
     /**
-     * Enables or disables the [keyboard navigation]({% slug keyboard_navigation_sortable %}).
+     * Sets a boolean value that determines whether the Sortable items are navigable using the keyboard. [See example]({% slug keyboard_navigation_sortable %}).
      * @default true
      */
     navigable = true;
     /**
-     * Enables or disables the built-in animations.
+     * Enables or disables built-in animations.
      * @default false
      */
     animation = false;
     /**
-     * Sets an array of integers, which represent the indexes of the disabled items from the data array
-     * ([see example](slug:items_sortable#toc-disabling-items)).
+     * Sets an array of integers that represent the indexes of the disabled items from the data array. [See example](slug:items_sortable#toc-disabling-items).
      */
     disabledIndexes = [];
     /**
      * Sets a string that represents the name of the zone to which the Sortable belongs
      * ([see example](slug:items_sortable#toc-transferring-of-items)). Items can be transferred
-     * between Sortables which belong to the same zone.
+     * between Sortables in the same zone.
      */
     zone = undefined;
     /**
      * Defines the zones from which items can be transferred onto the current Sortable component
      * ([see example](slug:items_sortable#toc-transferring-of-items)). If the `acceptZones` property
-     * of the target Sortable is set, allows you to transfer items between Sortables which belong
-     * to different zones.
+     * of the target Sortable is set, you can transfer items between Sortables in different zones.
      */
     acceptZones = undefined;
     /**
-     * Represents the CSS styles which are applied to each Sortable item.
-     *
-     * @example
-     * ```ts
-     * import { Component } from '@angular/core';
-     * import { SortableModule } from '@progress/kendo-angular-sortable';
-     *
-     * _@Component({
-     *  selector: 'my-app',
-     *  template: `
-     *   <kendo-sortable
-     *      [data]="['1','2','3','4','5','6','7']"
-     *      [itemStyle] ="{
-     *          'display': 'inline-block',
-     *          'background-color': '#51A0ED',
-     *          'height':'50px',
-     *          'width':'50px',
-     *          'margin':'3px',
-     *          'cursor':'move'
-     *          }"
-     *      >
-     *   </kendo-sortable>
-     *    `
-     * })
-     * export class AppComponent {
-     * }
-     * ```
+     * Represents the CSS styles applied to each Sortable item.
      */
     itemStyle = {};
     /**
@@ -147,23 +122,6 @@ export class SortableComponent {
     disabledItemClass = null;
     /**
      * Sets the text message that will be displayed when the Sortable has no items.
-     *
-     * @example
-     * ```ts
-     * import { Component } from '@angular/core';
-     * import { SortableModule } from '@progress/kendo-angular-sortable';
-     *
-     * _@Component({
-     *  selector: 'my-app',
-     *  template: `
-     *    <kendo-sortable [data]="[]"
-     *      [emptyText]="'No items - custom message and styles'"
-     *      [emptyItemStyle] = "{'height': '40px', 'width':'400px', 'border': '2px dashed black'}" >
-     *    </kendo-sortable>
-     *    `
-     * })
-     * export class AppComponent { }
-     * ```
      */
     emptyText = "Empty";
     /**
@@ -649,14 +607,14 @@ export class SortableComponent {
         this.updateCacheIndices();
     }
     /**
-     * Sets a Boolean value that indicates whether the item will be hidden or not.
+     * Sets a boolean value that indicates whether the item will be hidden or not.
      * @hidden
      */
     hideItem(index, hidden = true) {
         this._localData[index].hidden = hidden;
     }
     /**
-     * Gets or sets a Boolean value that indicates whether the currently dragged item will be hidden.
+     * Gets or sets a boolean value that indicates whether the currently dragged item will be hidden.
      *
      * If the currently dragged item is hidden, returns `true`.
      * If the currently dragged item is visible, returns `false`.
@@ -670,7 +628,7 @@ export class SortableComponent {
     }
     /**
      * Clears the active item.
-     * An active item is the item which becomes focused when the user navigates with the keyboard.
+     * An active item is the one that is currently focused when the user navigates with the keyboard.
      */
     clearActiveItem() {
         if (this.navigable) {
@@ -691,7 +649,7 @@ export class SortableComponent {
         }
     }
     /**
-     * Adds a new data item to a particular index.
+     * Inserts a new data item at a particular index in the Sortable component.
      * @param dataItem - The data item.
      * @param index - The index at which the data item is inserted.
      */
@@ -719,7 +677,7 @@ export class SortableComponent {
         });
     }
     /**
-     * Moves data item to a particular index.
+     * Moves a data item from one index to another in the Sortable component.
      * @param fromIndex - The data item's index.
      * @param toIndex - The index which the data item should be moved to. Item currently sitting at that index is pushed back one position.
      */

package/esm2022/sortable.module.mjs

@@ -12,33 +12,21 @@ import * as i3 from "./item-template.directive";
 import * as i4 from "./binding.directive";
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- *
- * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Sortable component.
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) definition for the Sortable component.
  *
  * @example
- *
- * ```ts-no-run
+ * ```typescript
  * import { NgModule } from '@angular/core';
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
- * // Import the Sortable module
  * import { SortableModule } from '@progress/kendo-angular-sortable';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
+ * @NgModule({
  *     declarations: [AppComponent],
  *     imports:      [BrowserModule, SortableModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 export class SortableModule {

package/esm2022/sortable.service.mjs

@@ -13,9 +13,8 @@ const allowDrag = (e) => {
     return target.hasAttribute('data-sortable-item') || !(isFocusable(target) || widgetTarget(target));
 };
 /**
- * The service that provides the drag-and-drop functionality for
- * transferring items between Sortable components within the same page.
- *
+ * The `SortableService` is a service that manages the drag-and-drop functionality
+ * for transferring items between Sortable components.
  */
 export class SortableService {
     ngZone;
@@ -109,7 +108,7 @@ export class SortableService {
         }
     }
     /**
-     * Registers a `SortableComponent` with which the service operates.
+     * Registers a `SortableComponent` with the `SortableService` so that it can be managed by the service.
      *
      * @param sortableComponent - The `SortableComponent`.
      * @return - The unique key that the current `SortableComponent` gets when registered.
@@ -155,9 +154,7 @@ export class SortableService {
      * Represents a single contact point (finger or stylus)
      * on a touch-sensitive device (touchscreen or trackpad).
      *
-     * @return { component: SortableComponent, index: number } - An object
-     * where the component is the `SortableComponent` that owns the item
-     * and the index is the index of the touched item.
+     * @return { component: SortableComponent, index: number } - An object where the component is the `SortableComponent` that owns the item and the index is the index of the touched item.
      */
     getSortableComponentFromTouch(touch) {
         if (!isDocumentAvailable()) {

package/esm2022/util.mjs

@@ -38,7 +38,7 @@ export const closest = (node, predicate) => {
     return node;
 };
 /**
- * Returns an object specifiying whether there is a DraggableDirective under the cursor.
+ * Returns an object specifying whether there is a `DraggableDirective` under the cursor.
  * @hidden
  */
 export const draggableFromPoint = (x, y) => {