@progress/kendo-angular-treelist 17.0.2-develop.1 → 17.0.2-develop.10

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1731579410,
-    version: '17.0.2-develop.1',
+    publishDate: 1731944159,
+    version: '17.0.2-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/rendering/header/header.component.mjs

@@ -36,6 +36,7 @@ import { FilterMenuComponent } from '../../filtering/menu/filter-menu.component'
 import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
 import { LogicalRowDirective } from '../../navigation/logical-row.directive';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
+import { TreeListSelectAllCheckboxDirective } from './select-all-checkbox.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
 import * as i2 from "../../dragdrop/drag-hint.service";
@@ -469,6 +470,7 @@ export class HeaderComponent {
                         <kendo-checkbox
                             [inputAttributes]="{'aria-label': messageFor('selectAllRowsCheckboxLabel')}"
                             kendoTreeListFocusable
+                            kendoTreeListSelectAllCheckbox
                             (checkedStateChange)="selectAllChange($event)"
                         ></kendo-checkbox>
                     </ng-template>
@@ -543,7 +545,7 @@ export class HeaderComponent {
             [logicalSlaveCellsCount]="unlockedColumnsCount"
         >
         </tr>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeListSelectAllCheckboxDirective, selector: "[kendoTreeListSelectAllCheckbox]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -656,6 +658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         <kendo-checkbox
                             [inputAttributes]="{'aria-label': messageFor('selectAllRowsCheckboxLabel')}"
                             kendoTreeListFocusable
+                            kendoTreeListSelectAllCheckbox
                             (checkedStateChange)="selectAllChange($event)"
                         ></kendo-checkbox>
                     </ng-template>
@@ -732,7 +735,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </tr>
     `,
                     standalone: true,
-                    imports: [NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective, NgClass, NgStyle, FilterMenuComponent, ColumnMenuComponent, TemplateContextDirective, IconWrapperComponent, FocusableDirective, ColumnHandleDirective, FilterRowComponent, CheckBoxComponent]
+                    imports: [NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective, NgClass, NgStyle,
+                        FilterMenuComponent, ColumnMenuComponent, TemplateContextDirective, IconWrapperComponent, FocusableDirective, ColumnHandleDirective, FilterRowComponent,
+                        CheckBoxComponent, TreeListSelectAllCheckboxDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.SortService }, { type: i6.SelectionService }, { type: i7.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input

package/esm2022/rendering/header/select-all-checkbox.directive.mjs

@@ -0,0 +1,76 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive, ElementRef, Renderer2 } from '@angular/core';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
+import { SelectionService } from '../../selection/selection.service';
+import { Subscription } from 'rxjs';
+import { isPresent } from '@progress/kendo-angular-common';
+import { ViewCollection } from '../../data/data.collection';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-inputs";
+import * as i2 from "../../selection/selection.service";
+/**
+ * @hidden
+ */
+export class TreeListSelectAllCheckboxDirective {
+    sub = new Subscription();
+    setState = true;
+    constructor(host, hostEl, selectionService, cdr, renderer) {
+        this.sub = selectionService.changes.subscribe(eventData => {
+            // omit setting the state when the selection change comes from clicking the checkbox, and clear the flag
+            if (!this.setState) {
+                this.setState = true;
+                return;
+            }
+            const view = eventData.sender.view;
+            let total;
+            ViewCollection.loadView({
+                fields: Object.assign({}, view.fieldAccessor(), {
+                    hasFooter: false,
+                    pageable: false,
+                    isVirtual: false
+                }),
+                loaded: view.loaded,
+                selectionState: view.selectionState
+            }).subscribe(view => {
+                if (!view) {
+                    return;
+                }
+                total = view.data.length;
+            });
+            const allSelected = total === selectionService.state.length;
+            const noneSelected = selectionService.state.length === 0;
+            const someSelected = !noneSelected && !allSelected;
+            if (allSelected && host.checkedState !== true) {
+                host.checkedState = true;
+            }
+            else if (someSelected && host.checkedState !== 'indeterminate') {
+                host.checkedState = 'indeterminate';
+            }
+            else if (noneSelected && host.checkedState !== false) {
+                host.checkedState = false;
+            }
+            cdr.detectChanges();
+        });
+        // set flag for conditional checkbox state logic
+        ['pointerdown', 'keydown'].forEach(eventName => this.sub.add(renderer.listen(hostEl.nativeElement, eventName, (e) => {
+            const isSpace = e.key && e.key === ' ';
+            const spaceOrPointer = !isPresent(e.key) || isSpace;
+            spaceOrPointer && (this.setState = false);
+        })));
+    }
+    ngOnDestroy() {
+        this.sub && this.sub.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, deps: [{ token: i1.CheckBoxComponent }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TreeListSelectAllCheckboxDirective, isStandalone: true, selector: "[kendoTreeListSelectAllCheckbox]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListSelectAllCheckbox]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.CheckBoxComponent }, { type: i0.ElementRef }, { type: i2.SelectionService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });

package/esm2022/selection/selectable.directive.mjs

@@ -7,14 +7,17 @@ import { TreeListComponent } from '../treelist.component';
 import { getter } from '@progress/kendo-common';
 import { isString } from '../utils';
 import { createState, RowSelectionState } from './selection-state';
+import { SelectionService } from './selection.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../treelist.component";
+import * as i2 from "./selection.service";
 const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
 /**
  * A directive which controls the selection state. [See example](slug:selection_treelist).
  */
 export class SelectableDirective {
     treelist;
+    selectionService;
     /**
      * @hidden
      */
@@ -91,8 +94,9 @@ export class SelectableDirective {
     _columnKeyGetter;
     _keyGetter;
     _selectedItems = [];
-    constructor(treelist) {
+    constructor(treelist, selectionService) {
         this.treelist = treelist;
+        this.selectionService = selectionService;
         this.cellSelected = this.cellSelected.bind(this);
         this.rowSelected = this.rowSelected.bind(this);
         this.selectionChange = this.selectionChange.bind(this);
@@ -131,7 +135,7 @@ export class SelectableDirective {
         this.emitSelectedItemsChange();
     }
     emitSelectedItemsChange() {
-        this.lastChange = this.state.toArray();
+        this.selectionService.state = this.lastChange = this.state.toArray();
         this.selectedItemsChange.emit(this.lastChange);
     }
     subscribeSelection() {
@@ -170,7 +174,7 @@ export class SelectableDirective {
     get leafColumns() {
         return this.treelist.lockedLeafColumns.toArray().concat(this.treelist.nonLockedLeafColumns.toArray());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [{ token: i1.TreeListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [{ token: i1.TreeListComponent }, { token: i2.SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectableDirective, isStandalone: true, selector: "[kendoTreeListSelectable]", inputs: { selectable: "selectable", selectedItems: "selectedItems", itemKey: "itemKey", columnKey: "columnKey" }, outputs: { selectedItemsChange: "selectedItemsChange" }, exportAs: ["kendoTreeListSelectable"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, decorators: [{
@@ -180,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListSelectable]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.TreeListComponent }]; }, propDecorators: { selectable: [{
+        }], ctorParameters: function () { return [{ type: i1.TreeListComponent }, { type: i2.SelectionService }]; }, propDecorators: { selectable: [{
                 type: Input
             }], selectedItems: [{
                 type: Input

package/esm2022/selection/selection.service.mjs

@@ -18,6 +18,7 @@ const noop = () => false;
  */
 export class SelectionService {
     changes = new Subject();
+    state = [];
     set settings(value) {
         if (typeof value === 'object') {
             this._settings = value;

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

@@ -27,6 +27,7 @@ import { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, caretAltD
 import * as i95 from '@progress/kendo-angular-pager';
 import { PagerContextService, PagerNavigationService, PagerTemplateDirective, KENDO_PAGER } from '@progress/kendo-angular-pager';
 import { getter, setter } from '@progress/kendo-common';
+import * as i1$5 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, CheckBoxComponent, TextBoxComponent, RadioButtonComponent } from '@progress/kendo-angular-inputs';
 import * as i1$3 from '@progress/kendo-angular-intl';
 import { DropDownListComponent, AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';
@@ -45,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1731579410,
-    version: '17.0.2-develop.1',
+    publishDate: 1731944159,
+    version: '17.0.2-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -4213,6 +4214,7 @@ const noop = () => false;
  */
 class SelectionService {
     changes = new Subject();
+    state = [];
     set settings(value) {
         if (typeof value === 'object') {
             this._settings = value;
@@ -13308,6 +13310,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class TreeListSelectAllCheckboxDirective {
+    sub = new Subscription();
+    setState = true;
+    constructor(host, hostEl, selectionService, cdr, renderer) {
+        this.sub = selectionService.changes.subscribe(eventData => {
+            // omit setting the state when the selection change comes from clicking the checkbox, and clear the flag
+            if (!this.setState) {
+                this.setState = true;
+                return;
+            }
+            const view = eventData.sender.view;
+            let total;
+            ViewCollection.loadView({
+                fields: Object.assign({}, view.fieldAccessor(), {
+                    hasFooter: false,
+                    pageable: false,
+                    isVirtual: false
+                }),
+                loaded: view.loaded,
+                selectionState: view.selectionState
+            }).subscribe(view => {
+                if (!view) {
+                    return;
+                }
+                total = view.data.length;
+            });
+            const allSelected = total === selectionService.state.length;
+            const noneSelected = selectionService.state.length === 0;
+            const someSelected = !noneSelected && !allSelected;
+            if (allSelected && host.checkedState !== true) {
+                host.checkedState = true;
+            }
+            else if (someSelected && host.checkedState !== 'indeterminate') {
+                host.checkedState = 'indeterminate';
+            }
+            else if (noneSelected && host.checkedState !== false) {
+                host.checkedState = false;
+            }
+            cdr.detectChanges();
+        });
+        // set flag for conditional checkbox state logic
+        ['pointerdown', 'keydown'].forEach(eventName => this.sub.add(renderer.listen(hostEl.nativeElement, eventName, (e) => {
+            const isSpace = e.key && e.key === ' ';
+            const spaceOrPointer = !isPresent$1(e.key) || isSpace;
+            spaceOrPointer && (this.setState = false);
+        })));
+    }
+    ngOnDestroy() {
+        this.sub && this.sub.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, deps: [{ token: i1$5.CheckBoxComponent }, { token: i0.ElementRef }, { token: SelectionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TreeListSelectAllCheckboxDirective, isStandalone: true, selector: "[kendoTreeListSelectAllCheckbox]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListSelectAllCheckbox]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$5.CheckBoxComponent }, { type: i0.ElementRef }, { type: SelectionService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
 const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
@@ -13734,6 +13800,7 @@ class HeaderComponent {
                         <kendo-checkbox
                             [inputAttributes]="{'aria-label': messageFor('selectAllRowsCheckboxLabel')}"
                             kendoTreeListFocusable
+                            kendoTreeListSelectAllCheckbox
                             (checkedStateChange)="selectAllChange($event)"
                         ></kendo-checkbox>
                     </ng-template>
@@ -13808,7 +13875,7 @@ class HeaderComponent {
             [logicalSlaveCellsCount]="unlockedColumnsCount"
         >
         </tr>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeListSelectAllCheckboxDirective, selector: "[kendoTreeListSelectAllCheckbox]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -13921,6 +13988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         <kendo-checkbox
                             [inputAttributes]="{'aria-label': messageFor('selectAllRowsCheckboxLabel')}"
                             kendoTreeListFocusable
+                            kendoTreeListSelectAllCheckbox
                             (checkedStateChange)="selectAllChange($event)"
                         ></kendo-checkbox>
                     </ng-template>
@@ -13997,7 +14065,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </tr>
     `,
                     standalone: true,
-                    imports: [NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective, NgClass, NgStyle, FilterMenuComponent, ColumnMenuComponent, TemplateContextDirective, IconWrapperComponent, FocusableDirective, ColumnHandleDirective, FilterRowComponent, CheckBoxComponent]
+                    imports: [NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective, NgClass, NgStyle,
+                        FilterMenuComponent, ColumnMenuComponent, TemplateContextDirective, IconWrapperComponent, FocusableDirective, ColumnHandleDirective, FilterRowComponent,
+                        CheckBoxComponent, TreeListSelectAllCheckboxDirective]
                 }]
         }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: SortService }, { type: SelectionService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
@@ -18514,6 +18584,7 @@ const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
  */
 class SelectableDirective {
     treelist;
+    selectionService;
     /**
      * @hidden
      */
@@ -18590,8 +18661,9 @@ class SelectableDirective {
     _columnKeyGetter;
     _keyGetter;
     _selectedItems = [];
-    constructor(treelist) {
+    constructor(treelist, selectionService) {
         this.treelist = treelist;
+        this.selectionService = selectionService;
         this.cellSelected = this.cellSelected.bind(this);
         this.rowSelected = this.rowSelected.bind(this);
         this.selectionChange = this.selectionChange.bind(this);
@@ -18630,7 +18702,7 @@ class SelectableDirective {
         this.emitSelectedItemsChange();
     }
     emitSelectedItemsChange() {
-        this.lastChange = this.state.toArray();
+        this.selectionService.state = this.lastChange = this.state.toArray();
         this.selectedItemsChange.emit(this.lastChange);
     }
     subscribeSelection() {
@@ -18669,7 +18741,7 @@ class SelectableDirective {
     get leafColumns() {
         return this.treelist.lockedLeafColumns.toArray().concat(this.treelist.nonLockedLeafColumns.toArray());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [{ token: TreeListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [{ token: TreeListComponent }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectableDirective, isStandalone: true, selector: "[kendoTreeListSelectable]", inputs: { selectable: "selectable", selectedItems: "selectedItems", itemKey: "itemKey", columnKey: "columnKey" }, outputs: { selectedItemsChange: "selectedItemsChange" }, exportAs: ["kendoTreeListSelectable"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, decorators: [{
@@ -18679,7 +18751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListSelectable]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: TreeListComponent }]; }, propDecorators: { selectable: [{
+        }], ctorParameters: function () { return [{ type: TreeListComponent }, { type: SelectionService }]; }, propDecorators: { selectable: [{
                 type: Input
             }], selectedItems: [{
                 type: Input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-treelist",
-  "version": "17.0.2-develop.1",
+  "version": "17.0.2-develop.10",
   "description": "Kendo UI TreeList for Angular - Display hierarchical data in an Angular tree grid view that supports sorting, filtering, paging, and much more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -31,25 +31,26 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "17.0.2-develop.1",
-    "@progress/kendo-angular-common": "17.0.2-develop.1",
-    "@progress/kendo-angular-dateinputs": "17.0.2-develop.1",
-    "@progress/kendo-angular-dropdowns": "17.0.2-develop.1",
-    "@progress/kendo-angular-excel-export": "17.0.2-develop.1",
-    "@progress/kendo-angular-icons": "17.0.2-develop.1",
-    "@progress/kendo-angular-inputs": "17.0.2-develop.1",
-    "@progress/kendo-angular-intl": "17.0.2-develop.1",
-    "@progress/kendo-angular-l10n": "17.0.2-develop.1",
-    "@progress/kendo-angular-label": "17.0.2-develop.1",
-    "@progress/kendo-angular-pdf-export": "17.0.2-develop.1",
-    "@progress/kendo-angular-popup": "17.0.2-develop.1",
-    "@progress/kendo-angular-toolbar": "17.0.2-develop.1",
-    "@progress/kendo-angular-utils": "17.0.2-develop.1",
+    "@progress/kendo-angular-buttons": "17.0.2-develop.10",
+    "@progress/kendo-angular-common": "17.0.2-develop.10",
+    "@progress/kendo-angular-dateinputs": "17.0.2-develop.10",
+    "@progress/kendo-angular-dropdowns": "17.0.2-develop.10",
+    "@progress/kendo-angular-excel-export": "17.0.2-develop.10",
+    "@progress/kendo-angular-icons": "17.0.2-develop.10",
+    "@progress/kendo-angular-inputs": "17.0.2-develop.10",
+    "@progress/kendo-angular-intl": "17.0.2-develop.10",
+    "@progress/kendo-angular-l10n": "17.0.2-develop.10",
+    "@progress/kendo-angular-label": "17.0.2-develop.10",
+    "@progress/kendo-angular-pager": "17.0.2-develop.10",
+    "@progress/kendo-angular-pdf-export": "17.0.2-develop.10",
+    "@progress/kendo-angular-popup": "17.0.2-develop.10",
+    "@progress/kendo-angular-toolbar": "17.0.2-develop.10",
+    "@progress/kendo-angular-utils": "17.0.2-develop.10",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.0.2-develop.1",
+    "@progress/kendo-angular-schematics": "17.0.2-develop.10",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/rendering/header/select-all-checkbox.directive.d.ts

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
+import { SelectionService } from '../../selection/selection.service';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class TreeListSelectAllCheckboxDirective implements OnDestroy {
+    private sub;
+    private setState;
+    constructor(host: CheckBoxComponent, hostEl: ElementRef, selectionService: SelectionService, cdr: ChangeDetectorRef, renderer: Renderer2);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeListSelectAllCheckboxDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TreeListSelectAllCheckboxDirective, "[kendoTreeListSelectAllCheckbox]", never, {}, {}, never, never, true, never>;
+}

package/schematics/ngAdd/index.js

@@ -4,13 +4,13 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'TreeListModule', package: 'treelist', peerDependencies: {
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '17.0.2-develop.1',
+            '@progress/kendo-angular-treeview': '17.0.2-develop.10',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '17.0.2-develop.1',
+            '@progress/kendo-angular-dialog': '17.0.2-develop.10',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^4.0.0',
             // peer dependency of kendo-angular-dateinputs
-            '@progress/kendo-angular-navigation': '17.0.2-develop.1',
+            '@progress/kendo-angular-navigation': '17.0.2-develop.10',
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/selection/selectable.directive.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { OnDestroy, EventEmitter } from '@angular/core';
 import { TreeListComponent } from '../treelist.component';
+import { SelectionService } from './selection.service';
 import * as i0 from "@angular/core";
 /**
  * The [`kendoTreeListSelectable`](slug:api_treelist_selectabledirective) state items.
@@ -23,6 +24,7 @@ export interface SelectionItem {
  */
 export declare class SelectableDirective implements OnDestroy {
     private treelist;
+    private selectionService;
     /**
      * @hidden
      */
@@ -52,7 +54,7 @@ export declare class SelectableDirective implements OnDestroy {
     protected _columnKeyGetter: any;
     protected _keyGetter: any;
     private _selectedItems;
-    constructor(treelist: TreeListComponent);
+    constructor(treelist: TreeListComponent, selectionService: SelectionService);
     ngOnDestroy(): void;
     /**
      * @hidden

package/selection/selection.service.d.ts

@@ -14,6 +14,7 @@ export declare const defaultSelected: (_item: any) => boolean;
  */
 export declare class SelectionService {
     changes: Subject<SelectionChangeEvent>;
+    state: any[];
     set settings(value: any);
     get settings(): any;
     get enableMarquee(): boolean;