@progress/kendo-angular-treelist 4.0.6-dev.202203090952 → 5.0.0-dev.202204191050

package/esm2015/rendering/no-records-template.directive.js

@@ -0,0 +1,35 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional } from '@angular/core';
+import * as i0 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 %}
+ */
+export class NoRecordsTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+NoRecordsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NoRecordsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+NoRecordsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NoRecordsTemplateDirective, selector: "[kendoTreeListNoRecordsTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NoRecordsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListNoRecordsTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2015/rendering/table-body.component.js

@@ -0,0 +1,524 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { isChanged, isPresent } from '../utils';
+import { columnsSpan } from "../columns/column-common";
+import { closest, closestInScope, hasClasses, isFocusableWithTabKey, matchesClasses, matchesNodeName } from './common/dom-queries';
+import { hasFilterRow } from '../filtering/filterable';
+import { Keys } from '@progress/kendo-angular-common';
+import { defaultTrackBy } from '../common/default-track-by';
+import { NON_DATA_CELL_CLASSES, NON_DATA_ROW_CLASSES, IGNORE_CONTAINER_CLASSES, ICON_CLASS, EMPTY_ICON_CLASS } from './constants';
+import * as i0 from "@angular/core";
+import * as i1 from "../data/change-notification.service";
+import * as i2 from "../editing/edit.service";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "../common/dom-events.service";
+import * as i5 from "../common/column-info.service";
+import * as i6 from "../navigation/navigation.service";
+import * as i7 from "../expand-state/expand-state.service";
+import * as i8 from "../selection/selection.service";
+import * as i9 from "./cell.component";
+import * as i10 from "@angular/common";
+import * as i11 from "../navigation/logical-row.directive";
+import * as i12 from "../navigation/logical-cell.directive";
+import * as i13 from "./common/level-items.pipe";
+const columnCellIndex = (cell, cells) => {
+    for (let idx = 0; idx < cells.length; idx++) {
+        if (cells[idx] === cell) {
+            return idx;
+        }
+    }
+};
+/**
+ * @hidden
+ */
+export class TableBodyComponent {
+    constructor(changeNotification, editService, localization, ngZone, renderer, element, domEvents, columnInfoService, navigationService, expandState, selection) {
+        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 = () => null;
+        this.cellKeydownSubscription = this.navigationService.cellKeydown.subscribe((args) => this.cellKeydownHandler(args));
+        this.trackByWrapper = this.trackByWrapper.bind(this);
+        this.trackByColumns = this.trackByColumns.bind(this);
+        this.selection.registerTable(this);
+    }
+    get newDataItem() {
+        return this.editService.newDataItem;
+    }
+    // Number of unlocked columns in the next table, if any
+    get unlockedColumnsCount() {
+        return this.totalColumnsCount - this.lockedColumnsCount - (this.allColumns || this.columns).length;
+    }
+    get hasData() {
+        const view = this.view;
+        return view && view.data !== null && view.data !== undefined && view.data.length > 0;
+    }
+    isOdd(item) {
+        return item.index % 2 !== 0;
+    }
+    trackByWrapper(index, item) {
+        if (item.type === 'data') {
+            item.isEditing = this.editService.isEdited(item.data);
+        }
+        return this.trackBy(index, item);
+    }
+    trackByColumns(index, item) {
+        return this.virtualColumns ? index : item;
+    }
+    ngOnChanges(changes) {
+        if (isChanged("columns", changes, false)) {
+            this.changeNotification.notify();
+        }
+    }
+    addRowLogicalIndex() {
+        return this.columnInfoService.totalLevels + 1;
+    }
+    logicalColIndex(column) {
+        if (!isPresent(column.leafIndex)) {
+            return -1;
+        }
+        return column.leafIndex;
+    }
+    ariaExpanded(item, column) {
+        if (!column.expandable || !item.hasChildren) {
+            return;
+        }
+        return Boolean(item.expanded);
+    }
+    ariaSelected(item, column, columnIndex) {
+        if (!this.selection.enabled) {
+            return;
+        }
+        return item.selected || this.isCellSelected(item.data, column, columnIndex);
+    }
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            const clickHandler = this.clickHandler.bind(this);
+            const mousedownSubscription = this.renderer.listen(this.element.nativeElement, 'mousedown', clickHandler);
+            const clickSubscription = this.renderer.listen(this.element.nativeElement, 'click', clickHandler);
+            const contextmenuSubscription = this.renderer.listen(this.element.nativeElement, 'contextmenu', clickHandler);
+            this.clickSubscription = () => {
+                mousedownSubscription();
+                clickSubscription();
+                contextmenuSubscription();
+            };
+        });
+        let originalNoRecordText = this.localization.get('noRecords');
+        this.localization.changes.subscribe(() => {
+            if (this.noRecordsText === originalNoRecordText) {
+                this.noRecordsText = this.localization.get('noRecords');
+                originalNoRecordText = this.noRecordsText;
+            }
+        });
+    }
+    ngDoCheck() {
+        this.headerOffset = this.columnInfoService.totalLevels + (hasFilterRow(this.filterable) ? 1 : 0);
+    }
+    ngOnDestroy() {
+        if (this.clickSubscription) {
+            this.clickSubscription();
+        }
+        this.cellKeydownSubscription.unsubscribe();
+        this.selection.unregisterTable(this);
+        clearTimeout(this.clickTimeout);
+    }
+    isEditingCell(item, column) {
+        return Boolean(item.editContext && this.editService.isEditingColumn(column));
+    }
+    isEditingRow(item) {
+        return Boolean(item.editContext) || item.isNew;
+    }
+    get columnsContainer() {
+        return this.columnInfoService.columnsContainer;
+    }
+    get hasFooter() {
+        return this.columnsContainer.hasFooter;
+    }
+    get columnsSpan() {
+        return columnsSpan(this.columns);
+    }
+    get allColumnsSpan() {
+        return columnsSpan(this.allColumns || this.columns);
+    }
+    get colSpan() {
+        return this.columnsSpan;
+    }
+    get footerColumns() {
+        return this.isLocked ? this.columnsContainer.lockedColumnsToRender : this.columnsContainer.nonLockedColumnsToRender;
+    }
+    logicalRowIndex(rowIndex) {
+        return 1 + rowIndex + this.headerOffset;
+    }
+    isCellSelected(dataItem, column, columnIndex) {
+        return this.selection.isCellSelected(dataItem, column, columnIndex);
+    }
+    targetArgs(target, skipFocusable) {
+        const { cell, row } = this.targetElements(target);
+        if (cell && (!skipFocusable || target === cell || !isFocusableWithTabKey(target, false))) {
+            const index = columnCellIndex(cell, row.cells);
+            const column = this.columns.toArray()[index];
+            const columnIndex = this.lockedColumnsCount + index;
+            return {
+                item: this.rowItem(row),
+                column: column,
+                columnIndex: columnIndex
+            };
+        }
+    }
+    checkIfClickable(target, cell) {
+        return !matchesNodeName('label')(target) &&
+            (!hasClasses(target, ICON_CLASS) || hasClasses(target, EMPTY_ICON_CLASS)) &&
+            !closestInScope(target, matchesClasses(IGNORE_CONTAINER_CLASSES), cell);
+    }
+    clickHandler(eventArg) {
+        const target = eventArg.target;
+        const { cell, row } = this.targetElements(target);
+        if (cell && !hasClasses(cell, NON_DATA_CELL_CLASSES) &&
+            !hasClasses(row, NON_DATA_ROW_CLASSES)) {
+            if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg)) {
+                return;
+            }
+            this.editService.preventCellClose();
+            const focusable = target !== cell && isFocusableWithTabKey(target, false);
+            const targetClickable = this.checkIfClickable(target, cell);
+            if (!focusable && targetClickable) {
+                const args = this.cellClickArgs(cell, row, eventArg);
+                if (!args) {
+                    return;
+                }
+                if (eventArg.type === 'mousedown') {
+                    this.domEvents.cellMousedown.emit(args);
+                }
+                else {
+                    if (args.isEditedColumn || !this.editService.closeCell(eventArg)) {
+                        if (eventArg.type === 'click') {
+                            this.clickTimeout = setTimeout(() => {
+                                this.emitCellClick(args);
+                            }, 0);
+                        }
+                        else {
+                            this.emitCellClick(args);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    emitCellClick(args) {
+        this.domEvents.cellClick.emit(args);
+    }
+    cellKeydownHandler(args) {
+        if (args.keyCode === Keys.Enter) {
+            this.clickHandler(args);
+        }
+    }
+    cellClickArgs(cell, row, eventArg) {
+        const index = columnCellIndex(cell, row.cells);
+        const column = this.columns.toArray()[index];
+        const columnIndex = this.lockedColumnsCount + index;
+        const viewItem = this.rowItem(row);
+        if (viewItem.type !== 'data') {
+            return;
+        }
+        const 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
+        };
+    }
+    targetElements(target) {
+        const element = this.element.nativeElement;
+        let cell, row, body, treelistElement;
+        let 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,
+                row
+            };
+        }
+        return {};
+    }
+    expandClick(eventArg, row) {
+        if (eventArg.type === 'click' && hasClasses(eventArg.target, 'k-i-expand k-i-collapse')) {
+            eventArg.preventDefault();
+            const viewItem = this.rowItem(row);
+            if (viewItem.type === 'data') {
+                this.ngZone.run(() => {
+                    this.expandState.toggleState(viewItem.data);
+                });
+                return true;
+            }
+        }
+    }
+    checkboxClick(cell, row, eventArg) {
+        if (eventArg.type === 'click' && hasClasses(cell, 'k-checkbox-cell') &&
+            this.selection.enabled && this.selection.rowSelection) {
+            const args = this.cellClickArgs(cell, row, eventArg);
+            this.selection.checkboxClick(args);
+            if (eventArg.target.checked !== this.selection.isRowSelected(args.dataItem)) {
+                eventArg.preventDefault();
+            }
+            return true;
+        }
+    }
+    rowItem(row) {
+        let viewIndex = row.getAttribute('data-treelist-view-index');
+        viewIndex = viewIndex ? parseInt(viewIndex, 10) : -1;
+        const viewItem = this.view.at(viewIndex);
+        return viewItem;
+    }
+}
+TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TableBodyComponent, deps: [{ token: i1.ChangeNotificationService }, { token: i2.EditService }, { token: i3.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i4.DomEventsService }, { token: i5.ColumnInfoService }, { token: i6.NavigationService }, { token: i7.ExpandStateService }, { token: i8.SelectionService }], target: i0.ɵɵFactoryTarget.Component });
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: { columns: "columns", allColumns: "allColumns", noRecordsTemplate: "noRecordsTemplate", view: "view", skip: "skip", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", expandIcons: "expandIcons", trackBy: "trackBy", rowClass: "rowClass" }, usesOnChanges: true, ngImport: i0, template: `
+    <tr *ngIf="!hasData" class="k-grid-norecords">
+        <td [attr.colspan]="colSpan">
+            <ng-container *ngIf="noRecordsTemplate?.templateRef" [ngTemplateOutlet]="noRecordsTemplate.templateRef">
+            </ng-container>
+            <ng-container *ngIf="!noRecordsTemplate?.templateRef">
+                {{noRecordsText}}
+            </ng-container>
+        </td>
+    </tr>
+    <ng-container *ngFor="let item of view?.data;let rowIndex = index;trackBy: trackByWrapper;">
+        <tr *ngIf="item.type === 'data'"
+            kendoTreeListLogicalRow
+                [dataRowIndex]="$any(item).index"
+                [dataItem]="item.data"
+                [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
+                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalCellsCount]="columns.length"
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [isNew]="item.isNew"
+            [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
+            [class.k-alt]="isOdd(item)"
+            [class.k-grid-edit-row]="isEditingRow(item)"
+            [class.k-grid-add-row]="item.isNew"
+            [class.k-state-selected]="item.selected"
+            [attr.data-treelist-view-index]="rowIndex">
+
+            <td kendoTreeListCell
+                    [columnIndex]="lockedColumnsCount + columnIndex"
+                    [column]="column"
+                    [viewItem]="item"
+                    [dataItem]="item.data"
+                    [level]="item.level"
+                    [hasChildren]="item.hasChildren"
+                    [isExpanded]="item.expanded"
+                    [loading]="item.loading"
+                    [isNew]="item.isNew"
+                    [selected]="item.selected"
+                    [expandIcons]="expandIcons"
+                kendoTreeListLogicalCell
+                    [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
+                    [logicalColIndex]="logicalColIndex(column)"
+                    [dataRowIndex]="$any(item).index"
+                    [column]="column"
+                    [colIndex]="columnIndex"
+                    [colSpan]="column.colspan"
+                    [expandable]="$any(column).expandable"
+                    role="gridcell"
+                    [attr.aria-expanded]="ariaExpanded(item, column)"
+                    [attr.aria-selected]="ariaSelected(item, column, lockedColumnsCount + columnIndex)"
+                [ngClass]="column.cssClass"
+                [class.k-grid-edit-cell]="isEditingCell(item, column)"
+                [class.k-state-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
+                [ngStyle]="column.style"
+                [attr.colspan]="column.colspan"
+                *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
+            </td>
+        </tr>
+        <tr *ngIf="item.type === 'footer' && hasFooter"
+            class="k-footer"
+            [attr.data-treelist-view-index]="rowIndex"
+            kendoTreeListLogicalRow
+                [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
+                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalCellsCount]="columns.length"
+                [logicalSlaveCellsCount]="unlockedColumnsCount">
+
+            <td kendoTreeListLogicalCell
+                    [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
+                    [logicalColIndex]="logicalColIndex(column)"
+                    [column]="column"
+                    [colIndex]="columnIndex"
+                [ngClass]="column.footerClass"
+                [ngStyle]="column.footerStyle"
+                *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
+                <ng-container *ngIf="$any(column).expandable">
+                    <span class="k-icon k-i-none" *ngFor="let item of item.level | levelItems"></span>
+                </ng-container>
+                <ng-container [ngTemplateOutlet]="column.footerTemplateRef"
+                    [ngTemplateOutletContext]="{
+                        $implicit: item.aggregates,
+                        aggregates: item.aggregates,
+                        column: column,
+                        columnIndex: columnIndex,
+                        field: $any(column).field,
+                        items: item.items,
+                        parentItem: item.parentItem
+                    }">
+                </ng-container>
+           </td>
+        </tr>
+    </ng-container>
+    `, isInline: true, components: [{ type: i9.CellComponent, selector: "[kendoTreeListCell]", inputs: ["column", "columnIndex", "isNew", "level", "hasChildren", "isExpanded", "loading", "expandIcons", "selected", "dataItem", "viewItem"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "levelItems": i13.LevelItemsPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TableBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoTreeListTableBody]',
+                    template: `
+    <tr *ngIf="!hasData" class="k-grid-norecords">
+        <td [attr.colspan]="colSpan">
+            <ng-container *ngIf="noRecordsTemplate?.templateRef" [ngTemplateOutlet]="noRecordsTemplate.templateRef">
+            </ng-container>
+            <ng-container *ngIf="!noRecordsTemplate?.templateRef">
+                {{noRecordsText}}
+            </ng-container>
+        </td>
+    </tr>
+    <ng-container *ngFor="let item of view?.data;let rowIndex = index;trackBy: trackByWrapper;">
+        <tr *ngIf="item.type === 'data'"
+            kendoTreeListLogicalRow
+                [dataRowIndex]="$any(item).index"
+                [dataItem]="item.data"
+                [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
+                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalCellsCount]="columns.length"
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [isNew]="item.isNew"
+            [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
+            [class.k-alt]="isOdd(item)"
+            [class.k-grid-edit-row]="isEditingRow(item)"
+            [class.k-grid-add-row]="item.isNew"
+            [class.k-state-selected]="item.selected"
+            [attr.data-treelist-view-index]="rowIndex">
+
+            <td kendoTreeListCell
+                    [columnIndex]="lockedColumnsCount + columnIndex"
+                    [column]="column"
+                    [viewItem]="item"
+                    [dataItem]="item.data"
+                    [level]="item.level"
+                    [hasChildren]="item.hasChildren"
+                    [isExpanded]="item.expanded"
+                    [loading]="item.loading"
+                    [isNew]="item.isNew"
+                    [selected]="item.selected"
+                    [expandIcons]="expandIcons"
+                kendoTreeListLogicalCell
+                    [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
+                    [logicalColIndex]="logicalColIndex(column)"
+                    [dataRowIndex]="$any(item).index"
+                    [column]="column"
+                    [colIndex]="columnIndex"
+                    [colSpan]="column.colspan"
+                    [expandable]="$any(column).expandable"
+                    role="gridcell"
+                    [attr.aria-expanded]="ariaExpanded(item, column)"
+                    [attr.aria-selected]="ariaSelected(item, column, lockedColumnsCount + columnIndex)"
+                [ngClass]="column.cssClass"
+                [class.k-grid-edit-cell]="isEditingCell(item, column)"
+                [class.k-state-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
+                [ngStyle]="column.style"
+                [attr.colspan]="column.colspan"
+                *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
+            </td>
+        </tr>
+        <tr *ngIf="item.type === 'footer' && hasFooter"
+            class="k-footer"
+            [attr.data-treelist-view-index]="rowIndex"
+            kendoTreeListLogicalRow
+                [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
+                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalCellsCount]="columns.length"
+                [logicalSlaveCellsCount]="unlockedColumnsCount">
+
+            <td kendoTreeListLogicalCell
+                    [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
+                    [logicalColIndex]="logicalColIndex(column)"
+                    [column]="column"
+                    [colIndex]="columnIndex"
+                [ngClass]="column.footerClass"
+                [ngStyle]="column.footerStyle"
+                *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
+                <ng-container *ngIf="$any(column).expandable">
+                    <span class="k-icon k-i-none" *ngFor="let item of item.level | levelItems"></span>
+                </ng-container>
+                <ng-container [ngTemplateOutlet]="column.footerTemplateRef"
+                    [ngTemplateOutletContext]="{
+                        $implicit: item.aggregates,
+                        aggregates: item.aggregates,
+                        column: column,
+                        columnIndex: columnIndex,
+                        field: $any(column).field,
+                        items: item.items,
+                        parentItem: item.parentItem
+                    }">
+                </ng-container>
+           </td>
+        </tr>
+    </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ChangeNotificationService }, { type: i2.EditService }, { type: i3.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i4.DomEventsService }, { type: i5.ColumnInfoService }, { type: i6.NavigationService }, { type: i7.ExpandStateService }, { type: i8.SelectionService }]; }, propDecorators: { columns: [{
+                type: Input
+            }], allColumns: [{
+                type: Input
+            }], noRecordsTemplate: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], skip: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], noRecordsText: [{
+                type: Input
+            }], isLocked: [{
+                type: Input
+            }], lockedColumnsCount: [{
+                type: Input
+            }], totalColumnsCount: [{
+                type: Input
+            }], virtualColumns: [{
+                type: Input
+            }], expandIcons: [{
+                type: Input
+            }], trackBy: [{
+                type: Input
+            }], rowClass: [{
+                type: Input
+            }] } });

