@progress/kendo-angular-treelist 12.2.0-develop.7 → 13.0.0-develop.10

package/esm2020/rendering/cell.component.mjs

@@ -4,34 +4,39 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, Input } from '@angular/core';
 import { EditService } from '../editing/edit.service';
-import { isSpanColumn, isCheckboxColumn } from '../columns/column-base';
+import { isSpanColumn, isCheckboxColumn, isRowReorderColumn } from '../columns/column-base';
 import { isColumnComponent } from '../columns/column.component';
 import { columnsToRender } from "../columns/column-common";
 import { isNullOrEmptyString, extractFormat, isColumnEditable } from '../utils';
 import { FocusGroup } from '../navigation/focus-group';
-import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, reorderIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from "@progress/kendo-angular-l10n";
 import * as i0 from "@angular/core";
 import * as i1 from "../editing/edit.service";
-import * as i2 from "../navigation/focus-group";
-import * as i3 from "@progress/kendo-angular-icons";
-import * as i4 from "@progress/kendo-angular-inputs";
-import * as i5 from "@progress/kendo-angular-dateinputs";
-import * as i6 from "@angular/common";
-import * as i7 from "../navigation/focusable.directive";
-import * as i8 from "@angular/forms";
-import * as i9 from "./common/level-items.pipe";
-import * as i10 from "./common/field-accessor.pipe";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "../navigation/focus-group";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "@progress/kendo-angular-inputs";
+import * as i6 from "@progress/kendo-angular-dateinputs";
+import * as i7 from "@angular/common";
+import * as i8 from "../navigation/focusable.directive";
+import * as i9 from "@angular/forms";
+import * as i10 from "./common/level-items.pipe";
+import * as i11 from "./common/field-accessor.pipe";
 /**
  * @hidden
  */
 export class CellComponent {
-    constructor(editService, focusGroup) {
+    constructor(editService, localization, focusGroup) {
         this.editService = editService;
+        this.localization = localization;
         this.focusGroup = focusGroup;
         this.isNew = false;
         this.level = 0;
         this.caretAltDownIcon = caretAltDownIcon;
         this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.reorderIcon = reorderIcon;
         this.cellContext = {};
         this._templateContext = {};
         this._editTemplateContext = {};
@@ -47,6 +52,12 @@ export class CellComponent {
     get textNoWrapClass() {
         return this.column.expandable;
     }
+    get dragHandleCellClass() {
+        return isRowReorderColumn(this.column);
+    }
+    get dragRowHandleLabel() {
+        return isRowReorderColumn(this.column) ? this.localization.get('dragRowHandleLabel') : undefined;
+    }
     set viewItem(value) {
         this._viewItem = value;
         this.cellContext.viewItem = this.viewItem;
@@ -113,9 +124,25 @@ export class CellComponent {
         context.loading = this.loading;
         context.rowIndex = this.viewItem.rowIndex;
     }
+    get arrowIcon() {
+        const icon = !this.isExpanded ?
+            !this.localization.rtl ?
+                'caret-alt-right' :
+                'caret-alt-left' :
+            'caret-alt-down';
+        return icon;
+    }
+    get arrowSVGIcon() {
+        const icon = !this.isExpanded ?
+            !this.localization.rtl ?
+                this.caretAltRightIcon :
+                this.caretAltLeftIcon :
+            this.caretAltDownIcon;
+        return icon;
+    }
 }
-CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
-CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CellComponent, selector: "[kendoTreeListCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", level: "level", hasChildren: "hasChildren", isExpanded: "isExpanded", loading: "loading", expandIcons: "expandIcons", selected: "selected", dataItem: "dataItem", viewItem: "viewItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-checkbox-cell": "this.isCheckboxColumn", "class.k-text-nowrap": "this.textNoWrapClass" } }, ngImport: i0, template: `
+CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.LocalizationService }, { token: i3.FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
+CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CellComponent, selector: "[kendoTreeListCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", level: "level", hasChildren: "hasChildren", isExpanded: "isExpanded", loading: "loading", expandIcons: "expandIcons", selected: "selected", dataItem: "dataItem", viewItem: "viewItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-checkbox-cell": "this.isCheckboxColumn", "class.k-text-nowrap": "this.textNoWrapClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
         <ng-container [ngSwitch]="isEdited">
             <ng-container *ngSwitchCase="false">
                 <ng-container *ngIf="column.expandable">
@@ -123,8 +150,8 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     <kendo-icon-wrapper
                         aria-hidden="true"
                         *ngIf="hasChildren && expandIcons && !loading"
-                        [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                        [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                        [name]="arrowIcon"
+                        [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
                 </ng-container>
                 <ng-container *ngIf="column.templateRef"
@@ -144,6 +171,12 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                         class="k-checkbox k-checkbox-md k-rounded-md"
                         [checked]="selected" />
                 </ng-template>
+                <ng-container *ngIf="column.isRowReorderColumn && !isNew">
+                    <kendo-icon-wrapper
+                        name="reorder"
+                        [svgIcon]="reorderIcon">
+                    </kendo-icon-wrapper>
+                </ng-container>
             </ng-container>
             <ng-container *ngSwitchCase="true">
                 <ng-container
@@ -184,7 +217,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": i9.LevelItemsPipe, "valueOf": i10.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": i10.LevelItemsPipe, "valueOf": i11.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -197,8 +230,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     <kendo-icon-wrapper
                         aria-hidden="true"
                         *ngIf="hasChildren && expandIcons && !loading"
-                        [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                        [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                        [name]="arrowIcon"
+                        [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
                 </ng-container>
                 <ng-container *ngIf="column.templateRef"
@@ -218,6 +251,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         class="k-checkbox k-checkbox-md k-rounded-md"
                         [checked]="selected" />
                 </ng-template>
+                <ng-container *ngIf="column.isRowReorderColumn && !isNew">
+                    <kendo-icon-wrapper
+                        name="reorder"
+                        [svgIcon]="reorderIcon">
+                    </kendo-icon-wrapper>
+                </ng-container>
             </ng-container>
             <ng-container *ngSwitchCase="true">
                 <ng-container
@@ -260,7 +299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.FocusGroup }]; }, propDecorators: { commandCellClass: [{
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.LocalizationService }, { type: i3.FocusGroup }]; }, propDecorators: { commandCellClass: [{
                 type: HostBinding,
                 args: ['class.k-command-cell']
             }], isCheckboxColumn: [{
@@ -269,6 +308,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], textNoWrapClass: [{
                 type: HostBinding,
                 args: ['class.k-text-nowrap']
+            }], dragHandleCellClass: [{
+                type: HostBinding,
+                args: ['class.k-drag-cell']
+            }, {
+                type: HostBinding,
+                args: ['class.k-touch-action-none']
+            }], dragRowHandleLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }], column: [{
                 type: Input
             }], columnIndex: [{

package/esm2020/rendering/common/spacer.component.mjs

@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
  * Represents the Kendo UI TreeListSpacer component for Angular.
  * Used to give additional white space between the Pager inner elements,
  * and provides a way for customizing the spacer width.
- * It can also be used in any flex container within the TreeList.
+ * It can also be used in any flex container within the TreeList. [See example](slug:toolbartemplate_treelist#toc-define-spacing-between-the-toolbar-elements).
  */
 export class TreeListSpacerComponent {
     constructor() {

package/esm2020/rendering/constants.mjs

@@ -22,3 +22,7 @@ export const ICON_CLASS = 'k-icon k-svg-icon';
  * @hidden
  */
 export const IGNORE_CONTAINER_CLASSES = 'k-treelist-ignore-click';
+/**
+ * @hidden
+ */
+export const DRAG_HANDLE_CLASS = 'k-drag-cell';

package/esm2020/rendering/header/header.component.mjs

@@ -540,7 +540,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [logicalSlaveCellsCount]="unlockedColumnsCount"
         >
         </tr>
-    `, isInline: true, components: [{ type: i8.FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: i9.ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i11.FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: i15.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i16.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i17.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i19.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i20.ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: i8.FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: i9.ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i11.FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: i15.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i16.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i17.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i19.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i20.ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/rendering/table-body.component.mjs

@@ -18,7 +18,7 @@ import { Keys } from '@progress/kendo-angular-common';
 import { defaultTrackBy } from '../common/default-track-by';
 import { ExpandStateService } from '../expand-state/expand-state.service';
 import { SelectionService } from '../selection/selection.service';
-import { NON_DATA_CELL_CLASSES, NON_DATA_ROW_CLASSES, IGNORE_CONTAINER_CLASSES, ICON_CLASS, EMPTY_ICON_CLASS } from './constants';
+import { NON_DATA_CELL_CLASSES, NON_DATA_ROW_CLASSES, IGNORE_CONTAINER_CLASSES, ICON_CLASS, EMPTY_ICON_CLASS, DRAG_HANDLE_CLASS } from './constants';
 import * as i0 from "@angular/core";
 import * as i1 from "../data/change-notification.service";
 import * as i2 from "../editing/edit.service";
@@ -213,8 +213,10 @@ export class TableBodyComponent {
     clickHandler(eventArg) {
         const target = eventArg.target;
         const { cell, row } = this.targetElements(target);
-        if (cell && !hasClasses(cell, NON_DATA_CELL_CLASSES) &&
-            !hasClasses(row, NON_DATA_ROW_CLASSES)) {
+        const forbiddenCellClasses = NON_DATA_CELL_CLASSES.concat(` ${DRAG_HANDLE_CLASS}`);
+        const isValidCell = cell ? !hasClasses(cell, forbiddenCellClasses) : false;
+        const isValidRow = row ? !hasClasses(row, NON_DATA_ROW_CLASSES) : false;
+        if (isValidRow && isValidCell) {
             if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg)) {
                 return;
             }

package/esm2020/row-reordering/flat-reorder.service.mjs

@@ -0,0 +1,48 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from "@angular/core";
+import { RowReorderService } from './row-reorder.service';
+import { isPresent } from "../utils";
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class FlatRowReorderService extends RowReorderService {
+    isOverChild(targetItem) {
+        const { draggedRows } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const draggedItem = draggedRows[0].dataItem;
+        const hasParent = isPresent(targetItem[this.parentIdField]);
+        const sameParents = draggedItem[this.parentIdField] === targetItem[this.parentIdField];
+        if (!hasParent || sameParents) {
+            return false;
+        }
+        if (targetItem && targetItem.hasOwnProperty(this.parentIdField)) {
+            if (draggedItem[this.idField] === targetItem[this.parentIdField]) {
+                return true;
+            }
+            const parent = this.data.find(i => i[this.idField] === targetItem[this.parentIdField]);
+            if (parent) {
+                return this.isOverChild(parent);
+            }
+        }
+    }
+    reorderRows(ev, collection) {
+        const { draggedRows, dropTargetRow } = ev;
+        const draggedDataItem = draggedRows[0].dataItem;
+        const dropTargetDataItem = dropTargetRow.dataItem;
+        let dropTargetIdx = collection.indexOf(dropTargetDataItem);
+        const draggedItemIdx = collection.indexOf(draggedDataItem);
+        collection.splice(draggedItemIdx, 1);
+        if (ev.dropPosition === 'after' && dropTargetIdx < draggedItemIdx) {
+            dropTargetIdx++;
+        }
+        collection.splice(dropTargetIdx, 0, draggedDataItem);
+    }
+}
+FlatRowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatRowReorderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+FlatRowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatRowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatRowReorderService, decorators: [{
+            type: Injectable
+        }] });

package/esm2020/row-reordering/hierarchical-reorder.service.mjs

@@ -0,0 +1,55 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from "@angular/core";
+import { RowReorderService } from './row-reorder.service';
+import { isPresent } from "../utils";
+import { dropPosition, findParent } from "./utils";
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class HierarchicalRowReorderService extends RowReorderService {
+    isOverChild(targetItem) {
+        const { draggedRows } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const draggedItem = draggedRows[0].dataItem;
+        const hasChildren = isPresent(draggedItem[this.childrenField]) && draggedItem[this.childrenField].length > 0;
+        if (!hasChildren) {
+            return false;
+        }
+        if (targetItem && draggedItem.hasOwnProperty(this.childrenField)) {
+            if (draggedItem[this.childrenField].includes(targetItem)) {
+                return true;
+            }
+            const parent = findParent(this.data, targetItem, this.childrenField);
+            if (parent) {
+                return this.isOverChild(parent);
+            }
+        }
+        return false;
+    }
+    reorderRows(ev, collection, field) {
+        const draggedItem = ev.draggedRows[0].dataItem;
+        const dropTargetItem = ev.dropTargetRow.dataItem;
+        const draggedItemParent = findParent(collection, draggedItem, field);
+        const dropTargetParent = findParent(collection, dropTargetItem, field);
+        const draggedItemIdx = draggedItemParent ? draggedItemParent[field].indexOf(draggedItem) : collection.indexOf(draggedItem);
+        let dropTargetItemIdx = dropTargetParent ? dropTargetParent[field].indexOf(dropTargetItem) : collection.indexOf(dropTargetItem);
+        if (ev.dropPosition === dropPosition.after && dropTargetItemIdx < draggedItemIdx) {
+            dropTargetItemIdx++;
+        }
+        draggedItemParent ? draggedItemParent[field].splice(draggedItemIdx, 1) : collection.splice(draggedItemIdx, 1);
+        if (ev.dropPosition !== dropPosition.over) {
+            dropTargetParent ? dropTargetParent[field].splice(dropTargetItemIdx, 0, draggedItem) : collection.splice(dropTargetItemIdx, 0, draggedItem);
+        }
+        else {
+            dropTargetItem[field].unshift(draggedItem);
+        }
+    }
+}
+HierarchicalRowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchicalRowReorderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+HierarchicalRowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchicalRowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchicalRowReorderService, decorators: [{
+            type: Injectable
+        }] });

package/esm2020/row-reordering/row-reorder.service.mjs

@@ -0,0 +1,220 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, Injectable, Output, Renderer2 } from '@angular/core';
+import { isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
+import { getOffset, isNextSibling, isPreviousSibling, dropPosition, hintIcons, hintSVGIcons, hintClasses, hintStyles, dropIndicatorClasses, dropIndicatorStyles, defaultSelectors, rowIndexAttr } from './utils';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class RowReorderService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.defaultSelectors = defaultSelectors;
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.lastDropPosition = dropPosition.forbidden;
+        this.hintElement = null;
+        this.rowReorder = new EventEmitter();
+    }
+    press(ev) {
+        this.dragTarget = ev.dragTarget;
+        this.offsetY = ev.dragEvent.offsetY;
+    }
+    dragStart() {
+        this.createDropIndicator();
+    }
+    drag(ev) {
+        if (isPresent(ev.hintElement) && !isPresent(this.hintElement)) {
+            this.hintElement = ev.hintElement;
+            this.decorateHint();
+        }
+        const position = {
+            x: ev.dragEvent.clientX,
+            y: ev.dragEvent.clientY - this.offsetY
+        };
+        if (isPresent(this.hintElement)) {
+            this.renderer.setStyle(this.hintElement, 'left', `${position.x}px`);
+            this.renderer.setStyle(this.hintElement, 'top', `${position.y}px`);
+        }
+        this.positionDropIndicator(ev);
+    }
+    dragEnter(ev) {
+        this.dropTarget = ev.dropTarget;
+        this.view = ev.dragData;
+    }
+    dragLeave() {
+        this.dropTarget = null;
+        this.lastDropPosition === dropPosition.forbidden && this.hide();
+    }
+    dragEnd() {
+        this.destroyDropIndicator();
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.hintElement = null;
+    }
+    drop() {
+        this.destroyDropIndicator();
+        const rowReorderArgs = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        this.rowReorder.emit(rowReorderArgs);
+    }
+    get hintIcon() {
+        return hintIcons[this.lastDropPosition];
+    }
+    get hintSVGIcon() {
+        return hintSVGIcons[this.lastDropPosition];
+    }
+    getDefaultHintText(columns, data) {
+        let hintText = '';
+        const columnFieldsArray = columns
+            .toArray()
+            .filter(column => !column.hidden && isPresent(column.field))
+            .map(column => column.field);
+        const draggedDragRow = this.getDragRowPerElement(this.dragTarget, data);
+        const draggedDataItem = draggedDragRow?.dataItem;
+        isPresent(draggedDataItem) && columnFieldsArray.forEach(column => {
+            const columnValue = draggedDataItem[column];
+            isPresent(columnValue) ? hintText += `${columnValue} ` : null;
+        });
+        return hintText.trim();
+    }
+    rowReorderArgs(dragRow, dropRow, data) {
+        const dragRowData = this.getDragRowPerElement(dragRow, data);
+        const dropRowData = this.getDragRowPerElement(dropRow, data);
+        return {
+            draggedRows: [dragRowData],
+            dropTargetRow: dropRowData,
+            dropPosition: this.lastDropPosition
+        };
+    }
+    isOverChild(_item) { return false; }
+    reorderRows(_ev, _collection, _field) { }
+    get parentIdField() {
+        return this.bindingDirective.parentIdField;
+    }
+    get idField() {
+        return this.bindingDirective.idField;
+    }
+    get childrenField() {
+        return this.bindingDirective.childrenField;
+    }
+    get data() {
+        return this.bindingDirective.data;
+    }
+    getDragRowPerElement(row, data) {
+        let rowIndex = row?.getAttribute(rowIndexAttr);
+        rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
+        const dataItem = rowIndex === -1 ? null : data?.at(rowIndex)?.data;
+        return {
+            dataItem,
+            rowIndex,
+            element: row
+        };
+    }
+    createDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.dropIndicator = document.createElement('div');
+        this.decorateDropIndicator();
+        this.dropIndicator.innerHTML = `
+            <div class="k-drop-hint-start"></div>
+            <div class="k-drop-hint-line"></div>
+        `;
+        document.body.appendChild(this.dropIndicator);
+        this.hide();
+    }
+    destroyDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        ;
+        if (this.dropIndicator && this.dropIndicator.parentElement) {
+            document.body.removeChild(this.dropIndicator);
+            this.dropIndicator = null;
+        }
+    }
+    decorateHint() {
+        hintClasses.forEach(className => this.renderer.addClass(this.hintElement, className));
+        Object.keys(hintStyles)
+            .forEach(style => this.renderer.setStyle(this.hintElement, style, hintStyles[style]));
+    }
+    positionDropIndicator(ev) {
+        this.lastDropPosition = this.getDropPosition(ev.dragEvent);
+        this.updateDropIndicatorPosition();
+    }
+    decorateDropIndicator() {
+        dropIndicatorClasses.forEach(className => this.renderer.addClass(this.dropIndicator, className));
+        Object.keys(dropIndicatorStyles)
+            .forEach(style => this.renderer.setStyle(this.dropIndicator, style, dropIndicatorStyles[style]));
+    }
+    getDropPosition(e) {
+        if (this.dropTarget === this.dragTarget || !isPresent(this.dropTarget)) {
+            return dropPosition.forbidden;
+        }
+        ;
+        const itemViewPortCoords = this.dropTarget.getBoundingClientRect();
+        const itemDivisionsCount = 3;
+        const itemDivisionHeight = itemViewPortCoords.height / itemDivisionsCount;
+        const { dropTargetRow } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const pointerPosition = e.clientY;
+        const itemTop = itemViewPortCoords.top;
+        let currentDropPosition = null;
+        if (pointerPosition <= itemTop + itemDivisionHeight) {
+            currentDropPosition = dropPosition.before;
+        }
+        else if (pointerPosition >= itemTop + itemViewPortCoords.height - itemDivisionHeight) {
+            currentDropPosition = dropPosition.after;
+        }
+        else {
+            currentDropPosition = dropPosition.over;
+        }
+        if (currentDropPosition === dropPosition.before && isNextSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        else if (currentDropPosition === dropPosition.after && isPreviousSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        if (this.isOverChild(dropTargetRow.dataItem)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        return currentDropPosition;
+    }
+    updateDropIndicatorPosition() {
+        if (this.shouldHideDropIndicator() || !this.dropTarget) {
+            this.hide();
+            return;
+        }
+        this.show();
+        const destinationItemOffset = getOffset(this.dropTarget);
+        let indicatorOffsetTop = destinationItemOffset.top;
+        const indicatorOffsetLeft = destinationItemOffset.left + this.dropIndicator.offsetWidth / 2;
+        if (this.lastDropPosition === dropPosition.after) {
+            indicatorOffsetTop += this.dropTarget.offsetHeight;
+        }
+        this.renderer.setStyle(this.dropIndicator, 'left', `${indicatorOffsetLeft}px`);
+        this.renderer.setStyle(this.dropIndicator, 'top', `${indicatorOffsetTop}px`);
+    }
+    shouldHideDropIndicator() {
+        return this.lastDropPosition === dropPosition.forbidden || this.lastDropPosition === dropPosition.over;
+    }
+    hide() {
+        if (isPresent(this.dropIndicator)) {
+            this.renderer.setStyle(this.dropIndicator, 'display', 'none');
+        }
+    }
+    show() {
+        if (isPresent(this.dropIndicator)) {
+            this.renderer.removeStyle(this.dropIndicator, 'display');
+        }
+    }
+}
+RowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+RowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { rowReorder: [{
+                type: Output
+            }] } });

package/esm2020/row-reordering/types.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};