@progress/kendo-angular-treelist 17.0.2-develop.5 → 17.0.2-develop.7

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: 1731603727,
-    version: '17.0.2-develop.5',
+    publishDate: 1731668811,
+    version: '17.0.2-develop.7',
     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,61 @@
+/**-----------------------------------------------------------------------------------------
+* 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, NgZone, Renderer2 } from '@angular/core';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
+import { SelectionService } from '../../selection/selection.service';
+import { Subscription } from 'rxjs';
+import { SelectableDirective } from '../../selection/selectable.directive';
+import { isPresent } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-inputs";
+import * as i2 from "../../selection/selection.service";
+import * as i3 from "../../selection/selectable.directive";
+/**
+ * @hidden
+ */
+export class TreeListSelectAllCheckboxDirective {
+    sub = new Subscription();
+    setState = true;
+    constructor(host, hostEl, selectionService, selectableDirective, cdr, zone, 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 allSelected = eventData.sender.view.total === selectableDirective.stateArray.length;
+            const noneSelected = selectableDirective.stateArray.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.markForCheck();
+        });
+        // 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: i3.SelectableDirective }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { 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: i3.SelectableDirective }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });

package/esm2022/selection/selectable.directive.mjs

@@ -78,6 +78,12 @@ export class SelectableDirective {
             this._columnKeyGetter = value;
         }
     }
