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

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

@@ -48,7 +48,7 @@ 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
  */
 const draggableFromPoint = (x, y) => {
@@ -193,8 +193,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1750152809,
-    version: '19.1.2-develop.3',
+    publishDate: 1750431143,
+    version: '19.1.2-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -203,9 +203,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.
  */
 class SortableService {
     ngZone;
@@ -299,7 +298,7 @@ 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.
@@ -345,9 +344,7 @@ 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()) {
@@ -576,19 +573,19 @@ class PreventableEvent {
 }
 
 /**
- * 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.
  */
 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;
     /**
@@ -601,16 +598,16 @@ class NavigateEvent extends PreventableEvent {
 }
 
 /**
- * The arguments for the `DraggableDirective` events.
+ * Represents the arguments for the `DraggableDirective` events.
  * @hidden
  */
 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;
     /**
@@ -623,15 +620,17 @@ class DraggableEvent extends PreventableEvent {
 }
 
 /**
- * Arguments for the `dragStart` event.
+ * Represents the arguments for the `dragStart` event.
  */
 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;
     /**
@@ -643,12 +642,12 @@ class DragStartEvent extends PreventableEvent {
     }
 }
 /**
- * Arguments for the `dragOver` event.
+ * Represents the arguments for the `dragOver` event.
  */
 class DragOverEvent extends DragStartEvent {
 }
 /**
- * Arguments for the `dragEnd` event.
+ * Represents the arguments for the `dragEnd` event.
  */
 class DragEndEvent extends DragOverEvent {
 }
@@ -658,7 +657,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.
@@ -674,7 +676,7 @@ 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;
     /**
@@ -691,61 +693,33 @@ 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 = {};
     /**
@@ -778,23 +752,6 @@ 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";
     /**
@@ -1280,14 +1237,14 @@ 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`.
@@ -1301,7 +1258,7 @@ 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) {
@@ -1322,7 +1279,7 @@ 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.
      */
@@ -1350,7 +1307,7 @@ 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.
      */
@@ -1850,15 +1807,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The arguments for the `SortableComponent` `dataAdd` event.
+ * Represents the arguments for the `SortableComponent` `dataAdd` event.
  */
 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;
     /**
@@ -1870,15 +1827,15 @@ class DataAddEvent extends PreventableEvent {
     }
 }
 /**
- * The arguments for the `SortableComponent` `dataRemove` event.
+ * Represents the arguments for the `SortableComponent` `dataRemove` event.
  */
 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;
     /**
@@ -1890,19 +1847,19 @@ class DataRemoveEvent extends PreventableEvent {
     }
 }
 /**
- * The arguments for the `SortableComponent` `dataMove` event.
+ * Represents the arguments for the `SortableComponent` `dataMove` event.
  */
 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;
     /**
@@ -1915,8 +1872,23 @@ class DataMoveEvent extends PreventableEvent {
 }
 
 /**
- * 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}
  */
 class SortableBindingDirective {
     sortable;
@@ -1926,10 +1898,7 @@ 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;
@@ -2081,7 +2050,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * 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'];
+ * }
+ * ```
  */
 const KENDO_SORTABLE = [
     SortableComponent,
@@ -2093,33 +2082,21 @@ const KENDO_SORTABLE = [
 
 //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);
- *
  * ```
  */
 class SortableModule {

package/navigate-event.d.ts

@@ -5,19 +5,19 @@
 import { PreventableEvent } from './preventable-event';
 import { SortableEvent } from './sortable-event-args.interface';
 /**
- * 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 declare class NavigateEvent extends PreventableEvent implements SortableEvent {
     /**
-     * The index of the draggable item.
+     * Specifies the index of the draggable item.
      */
     index: number;
     /**
-     * The old index of the draggable item.
+     * Specifies the old index of the draggable item.
      */
     oldIndex: number;
     /**
-     * Indicates whether the ctrl or meta keys are pressed.
+     * Indicates whether the `Ctrl` or meta keys are pressed.
      */
     ctrlKey: boolean;
     /**

package/package.json

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

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

@@ -3,16 +3,16 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Arguments for the `dragStart`, `dragOver`, and `dragEnd` events.
+ * Represents the arguments for the `dragStart`, `dragOver`, and `dragEnd` events.
  * @hidden
  */
 export interface SortableEvent {
     /**
-     * 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 previous index of the data item.
      */
     oldIndex: number;
 }

package/sortable-events.d.ts

@@ -5,15 +5,17 @@
 import { PreventableEvent } from './preventable-event';
 import { SortableEvent } from './sortable-event-args.interface';
 /**
- * Arguments for the `dragStart` event.
+ * Represents the arguments for the `dragStart` event.
  */
 export declare class DragStartEvent extends PreventableEvent implements SortableEvent {
     /**
-     * The index of the draggable item.
+     * Specifies the index of the draggable item.
      */
     index: number;
     /**
-     * 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: number;
     /**
@@ -22,12 +24,12 @@ export declare class DragStartEvent extends PreventableEvent implements Sortable
     constructor(options: any);
 }
 /**
- * Arguments for the `dragOver` event.
+ * Represents the arguments for the `dragOver` event.
  */
 export declare class DragOverEvent extends DragStartEvent {
 }
 /**
- * Arguments for the `dragEnd` event.
+ * Represents the arguments for the `dragEnd` event.
  */
 export declare class DragEndEvent extends DragOverEvent {
 }