@progress/kendo-angular-treelist 3.1.3-dev.202110041229

package/dist/es/rendering/no-records-template.directive.js

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, TemplateRef, Optional } from '@angular/core';
+/**
+ * Represents the no-records template of the TreeList. Provides an option to customize the
+ * appearance of the item that is displayed when no data is present. To define the no-records template,
+ * nest an `<ng-template>` tag with the `kendoTreeListNoRecordsTemplate` directive inside `<kendo-treelist>`.
+ *
+ * > When the locked columns of the TreeList are in use, the template is displayed in the non-locked part of the content.
+ *
+ * {% meta height:533 %}
+ * {% embed_file configuration/no-records-template/app.component.ts preview %}
+ * {% embed_file configuration/no-records-template/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+var NoRecordsTemplateDirective = /** @class */ (function () {
+    function NoRecordsTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    NoRecordsTemplateDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoTreeListNoRecordsTemplate]'
+        }),
+        tslib_1.__param(0, Optional()),
+        tslib_1.__metadata("design:paramtypes", [TemplateRef])
+    ], NoRecordsTemplateDirective);
+    return NoRecordsTemplateDirective;
+}());
+export { NoRecordsTemplateDirective };

package/dist/es/rendering/table-body.component.js

@@ -0,0 +1,403 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, Input, NgZone, Renderer2, ElementRef } from '@angular/core';
+import { ChangeNotificationService } from '../data/change-notification.service';
+import { isChanged, isPresent } from '../utils';
+import { NoRecordsTemplateDirective } from './no-records-template.directive';
+import { EditService } from '../editing/edit.service';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { columnsSpan } from "../columns/column-common";
+import { closest, closestInScope, hasClasses, isFocusableWithTabKey, matchesClasses, matchesNodeName } from './common/dom-queries';
+import { DomEventsService } from '../common/dom-events.service';
+import { ColumnInfoService } from "../common/column-info.service";
+import { hasFilterRow } from '../filtering/filterable';
+import { NavigationService } from '../navigation/navigation.service';
+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_TARGET_CLASSSES, IGNORE_CONTAINER_CLASSES } from './constants';
+var columnCellIndex = function (cell, cells) {
+    for (var idx = 0; idx < cells.length; idx++) {
+        if (cells[idx] === cell) {
+            return idx;
+        }
+    }
+};
+var ɵ0 = columnCellIndex;
+/**
+ * @hidden
+ */
+var TableBodyComponent = /** @class */ (function () {
+    function TableBodyComponent(changeNotification, editService, localization, ngZone, renderer, element, domEvents, columnInfoService, navigationService, expandState, selection) {
+        var _this = this;
+        this.changeNotification = changeNotification;
+        this.editService = editService;
+        this.localization = localization;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.element = element;
+        this.domEvents = domEvents;
+        this.columnInfoService = columnInfoService;
+        this.navigationService = navigationService;
+        this.expandState = expandState;
+        this.selection = selection;
+        this.columns = [];
+        this.skip = 0;
+        this.noRecordsText = this.localization.get('noRecords');
+        this.isLocked = false;
+        this.lockedColumnsCount = 0;
+        this.totalColumnsCount = 0;
+        this.trackBy = defaultTrackBy;
+        this.rowClass = function () { return null; };
+        this.cellKeydownSubscription = this.navigationService.cellKeydown.subscribe(function (args) { return _this.cellKeydownHandler(args); });
+        this.trackByWrapper = this.trackByWrapper.bind(this);
+        this.trackByColumns = this.trackByColumns.bind(this);
+        this.selection.registerTable(this);
+    }
+    Object.defineProperty(TableBodyComponent.prototype, "newDataItem", {
+        get: function () {
+            return this.editService.newDataItem;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TableBodyComponent.prototype, "unlockedColumnsCount", {
+        // Number of unlocked columns in the next table, if any
+        get: function () {
+            return this.totalColumnsCount - this.lockedColumnsCount - (this.allColumns || this.columns).length;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TableBodyComponent.prototype.isOdd = function (item) {
+        return item.index % 2 !== 0;
+    };
+    TableBodyComponent.prototype.trackByWrapper = function (index, item) {
+        if (item.type === 'data') {
+            item.isEditing = this.editService.isEdited(item.data);
+        }
+        return this.trackBy(index, item);
+    };
+    TableBodyComponent.prototype.trackByColumns = function (index, item) {
+        return this.virtualColumns ? index : item;
+    };
+    TableBodyComponent.prototype.ngOnChanges = function (changes) {
+        if (isChanged("columns", changes, false)) {
+            this.changeNotification.notify();
+        }
+    };
+    TableBodyComponent.prototype.addRowLogicalIndex = function () {
+        return this.columnInfoService.totalLevels + 1;
+    };
+    TableBodyComponent.prototype.logicalColIndex = function (column) {
+        if (!isPresent(column.leafIndex)) {
+            return -1;
+        }
+        return column.leafIndex;
+    };
+    TableBodyComponent.prototype.ariaExpanded = function (item, column) {
+        if (!column.expandable || !item.hasChildren) {
+            return;
+        }
+        return Boolean(item.expanded);
+    };
+    TableBodyComponent.prototype.ariaSelected = function (item, column, columnIndex) {
+        if (!this.selection.enabled) {
+            return;
+        }
+        return item.selected || this.isCellSelected(item.data, column, columnIndex);
+    };
+    TableBodyComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.ngZone.runOutsideAngular(function () {
+            var clickHandler = _this.clickHandler.bind(_this);
+            var mousedownSubscription = _this.renderer.listen(_this.element.nativeElement, 'mousedown', clickHandler);
+            var clickSubscription = _this.renderer.listen(_this.element.nativeElement, 'click', clickHandler);
+            var contextmenuSubscription = _this.renderer.listen(_this.element.nativeElement, 'contextmenu', clickHandler);
+            _this.clickSubscription = function () {
+                mousedownSubscription();
+                clickSubscription();
+                contextmenuSubscription();
+            };
+        });
+        var originalNoRecordText = this.localization.get('noRecords');
+        this.localization.changes.subscribe(function () {
+            if (_this.noRecordsText === originalNoRecordText) {
+                _this.noRecordsText = _this.localization.get('noRecords');
+                originalNoRecordText = _this.noRecordsText;
+            }
+        });
+    };
+    TableBodyComponent.prototype.ngDoCheck = function () {
+        this.headerOffset = this.columnInfoService.totalLevels + (hasFilterRow(this.filterable) ? 1 : 0);
+    };
+    TableBodyComponent.prototype.ngOnDestroy = function () {
+        if (this.clickSubscription) {
+            this.clickSubscription();
+        }
+        this.cellKeydownSubscription.unsubscribe();
+        this.selection.unregisterTable(this);
+        clearTimeout(this.clickTimeout);
+    };
+    TableBodyComponent.prototype.isEditingCell = function (item, column) {
+        return Boolean(item.editContext && this.editService.isEditingColumn(column));
+    };
+    TableBodyComponent.prototype.isEditingRow = function (item) {
+        return Boolean(item.editContext) || item.isNew;
+    };
+    Object.defineProperty(TableBodyComponent.prototype, "columnsContainer", {
+        get: function () {
+            return this.columnInfoService.columnsContainer;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TableBodyComponent.prototype, "hasFooter", {
+        get: function () {
+            return this.columnsContainer.hasFooter;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TableBodyComponent.prototype, "columnsSpan", {
+        get: function () {
+            return columnsSpan(this.columns);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TableBodyComponent.prototype, "allColumnsSpan", {
+        get: function () {
+            return columnsSpan(this.allColumns || this.columns);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TableBodyComponent.prototype, "colSpan", {
+        get: function () {
+            return this.columnsSpan;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TableBodyComponent.prototype, "footerColumns", {
+        get: function () {
+            return this.isLocked ? this.columnsContainer.lockedColumnsToRender : this.columnsContainer.nonLockedColumnsToRender;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TableBodyComponent.prototype.logicalRowIndex = function (rowIndex) {
+        return 1 + rowIndex + this.headerOffset;
+    };
+    TableBodyComponent.prototype.isCellSelected = function (dataItem, column, columnIndex) {
+        return this.selection.isCellSelected(dataItem, column, columnIndex);
+    };
+    TableBodyComponent.prototype.targetArgs = function (target, skipFocusable) {
+        var _a = this.targetElements(target), cell = _a.cell, row = _a.row;
+        if (cell && (!skipFocusable || target === cell || !isFocusableWithTabKey(target, false))) {
+            var index = columnCellIndex(cell, row.cells);
+            var column = this.columns.toArray()[index];
+            var columnIndex = this.lockedColumnsCount + index;
+            return {
+                item: this.rowItem(row),
+                column: column,
+                columnIndex: columnIndex
+            };
+        }
+    };
+    TableBodyComponent.prototype.clickHandler = function (eventArg) {
+        var _this = this;
+        var target = eventArg.target;
+        var _a = this.targetElements(target), cell = _a.cell, row = _a.row;
+        if (cell && !hasClasses(cell, NON_DATA_CELL_CLASSES) &&
+            !hasClasses(row, NON_DATA_ROW_CLASSES)) {
+            if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg)) {
+                return;
+            }
+            this.editService.preventCellClose();
+            var focusable = target !== cell && isFocusableWithTabKey(target, false);
+            if (!focusable && !matchesNodeName('label')(target) && !hasClasses(target, IGNORE_TARGET_CLASSSES) &&
+                !closestInScope(target, matchesClasses(IGNORE_CONTAINER_CLASSES), cell)) {
+                var args_1 = this.cellClickArgs(cell, row, eventArg);
+                if (!args_1) {
+                    return;
+                }
+                if (eventArg.type === 'mousedown') {
+                    this.domEvents.cellMousedown.emit(args_1);
+                }
+                else {
+                    if (args_1.isEditedColumn || !this.editService.closeCell(eventArg)) {
+                        if (eventArg.type === 'click') {
+                            this.clickTimeout = setTimeout(function () {
+                                _this.emitCellClick(args_1);
+                            }, 0);
+                        }
+                        else {
+                            this.emitCellClick(args_1);
+                        }
+                    }
+                }
+            }
+        }
+    };
+    TableBodyComponent.prototype.emitCellClick = function (args) {
+        this.domEvents.cellClick.emit(args);
+    };
+    TableBodyComponent.prototype.cellKeydownHandler = function (args) {
+        if (args.keyCode === Keys.Enter) {
+            this.clickHandler(args);
+        }
+    };
+    TableBodyComponent.prototype.cellClickArgs = function (cell, row, eventArg) {
+        var index = columnCellIndex(cell, row.cells);
+        var column = this.columns.toArray()[index];
+        var columnIndex = this.lockedColumnsCount + index;
+        var viewItem = this.rowItem(row);
+        if (viewItem.type !== 'data') {
+            return;
+        }
+        var type = eventArg.type === 'keydown' ? 'click' : eventArg.type;
+        return {
+            column: column,
+            columnIndex: columnIndex,
+            viewItem: viewItem,
+            dataItem: viewItem.data,
+            rowIndex: viewItem.index,
+            index: viewItem.index,
+            isEditedColumn: (viewItem.editContext && this.editService.isEditingColumn(column)),
+            isEdited: viewItem.isNew || (viewItem.editContext && this.editService.isEditedColumn(column)),
+            originalEvent: eventArg,
+            type: type
+        };
+    };
+    TableBodyComponent.prototype.targetElements = function (target) {
+        var element = this.element.nativeElement;
+        var cell, row, body, treelistElement;
+        var currentTarget = target;
+        do {
+            cell = closest(currentTarget, matchesNodeName('td'));
+            row = closest(cell, matchesNodeName('tr'));
+            body = closest(row, matchesNodeName('tbody'));
+            currentTarget = body;
+            treelistElement = closestInScope(currentTarget, matchesClasses('k-treelist k-grid'), element);
+        } while (body && body !== element && !treelistElement);
+        if (cell && body === element && !treelistElement) {
+            return {
+                cell: cell,
+                row: row
+            };
+        }
+        return {};
+    };
+    TableBodyComponent.prototype.expandClick = function (eventArg, row) {
+        var _this = this;
+        if (eventArg.type === 'click' && hasClasses(eventArg.target, 'k-i-expand k-i-collapse')) {
+            eventArg.preventDefault();
+            var viewItem_1 = this.rowItem(row);
+            if (viewItem_1.type === 'data') {
+                this.ngZone.run(function () {
+                    _this.expandState.toggleState(viewItem_1.data);
+                });
+                return true;
+            }
+        }
+    };
+    TableBodyComponent.prototype.checkboxClick = function (cell, row, eventArg) {
+        if (eventArg.type === 'click' && hasClasses(cell, 'k-checkbox-cell') &&
+            this.selection.enabled && this.selection.rowSelection) {
+            var args = this.cellClickArgs(cell, row, eventArg);
+            this.selection.checkboxClick(args);
+            if (eventArg.target.checked !== this.selection.isRowSelected(args.dataItem)) {
+                eventArg.preventDefault();
+            }
+            return true;
+        }
+    };
+    TableBodyComponent.prototype.rowItem = function (row) {
+        var viewIndex = row.getAttribute('data-treelist-view-index');
+        viewIndex = viewIndex ? parseInt(viewIndex, 10) : -1;
+        var viewItem = this.view.at(viewIndex);
+        return viewItem;
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], TableBodyComponent.prototype, "columns", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], TableBodyComponent.prototype, "allColumns", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", NoRecordsTemplateDirective)
+    ], TableBodyComponent.prototype, "noRecordsTemplate", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], TableBodyComponent.prototype, "view", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], TableBodyComponent.prototype, "skip", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], TableBodyComponent.prototype, "filterable", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], TableBodyComponent.prototype, "noRecordsText", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], TableBodyComponent.prototype, "isLocked", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], TableBodyComponent.prototype, "lockedColumnsCount", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], TableBodyComponent.prototype, "totalColumnsCount", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], TableBodyComponent.prototype, "virtualColumns", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], TableBodyComponent.prototype, "expandIcons", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], TableBodyComponent.prototype, "trackBy", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Function)
+    ], TableBodyComponent.prototype, "rowClass", void 0);
+    TableBodyComponent = tslib_1.__decorate([
+        Component({
+            selector: '[kendoTreeListTableBody]',
+            template: "\n    <tr *ngIf=\"!view || view.data?.length === 0 || view.data == null\" class=\"k-grid-norecords\">\n        <td [attr.colspan]=\"colSpan\">\n            <ng-container *ngIf=\"noRecordsTemplate?.templateRef\" [ngTemplateOutlet]=\"noRecordsTemplate.templateRef\">\n            </ng-container>\n            <ng-container *ngIf=\"!noRecordsTemplate?.templateRef\">\n                {{noRecordsText}}\n            </ng-container>\n        </td>\n    </tr>\n    <ng-container *ngFor=\"let item of view?.data;let rowIndex = index;trackBy: trackByWrapper;\">\n        <tr *ngIf=\"item.type === 'data'\"\n            kendoTreeListLogicalRow\n                [dataRowIndex]=\"item.index\"\n                [dataItem]=\"item.data\"\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n                [isNew]=\"item.isNew\"\n            [ngClass]=\"rowClass({ dataItem: item.data, index: item.index })\"\n            [class.k-alt]=\"isOdd(item)\"\n            [class.k-grid-edit-row]=\"isEditingRow(item)\"\n            [class.k-grid-add-row]=\"item.isNew\"\n            [class.k-state-selected]=\"item.selected\"\n            [attr.data-treelist-view-index]=\"rowIndex\">\n\n            <td kendoTreeListCell\n                    [columnIndex]=\"lockedColumnsCount + columnIndex\"\n                    [column]=\"column\"\n                    [viewItem]=\"item\"\n                    [dataItem]=\"item.data\"\n                    [level]=\"item.level\"\n                    [hasChildren]=\"item.hasChildren\"\n                    [isExpanded]=\"item.expanded\"\n                    [loading]=\"item.loading\"\n                    [isNew]=\"item.isNew\"\n                    [selected]=\"item.selected\"\n                    [expandIcons]=\"expandIcons\"\n                kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [dataRowIndex]=\"item.index\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                    [colSpan]=\"column.colspan\"\n                    [expandable]=\"column.expandable\"\n                    role=\"gridcell\"\n                    [attr.aria-expanded]=\"ariaExpanded(item, column)\"\n                    [attr.aria-selected]=\"ariaSelected(item, column, lockedColumnsCount + columnIndex)\"\n                [ngClass]=\"column.cssClass\"\n                [class.k-grid-edit-cell]=\"isEditingCell(item, column)\"\n                [class.k-state-selected]=\"isCellSelected(item.data, column, lockedColumnsCount + columnIndex)\"\n                [ngStyle]=\"column.style\"\n                [attr.colspan]=\"column.colspan\"\n                *ngFor=\"let column of columns; let columnIndex = index; trackBy: trackByColumns;\">\n            </td>\n        </tr>\n        <tr *ngIf=\"item.type === 'footer' && hasFooter\"\n            class=\"k-footer\"\n            [attr.data-treelist-view-index]=\"rowIndex\"\n            kendoTreeListLogicalRow\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n\n            <td kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                [ngClass]=\"column.footerClass\"\n                [ngStyle]=\"column.footerStyle\"\n                *ngFor=\"let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of item.level | levelItems\"></span>\n                </ng-container>\n                <ng-container [ngTemplateOutlet]=\"column.footerTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        items: item.items,\n                        field: column.field,\n                        column: column,\n                        columnIndex: columnIndex,\n                        aggregates: item.aggregates,\n                        $implicit: item.aggregates\n                    }\">\n                </ng-container>\n           </td>\n        </tr>\n    </ng-container>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [ChangeNotificationService,
+            EditService,
+            LocalizationService,
+            NgZone,
+            Renderer2,
+            ElementRef,
+            DomEventsService,
+            ColumnInfoService,
+            NavigationService,
+            ExpandStateService,
+            SelectionService])
+    ], TableBodyComponent);
+    return TableBodyComponent;
+}());
+export { TableBodyComponent };
+export { ɵ0 };