+    /**
+     * @hidden
+     */
+    get stateArray() {
+        return this.state.toArray();
+    }
     get keyGetter() {
         return this._keyGetter || this.treelist.idGetter;
     }

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: 1731603727,
-    version: '17.0.2-develop.5',
+    publishDate: 1731668811,
+    version: '17.0.2-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -13308,6 +13309,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
+/**
+ * A directive which controls the selection state. [See example](slug:selection_treelist).
+ */
+class SelectableDirective {
+    treelist;
+    /**
+     * @hidden
+     */
+    set selectable(value) {
+        if (typeof value === 'object') { // add method to normalize this
+            this._settings = value;
+        }
+        else {
+            this._settings = {
+                enabled: value
+            };
+        }
+        this.state = createState(this._settings);
+        this.state.fromArray(this._selectedItems || []);
+        if (this._settings.enabled !== false) {
+            this.treelist.isSelected = this._settings.mode === 'cell' ? this.cellSelected : this.rowSelected;
+            this.subscribeSelection();
+        }
+        else {
+            this.treelist.isSelected = () => false;
+            this.unsubscribeSelection();
+        }
+        this.treelist.updateView();
+    }
+    /**
+     * Specifies the selected items.
+     */
+    set selectedItems(value) {
+        if (!value) {
+            this.state.clear();
+        }
+        else if (value !== this.lastChange) {
+            this.state.fromArray(value);
+            this.treelist.updateView();
+        }
+        this._selectedItems = value;
+    }
+    /**
+     * Fires when the selected items are changed.
+     */
+    selectedItemsChange = new EventEmitter();
+    /**
+     * The field name or a function that specify the dataItems key.
+     */
+    set itemKey(value) {
+        if (isString(value)) {
+            this._keyGetter = getter(String(value));
+        }
+        else {
+            this._keyGetter = value;
+        }
+    }
+    /**
+     * The field name or a function that specify the columns key.
+     */
+    set columnKey(value) {
+        if (isString(value)) {
+            this._columnKeyGetter = getter(String(value));
+        }
+        else if (value) {
+            this._columnKeyGetter = value;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get stateArray() {
+        return this.state.toArray();
+    }
+    get keyGetter() {
+        return this._keyGetter || this.treelist.idGetter;
+    }
+    get columnKeyGetter() {
+        return this._columnKeyGetter || defaultColumnKeyGetter;
+    }
+    subscriptions;
+    state = new RowSelectionState();
+    _settings;
+    lastChange;
+    _columnKeyGetter;
+    _keyGetter;
+    _selectedItems = [];
+    constructor(treelist) {
+        this.treelist = treelist;
+        this.cellSelected = this.cellSelected.bind(this);
+        this.rowSelected = this.rowSelected.bind(this);
+        this.selectionChange = this.selectionChange.bind(this);
+        this.updateColumnIndices = this.updateColumnIndices.bind(this);
+        this.treelist.selectable = this.selectable = true;
+    }
+    ngOnDestroy() {
+        this.unsubscribeSelection();
+    }
+    /**
+     * @hidden
+     */
+    cellSelected(dataItem, column, columnIndex) {
+        return this.state.has(this.keyGetter(dataItem), this.columnKeyGetter(column, columnIndex));
+    }
+    /**
+     * @hidden
+     */
+    rowSelected(dataItem) {
+        return this.state.has(this.keyGetter(dataItem));
+    }
+    selectionChange({ action, items }) {
+        if (action === 'select' || action === 'add') {
+            if (action === 'select') {
+                this.state.clear();
+            }
+            items.forEach(item => {
+                this.state.add(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
+            });
+        }
+        else {
+            items.forEach(item => {
+                this.state.remove(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
+            });
+        }
+        this.emitSelectedItemsChange();
+    }
+    emitSelectedItemsChange() {
+        this.lastChange = this.state.toArray();
+        this.selectedItemsChange.emit(this.lastChange);
+    }
+    subscribeSelection() {
+        this.unsubscribeSelection();
+        this.subscriptions = this.treelist.selectionChange.subscribe(this.selectionChange);
+        if (this._settings.mode === 'cell') {
+            this.subscriptions.add(this.treelist.columnOrderChange.subscribe(this.updateColumnIndices));
+            this.subscriptions.add(this.treelist.columnLockedChange.subscribe(this.updateColumnIndices));
+        }
+    }
+    unsubscribeSelection() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+            this.subscriptions = null;
+        }
+    }
+    updateColumnIndices() {
+        if (!this._columnKeyGetter) {
+            const changes = new Map();
+            const currentIndices = [];
+            this.leafColumns.forEach((column) => {
+                currentIndices.push(column);
+            });
+            this.treelist.columnsContainer.refresh();
+            const leafColumns = this.leafColumns;
+            currentIndices.forEach((column, index) => {
+                if (column !== leafColumns[index]) {
+                    changes.set(index, leafColumns.indexOf(column));
+                }
+            });
+            if (changes.size && this.state.updateColumKeys(changes)) {
+                this.emitSelectedItemsChange();
+            }
+        }
+    }
+    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 ɵ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: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoTreeListSelectable',
+                    selector: '[kendoTreeListSelectable]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: TreeListComponent }]; }, propDecorators: { selectable: [{
+                type: Input
+            }], selectedItems: [{
+                type: Input
+            }], selectedItemsChange: [{
+                type: Output
+            }], itemKey: [{
+                type: Input
+            }], columnKey: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class TreeListSelectAllCheckboxDirective {
+    sub = new Subscription();
+    setState = true;
+    constructor(host, hostEl, selectionService, selectableDirective, cdr, zone, 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 allSelected = eventData.sender.view.total === selectableDirective.stateArray.length;
+            const noneSelected = selectableDirective.stateArray.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.markForCheck();
+        });
+        // 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: SelectableDirective }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { 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: SelectableDirective }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { 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 +13972,7 @@ class HeaderComponent {
                         <kendo-checkbox
                             [inputAttributes]="{'aria-label': messageFor('selectAllRowsCheckboxLabel')}"
                             kendoTreeListFocusable
+                            kendoTreeListSelectAllCheckbox
                             (checkedStateChange)="selectAllChange($event)"
                         ></kendo-checkbox>
                     </ng-template>
@@ -13808,7 +14047,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 +14160,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 +14237,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
@@ -18508,189 +18750,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
-/**
- * A directive which controls the selection state. [See example](slug:selection_treelist).
- */
-class SelectableDirective {
-    treelist;
-    /**
-     * @hidden
-     */
-    set selectable(value) {
-        if (typeof value === 'object') { // add method to normalize this
-            this._settings = value;
-        }
-        else {
-            this._settings = {
-                enabled: value
-            };
-        }
-        this.state = createState(this._settings);
-        this.state.fromArray(this._selectedItems || []);
-        if (this._settings.enabled !== false) {
-            this.treelist.isSelected = this._settings.mode === 'cell' ? this.cellSelected : this.rowSelected;
-            this.subscribeSelection();
-        }
-        else {
-            this.treelist.isSelected = () => false;
-            this.unsubscribeSelection();
-        }
-        this.treelist.updateView();
-    }
-    /**
-     * Specifies the selected items.
-     */
-    set selectedItems(value) {
-        if (!value) {
-            this.state.clear();
-        }
-        else if (value !== this.lastChange) {
-            this.state.fromArray(value);
-            this.treelist.updateView();
-        }
-        this._selectedItems = value;
-    }
-    /**
-     * Fires when the selected items are changed.
-     */
-    selectedItemsChange = new EventEmitter();
-    /**
-     * The field name or a function that specify the dataItems key.
-     */
-    set itemKey(value) {
-        if (isString(value)) {
-            this._keyGetter = getter(String(value));
-        }
-        else {
-            this._keyGetter = value;
-        }
-    }
-    /**
-     * The field name or a function that specify the columns key.
-     */
-    set columnKey(value) {
-        if (isString(value)) {
-            this._columnKeyGetter = getter(String(value));
-        }
-        else if (value) {
-            this._columnKeyGetter = value;
-        }
-    }
-    get keyGetter() {
-        return this._keyGetter || this.treelist.idGetter;
-    }
-    get columnKeyGetter() {
-        return this._columnKeyGetter || defaultColumnKeyGetter;
-    }
-    subscriptions;
-    state = new RowSelectionState();
-    _settings;
-    lastChange;
-    _columnKeyGetter;
-    _keyGetter;
-    _selectedItems = [];
-    constructor(treelist) {
-        this.treelist = treelist;
-        this.cellSelected = this.cellSelected.bind(this);
-        this.rowSelected = this.rowSelected.bind(this);
-        this.selectionChange = this.selectionChange.bind(this);
-        this.updateColumnIndices = this.updateColumnIndices.bind(this);
-        this.treelist.selectable = this.selectable = true;
-    }
-    ngOnDestroy() {
-        this.unsubscribeSelection();
-    }
-    /**
-     * @hidden
-     */
-    cellSelected(dataItem, column, columnIndex) {
-        return this.state.has(this.keyGetter(dataItem), this.columnKeyGetter(column, columnIndex));
-    }
-    /**
-     * @hidden
-     */
-    rowSelected(dataItem) {
-        return this.state.has(this.keyGetter(dataItem));
-    }
-    selectionChange({ action, items }) {
-        if (action === 'select' || action === 'add') {
-            if (action === 'select') {
-                this.state.clear();
-            }
-            items.forEach(item => {
-                this.state.add(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
-            });
-        }
-        else {
-            items.forEach(item => {
-                this.state.remove(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
-            });
-        }
-        this.emitSelectedItemsChange();
-    }
-    emitSelectedItemsChange() {
-        this.lastChange = this.state.toArray();
-        this.selectedItemsChange.emit(this.lastChange);
-    }
-    subscribeSelection() {
-        this.unsubscribeSelection();
-        this.subscriptions = this.treelist.selectionChange.subscribe(this.selectionChange);
-        if (this._settings.mode === 'cell') {
-            this.subscriptions.add(this.treelist.columnOrderChange.subscribe(this.updateColumnIndices));
-            this.subscriptions.add(this.treelist.columnLockedChange.subscribe(this.updateColumnIndices));
-        }
-    }
-    unsubscribeSelection() {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-            this.subscriptions = null;
-        }
-    }
-    updateColumnIndices() {
-        if (!this._columnKeyGetter) {
-            const changes = new Map();
-            const currentIndices = [];
-            this.leafColumns.forEach((column) => {
-                currentIndices.push(column);
-            });
-            this.treelist.columnsContainer.refresh();
-            const leafColumns = this.leafColumns;
-            currentIndices.forEach((column, index) => {
-                if (column !== leafColumns[index]) {
-                    changes.set(index, leafColumns.indexOf(column));
-                }
-            });
-            if (changes.size && this.state.updateColumKeys(changes)) {
-                this.emitSelectedItemsChange();
-            }
-        }
-    }
-    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 ɵ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: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'kendoTreeListSelectable',
-                    selector: '[kendoTreeListSelectable]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: TreeListComponent }]; }, propDecorators: { selectable: [{
-                type: Input
-            }], selectedItems: [{
-                type: Input
-            }], selectedItemsChange: [{
-                type: Output
-            }], itemKey: [{
-                type: Input
-            }], columnKey: [{
-                type: Input
-            }] } });
-
 /**
  * Represents the Kendo UI TreeListSpacer component for Angular.
  * Used to give additional white space between the Pager inner elements,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-treelist",
-  "version": "17.0.2-develop.5",
+  "version": "17.0.2-develop.7",
   "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.5",
-    "@progress/kendo-angular-common": "17.0.2-develop.5",
-    "@progress/kendo-angular-dateinputs": "17.0.2-develop.5",
-    "@progress/kendo-angular-dropdowns": "17.0.2-develop.5",
-    "@progress/kendo-angular-excel-export": "17.0.2-develop.5",
-    "@progress/kendo-angular-icons": "17.0.2-develop.5",
-    "@progress/kendo-angular-inputs": "17.0.2-develop.5",
-    "@progress/kendo-angular-intl": "17.0.2-develop.5",
-    "@progress/kendo-angular-l10n": "17.0.2-develop.5",
-    "@progress/kendo-angular-label": "17.0.2-develop.5",
-    "@progress/kendo-angular-pdf-export": "17.0.2-develop.5",
-    "@progress/kendo-angular-popup": "17.0.2-develop.5",
-    "@progress/kendo-angular-toolbar": "17.0.2-develop.5",
-    "@progress/kendo-angular-utils": "17.0.2-develop.5",
+    "@progress/kendo-angular-buttons": "17.0.2-develop.7",
+    "@progress/kendo-angular-common": "17.0.2-develop.7",
+    "@progress/kendo-angular-dateinputs": "17.0.2-develop.7",
+    "@progress/kendo-angular-dropdowns": "17.0.2-develop.7",
+    "@progress/kendo-angular-excel-export": "17.0.2-develop.7",
+    "@progress/kendo-angular-icons": "17.0.2-develop.7",
+    "@progress/kendo-angular-inputs": "17.0.2-develop.7",
+    "@progress/kendo-angular-intl": "17.0.2-develop.7",
+    "@progress/kendo-angular-l10n": "17.0.2-develop.7",
+    "@progress/kendo-angular-label": "17.0.2-develop.7",
+    "@progress/kendo-angular-pager": "17.0.2-develop.7",
+    "@progress/kendo-angular-pdf-export": "17.0.2-develop.7",
+    "@progress/kendo-angular-popup": "17.0.2-develop.7",
+    "@progress/kendo-angular-toolbar": "17.0.2-develop.7",
+    "@progress/kendo-angular-utils": "17.0.2-develop.7",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.0.2-develop.5",
+    "@progress/kendo-angular-schematics": "17.0.2-develop.7",
     "@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,20 @@
+/**-----------------------------------------------------------------------------------------
+* 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, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
+import { SelectionService } from '../../selection/selection.service';
+import { SelectableDirective } from '../../selection/selectable.directive';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class TreeListSelectAllCheckboxDirective implements OnDestroy {
+    private sub;
+    private setState;
+    constructor(host: CheckBoxComponent, hostEl: ElementRef, selectionService: SelectionService, selectableDirective: SelectableDirective, cdr: ChangeDetectorRef, zone: NgZone, 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.5',
+            '@progress/kendo-angular-treeview': '17.0.2-develop.7',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '17.0.2-develop.5',
+            '@progress/kendo-angular-dialog': '17.0.2-develop.7',
             // 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.5',
+            '@progress/kendo-angular-navigation': '17.0.2-develop.7',
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/selection/selectable.directive.d.ts

@@ -43,6 +43,10 @@ export declare class SelectableDirective implements OnDestroy {
      * The field name or a function that specify the columns key.
      */
     set columnKey(value: string | ((column: any, columnIndex: number) => any));
+    /**
+     * @hidden
+     */
+    get stateArray(): any[];
     protected get keyGetter(): any;
     protected get columnKeyGetter(): any;
     protected subscriptions: any;