@progress/kendo-angular-treelist 13.0.0-develop.2 → 13.0.0-develop.21

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,28 @@ 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;
+    }
+    messageFor(token) {
+        return this.localization.get(token);
+    }
 }
-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 +153,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"
@@ -141,9 +171,16 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     <input
                         type="checkbox"
                         kendoTreeListFocusable
+                        [attr.aria-label]="messageFor('selectRowCheckboxLabel')"
                         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 +221,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 +234,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"
@@ -215,9 +252,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     <input
                         type="checkbox"
                         kendoTreeListFocusable
+                        [attr.aria-label]="messageFor('selectRowCheckboxLabel')"
                         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 +304,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 +313,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

@@ -277,6 +277,9 @@ export class HeaderComponent {
     get leafColumns() {
         return this._leafColumns;
     }
+    messageFor(token) {
+        return this.localization.get(token);
+    }
     attachTargets() {
         if (this.targetSubscription) {
             this.targetSubscription.unsubscribe();
@@ -467,6 +470,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                         <input
                             type="checkbox"
                             class="k-checkbox k-checkbox-md k-rounded-md"
+                            [attr.aria-label]="messageFor('selectAllRowsCheckboxLabel')"
                             kendoTreeListFocusable
                             (click)="selectAllClick($event)" />
                     </ng-template>
@@ -540,7 +544,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: [{
@@ -656,6 +660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         <input
                             type="checkbox"
                             class="k-checkbox k-checkbox-md k-rounded-md"
+                            [attr.aria-label]="messageFor('selectAllRowsCheckboxLabel')"
                             kendoTreeListFocusable
                             (click)="selectAllClick($event)" />
                     </ng-template>

package/esm2020/rendering/list.component.mjs

@@ -524,8 +524,8 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 class="k-table k-grid-table k-table-md"
                 role="presentation"
                 [style.width.px]="lockedWidth">
-                <colgroup kendoTreeListColGroup
-                    role="presentation"
+                <colgroup 
+                    kendoTreeListColGroup
                     [columns]="$any(lockedLeafColumns)">
                 </colgroup>
                 <tbody kendoTreeListTableBody
@@ -548,16 +548,17 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
-    <div #container
-               class="k-grid-content k-virtual-content"
-               role="presentation" tabindex="-1"
-               [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
-               [lockedWidth]="lockedWidth + 1">
+    <div 
+        #container
+        class="k-grid-content k-virtual-content"
+        [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
+        [lockedWidth]="lockedWidth + 1"
+    >
         <div role="presentation" class="k-grid-table-wrap">
             <table [style.width.px]="nonLockedWidth" #table [virtualColumns]="virtualColumns"
               class="k-table k-grid-table k-table-md" role="presentation">
-                <colgroup kendoTreeListColGroup
-                    role="presentation"
+                <colgroup 
+                    kendoTreeListColGroup
                     [columns]="$any(nonLockedColumnsToRender)">
                 </colgroup>
                 <tbody kendoTreeListTableBody
@@ -609,8 +610,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 class="k-table k-grid-table k-table-md"
                 role="presentation"
                 [style.width.px]="lockedWidth">
-                <colgroup kendoTreeListColGroup
-                    role="presentation"
+                <colgroup 
+                    kendoTreeListColGroup
                     [columns]="$any(lockedLeafColumns)">
                 </colgroup>
                 <tbody kendoTreeListTableBody
@@ -633,16 +634,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
-    <div #container
-               class="k-grid-content k-virtual-content"
-               role="presentation" tabindex="-1"
-               [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
-               [lockedWidth]="lockedWidth + 1">
+    <div 
+        #container
+        class="k-grid-content k-virtual-content"
+        [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
+        [lockedWidth]="lockedWidth + 1"
+    >
         <div role="presentation" class="k-grid-table-wrap">
             <table [style.width.px]="nonLockedWidth" #table [virtualColumns]="virtualColumns"
               class="k-table k-grid-table k-table-md" role="presentation">
-                <colgroup kendoTreeListColGroup
-                    role="presentation"
+                <colgroup 
+                    kendoTreeListColGroup
                     [columns]="$any(nonLockedColumnsToRender)">
                 </colgroup>
                 <tbody kendoTreeListTableBody

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
+        }] });