package/dist/es/rendering/toolbar/toolbar-template.directive.js

@@ -0,0 +1,62 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, TemplateRef, Optional, Input } from '@angular/core';
+import { OptionChangesService } from '../../common/option-changes.service';
+/**
+ * Represents the toolbar template of the TreeList.
+ *
+ * The template context has the following field:
+ * - `position`—The position at which the toolbar template is rendered. The possible values are "top" and "bottom".
+ *
+ * @example
+ * {% meta height:470 %}
+ * {% embed_file configuration/toolbar-template/basic/app.component.ts preview %}
+ * {% embed_file configuration/toolbar-template/basic/app.module.ts %}
+ * {% embed_file shared/main.ts %}
+ * {% embed_file shared/employees.ts %}
+ * {% endmeta %}
+ */
+var ToolbarTemplateDirective = /** @class */ (function () {
+    function ToolbarTemplateDirective(templateRef, optionChanges) {
+        this.templateRef = templateRef;
+        this.optionChanges = optionChanges;
+        this._position = "top";
+    }
+    Object.defineProperty(ToolbarTemplateDirective.prototype, "position", {
+        get: function () {
+            return this._position;
+        },
+        /**
+         * The position of the toolbar ([see example]({% slug toolbartemplate_treelist %})).
+         *
+         * The possible values are:
+         * - `top`—Positions the toolbar above the group panel or header.
+         * - `bottom`—Positions the toolbar below the pager.
+         * - `both`—Displays two toolbar instances. Positions the first one above
+         * the group panel or header and the second one below the pager.
+         */
+        set: function (position) {
+            this._position = position;
+            this.optionChanges.optionChanged();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    tslib_1.__decorate([
+        Input("position"),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ToolbarTemplateDirective.prototype, "position", null);
+    ToolbarTemplateDirective = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoTreeListToolbarTemplate]'
+        }),
+        tslib_1.__param(0, Optional()),
+        tslib_1.__metadata("design:paramtypes", [TemplateRef, OptionChangesService])
+    ], ToolbarTemplateDirective);
+    return ToolbarTemplateDirective;
+}());
+export { ToolbarTemplateDirective };