package/esm2015/rendering/toolbar/toolbar-template.directive.js

@@ -0,0 +1,57 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 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 %}
+ */
+export class ToolbarTemplateDirective {
+    constructor(templateRef, optionChanges) {
+        this.templateRef = templateRef;
+        this.optionChanges = optionChanges;
+        this._position = "top";
+    }
+    /**
+     * 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 position(position) {
+        this._position = position;
+        this.optionChanges.optionChanged();
+    }
+    get position() {
+        return this._position;
+    }
+}
+ToolbarTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }, { token: i1.OptionChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+ToolbarTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ToolbarTemplateDirective, selector: "[kendoTreeListToolbarTemplate]", inputs: { position: "position" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListToolbarTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }, { type: i1.OptionChangesService }]; }, propDecorators: { position: [{
+                type: Input,
+                args: ["position"]
+            }] } });

package/esm2015/rendering/toolbar/toolbar.component.js

@@ -0,0 +1,52 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "./../../common/provider.service";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ToolbarComponent {
+    constructor(ctx) {
+        this.ctx = ctx;
+        this.classNames = 'k-toolbar k-grid-toolbar';
+        this.context = {};
+    }
+    set position(value) {
+        this.context.position = value;
+    }
+    get toolbarTemplateRef() {
+        return this.ctx.treelist.toolbarTemplate ? this.ctx.treelist.toolbarTemplate.templateRef : undefined;
+    }
+}
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: { position: "position" }, host: { properties: { "class": "this.classNames" } }, ngImport: i0, template: `
+        <ng-template
+            *ngIf="toolbarTemplateRef"
+            [ngTemplateOutlet]="toolbarTemplateRef"
+            [ngTemplateOutletContext]="context"
+            >
+        </ng-template>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-toolbar',
+                    template: `
+        <ng-template
+            *ngIf="toolbarTemplateRef"
+            [ngTemplateOutlet]="toolbarTemplateRef"
+            [ngTemplateOutletContext]="context"
+            >
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { classNames: [{
+                type: HostBinding,
+                args: ['class']
+            }], position: [{
+                type: Input
+            }] } });