package/dist/es/rendering/toolbar/toolbar.component.js

@@ -0,0 +1,49 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, HostBinding, Input } from '@angular/core';
+import { TreeListComponent } from "../../treelist.component";
+/**
+ * @hidden
+ */
+var ToolbarComponent = /** @class */ (function () {
+    function ToolbarComponent(treelist) {
+        this.treelist = treelist;
+        this.classNames = 'k-toolbar k-grid-toolbar';
+        this.context = {};
+    }
+    Object.defineProperty(ToolbarComponent.prototype, "position", {
+        set: function (value) {
+            this.context.position = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ToolbarComponent.prototype, "toolbarTemplateRef", {
+        get: function () {
+            return this.treelist.toolbarTemplate ? this.treelist.toolbarTemplate.templateRef : undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    tslib_1.__decorate([
+        HostBinding('class'),
+        tslib_1.__metadata("design:type", String)
+    ], ToolbarComponent.prototype, "classNames", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ToolbarComponent.prototype, "position", null);
+    ToolbarComponent = tslib_1.__decorate([
+        Component({
+            selector: 'kendo-treelist-toolbar',
+            template: "\n        <ng-template\n            *ngIf=\"toolbarTemplateRef\"\n            [ngTemplateOutlet]=\"toolbarTemplateRef\"\n            [ngTemplateOutletContext]=\"context\"\n            >\n        </ng-template>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [TreeListComponent])
+    ], ToolbarComponent);
+    return ToolbarComponent;
+}());
+export { ToolbarComponent };

package/dist/es/scrolling/content-scroll-event.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/scrolling/row-height.service.js

@@ -0,0 +1,31 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+var RowHeightService = /** @class */ (function () {
+    function RowHeightService(total, rowHeight) {
+        if (total === void 0) { total = 0; }
+        this.total = total;
+        this.rowHeight = rowHeight;
+        this.rowHeight = rowHeight || 0;
+    }
+    RowHeightService.prototype.index = function (position) {
+        if (position < 0) {
+            return undefined;
+        }
+        return Math.min(Math.floor(position / this.rowHeight), this.total - 1);
+    };
+    RowHeightService.prototype.offset = function (rowIndex) {
+        if (0 <= rowIndex && rowIndex < this.total) {
+            return rowIndex * this.rowHeight;
+        }
+    };
+    RowHeightService.prototype.totalHeight = function () {
+        return this.total * this.rowHeight;
+    };
+    return RowHeightService;
+}());
+export { RowHeightService };

package/dist/es/scrolling/scroll-bottom-event.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/scrolling/scroll-request.service.js

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+/**
+ * @hidden
+ */
+var ScrollRequestService = /** @class */ (function () {
+    function ScrollRequestService() {
+        this.requests = new Subject();
+    }
+    ScrollRequestService.prototype.scrollTo = function (request) {
+        this.requests.next(request);
+    };
+    ScrollRequestService = tslib_1.__decorate([
+        Injectable()
+    ], ScrollRequestService);
+    return ScrollRequestService;
+}());
+export { ScrollRequestService };