@progress/kendo-angular-treelist 3.1.5-dev.202112091351 → 4.0.0-dev.202201191257

package/dist/es2015/navigation/focusable.directive.d.ts

@@ -14,7 +14,7 @@ import { FocusableElement } from './focusable-element.interface';
  * ```ts-no-run
  * <kendo-treelist-column>
  *   <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *     <input type="button" class="k-button" [kendoTreeListFocusable]="cellContext" value="Focus me!" />
+ *     <input type="button" kendoButton [kendoTreeListFocusable]="cellContext" value="Focus me!" />
  *   </ng-template>
  * </kendo-treelist-column>
  * ```

package/dist/es2015/navigation/focusable.directive.js

@@ -15,7 +15,7 @@ import { FocusGroup } from './focus-group';
  * ```ts-no-run
  * <kendo-treelist-column>
  *   <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *     <input type="button" class="k-button" [kendoTreeListFocusable]="cellContext" value="Focus me!" />
+ *     <input type="button" kendoButton [kendoTreeListFocusable]="cellContext" value="Focus me!" />
  *   </ng-template>
  * </kendo-treelist-column>
  * ```

package/dist/es2015/navigation/logical-cell.directive.js

@@ -94,11 +94,11 @@ let LogicalCellDirective = class LogicalCellDirective {
                 if (!this.logicalSlaveCell && this.navigationService.autoFocusCell(this.logicalColIndex, this.logicalColIndex + this.colSpan - 1)) {
                     this.microtask(() => this.isFocused() && el.focus());
                 }
-                this.renderer.addClass(el, 'k-state-focused');
+                this.renderer.addClass(el, 'k-focus');
             }
         }
         else {
-            this.renderer.removeClass(el, 'k-state-focused');
+            this.renderer.removeClass(el, 'k-focus');
         }
     }
     microtask(callback) {

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639057446,
+    publishDate: 1642596626,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es2015/pager/pager-next-buttons.component.js

@@ -44,7 +44,7 @@ PagerNextButtonsComponent = tslib_1.__decorate([
             [ngClass]="{
                 'k-link': true,
                 'k-pager-nav': true,
-                'k-state-disabled': disabled,
+                'k-disabled': disabled,
                 '': true
             }">
             <span [attr.aria-label]="textFor('pagerNextPage')"
@@ -61,7 +61,7 @@ PagerNextButtonsComponent = tslib_1.__decorate([
             [ngClass]="{
                 'k-link': true,
                 'k-pager-nav': true,
-                'k-state-disabled': disabled,
+                'k-disabled': disabled,
                 'k-pager-last': true
             }">
             <span [attr.aria-label]="textFor('pagerLastPage')"

package/dist/es2015/pager/pager-numeric-buttons.component.js

@@ -109,7 +109,7 @@ PagerNumericButtonsComponent = tslib_1.__decorate([
                 [value]="num.toString()"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage == num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-state-selected':currentPage == num}">
+                [ngClass]="{'k-link': true, 'k-selected':currentPage == num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
@@ -130,7 +130,7 @@ PagerNumericButtonsComponent = tslib_1.__decorate([
                 <a  href="#"
                     [attr.aria-label]="pageLabel(num)"
                     tabindex="-1"
-                    [ngClass]="{'k-link': true, 'k-state-selected':currentPage == num}"
+                    [ngClass]="{'k-link': true, 'k-selected':currentPage == num}"
                     (click)="changePage(num - 1)">
                     {{num}}
                 </a>

package/dist/es2015/pager/pager-prev-buttons.component.js

@@ -44,7 +44,7 @@ PagerPrevButtonsComponent = tslib_1.__decorate([
             [ngClass]="{
                 'k-link': true,
                 'k-pager-nav': true,
-                'k-state-disabled': disabled,
+                'k-disabled': disabled,
                 'k-pager-first': true
             }">
             <span [attr.aria-label]="textFor('pagerFirstPage')"
@@ -61,7 +61,7 @@ PagerPrevButtonsComponent = tslib_1.__decorate([
             [ngClass]="{
                 'k-link': true,
                 'k-pager-nav': true,
-                'k-state-disabled': disabled,
+                'k-disabled': disabled,
                 '': true
             }">
             <span [attr.aria-label]="textFor('pagerPreviousPage')"

package/dist/es2015/rendering/cell.component.js

@@ -184,7 +184,11 @@ CellComponent = tslib_1.__decorate([
                 </ng-container>
                 <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                 <ng-template [ngIf]="column.isCheckboxColumn && !isNew">
-                    <input type="checkbox" kendoTreeListFocusable class="k-checkbox" [checked]="selected" />
+                    <input
+                        type="checkbox"
+                        kendoTreeListFocusable
+                        class="k-checkbox k-checkbox-md k-rounded-md"
+                        [checked]="selected" />
                 </ng-template>
             </ng-container>
             <ng-container *ngSwitchCase="true">
@@ -211,7 +215,7 @@ CellComponent = tslib_1.__decorate([
                     <input
                         *ngSwitchCase="'boolean'"
                         type="checkbox"
-                        class="k-checkbox"
+                        class="k-checkbox k-checkbox-md k-rounded-md"
                         [formControl]="formGroup.get(column.field)"
                         kendoTreeListFocusable
                     />
@@ -219,7 +223,7 @@ CellComponent = tslib_1.__decorate([
                     <input
                         *ngSwitchDefault
                         type="text"
-                        class="k-textbox"
+                        class="k-textbox k-input k-rounded-md"
                         [formControl]="formGroup.get(column.field)"
                         kendoTreeListFocusable
                     />

package/dist/es2015/rendering/footer-template.directive.d.ts

@@ -15,6 +15,8 @@ import { TemplateRef } from '@angular/core';
  * * `column`—Defines an instance of the [`ColumnComponent`]({% slug api_treelist_columncomponent %}) option.
  * * `columnIndex`—Defines the current column index.
  * * `field`—The name of the column field, if set.
+ * * `items`—The data items on this level.
+ * * `parentItem`—The parent data item; `null` for root level items.
  *
  *
  * {% meta height:500 %}

package/dist/es2015/rendering/footer-template.directive.js

@@ -16,6 +16,8 @@ import { Directive, TemplateRef, Optional } from '@angular/core';
  * * `column`—Defines an instance of the [`ColumnComponent`]({% slug api_treelist_columncomponent %}) option.
  * * `columnIndex`—Defines the current column index.
  * * `field`—The name of the column field, if set.
+ * * `items`—The data items on this level.
+ * * `parentItem`—The parent data item; `null` for root level items.
  *
  *
  * {% meta height:500 %}

package/dist/es2015/rendering/header/header.component.js

@@ -507,8 +507,11 @@ HeaderComponent = tslib_1.__decorate([
                         </span>
                     </ng-template>
                     <ng-container *ngIf="renderSelectAll(column)">
-                        <input type="checkbox" class="k-checkbox" kendoTreeListFocusable
-                              (click)="selectAllClick($event)" />
+                        <input
+                            type="checkbox"
+                            class="k-checkbox k-checkbox-md k-rounded-md"
+                            kendoTreeListFocusable
+                            (click)="selectAllClick($event)" />
                     </ng-container>
                     <span kendoTreeListColumnHandle
                         kendoDraggable

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

@@ -372,7 +372,7 @@ TableBodyComponent = tslib_1.__decorate([
             [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"
+            [class.k-selected]="item.selected"
             [attr.data-treelist-view-index]="rowIndex">
 
             <td kendoTreeListCell
@@ -400,7 +400,7 @@ TableBodyComponent = tslib_1.__decorate([
                     [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)"
+                [class.k-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
                 [ngStyle]="column.style"
                 [attr.colspan]="column.colspan"
                 *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
@@ -428,12 +428,13 @@ TableBodyComponent = tslib_1.__decorate([
                 </ng-container>
                 <ng-container [ngTemplateOutlet]="column.footerTemplateRef"
                     [ngTemplateOutletContext]="{
-                        items: item.items,
-                        field: column.field,
+                        $implicit: item.aggregates,
+                        aggregates: item.aggregates,
                         column: column,
                         columnIndex: columnIndex,
-                        aggregates: item.aggregates,
-                        $implicit: item.aggregates
+                        field: column.field,
+                        items: item.items,
+                        parentItem: item.parentItem
                     }">
                 </ng-container>
            </td>

package/dist/es2015/treelist.component.d.ts

@@ -662,7 +662,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      *            [resizable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button" (click)="treelist.autoFitColumn(groupColumn)">
+     *                 <button kendoButton (click)="treelist.autoFitColumn(groupColumn)">
      *                     Auto-fit the group column
      *                 </button>
      *            </ng-template>
@@ -726,10 +726,10 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      *          [resizable]="true"
      *          style="height: 300px">
      *          <ng-template kendoTreeListToolbarTemplate>
-     *              <button class="k-button" (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
+     *              <button kendoButton (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
      *                  Auto-fit the first and last column
      *              </button>
-     *              <button class="k-button" (click)="treelist.autoFitColumns()">
+     *              <button kendoButton (click)="treelist.autoFitColumns()">
      *                  Auto-fit all columns
      *              </button>
      *          </ng-template>
@@ -853,7 +853,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      *            [reorderable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button"
+     *                 <button kendoButton
      *                     (click)="treelist.reorderColumn(groupColumn, 2, { before: true })">
      *                     Move the group column before the last one.
      *                 </button>

package/dist/es2015/treelist.component.js

@@ -1069,7 +1069,7 @@ let TreeListComponent = TreeListComponent_1 = class TreeListComponent {
      *            [resizable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button" (click)="treelist.autoFitColumn(groupColumn)">
+     *                 <button kendoButton (click)="treelist.autoFitColumn(groupColumn)">
      *                     Auto-fit the group column
      *                 </button>
      *            </ng-template>
@@ -1135,10 +1135,10 @@ let TreeListComponent = TreeListComponent_1 = class TreeListComponent {
      *          [resizable]="true"
      *          style="height: 300px">
      *          <ng-template kendoTreeListToolbarTemplate>
-     *              <button class="k-button" (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
+     *              <button kendoButton (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
      *                  Auto-fit the first and last column
      *              </button>
-     *              <button class="k-button" (click)="treelist.autoFitColumns()">
+     *              <button kendoButton (click)="treelist.autoFitColumns()">
      *                  Auto-fit all columns
      *              </button>
      *          </ng-template>
@@ -1316,7 +1316,7 @@ let TreeListComponent = TreeListComponent_1 = class TreeListComponent {
      *            [reorderable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button"
+     *                 <button kendoButton
      *                     (click)="treelist.reorderColumn(groupColumn, 2, { before: true })">
      *                     Move the group column before the last one.
      *                 </button>

package/dist/fesm2015/index.js

@@ -33,7 +33,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639057446,
+    publishDate: 1642596626,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -144,6 +144,8 @@ HeaderTemplateDirective = __decorate([
  * * `column`—Defines an instance of the [`ColumnComponent`]({% slug api_treelist_columncomponent %}) option.
  * * `columnIndex`—Defines the current column index.
  * * `field`—The name of the column field, if set.
+ * * `items`—The data items on this level.
+ * * `parentItem`—The parent data item; `null` for root level items.
  *
  *
  * {% meta height:500 %}
@@ -1398,6 +1400,7 @@ class ViewItemFactory {
                             items: dataLevel.items,
                             aggregates: dataLevel.aggregates,
                             level: dataLevel.level,
+                            parentItem: dataLevel.parent.data,
                             parentIndex: dataLevel.parentIndex,
                             rowIndex: this.rowIndex
                         });
@@ -3335,7 +3338,7 @@ FocusGroup = __decorate([
  * ```ts-no-run
  * <kendo-treelist-column>
  *   <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *     <input type="button" class="k-button" [kendoTreeListFocusable]="cellContext" value="Focus me!" />
+ *     <input type="button" kendoButton [kendoTreeListFocusable]="cellContext" value="Focus me!" />
  *   </ng-template>
  * </kendo-treelist-column>
  * ```
@@ -5956,7 +5959,7 @@ let TreeListComponent = TreeListComponent_1 = class TreeListComponent {
      *            [resizable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button" (click)="treelist.autoFitColumn(groupColumn)">
+     *                 <button kendoButton (click)="treelist.autoFitColumn(groupColumn)">
      *                     Auto-fit the group column
      *                 </button>
      *            </ng-template>
@@ -6022,10 +6025,10 @@ let TreeListComponent = TreeListComponent_1 = class TreeListComponent {
      *          [resizable]="true"
      *          style="height: 300px">
      *          <ng-template kendoTreeListToolbarTemplate>
-     *              <button class="k-button" (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
+     *              <button kendoButton (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
      *                  Auto-fit the first and last column
      *              </button>
-     *              <button class="k-button" (click)="treelist.autoFitColumns()">
+     *              <button kendoButton (click)="treelist.autoFitColumns()">
      *                  Auto-fit all columns
      *              </button>
      *          </ng-template>
@@ -6203,7 +6206,7 @@ let TreeListComponent = TreeListComponent_1 = class TreeListComponent {
      *            [reorderable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button"
+     *                 <button kendoButton
      *                     (click)="treelist.reorderColumn(groupColumn, 2, { before: true })">
      *                     Move the group column before the last one.
      *                 </button>
@@ -9370,7 +9373,7 @@ StringFilterCellComponent = __decorate([
             [defaultOperator]="operator"
             [showOperators]="showOperators">
             <input
-                class="k-textbox"
+                kendoTextBox
                 kendoTreeListFocusable
                 kendoFilterInput
                 [filterDelay]="filterDelay"
@@ -9506,12 +9509,12 @@ FilterCellOperatorsComponent = __decorate([
         </kendo-dropdownlist>
         <button type="button"
             kendoTreeListFocusable
-            [ngClass]="{'k-clear-button-visible': showButton}"
-            class="k-button k-button-icon"
+            *ngIf="showButton"
+            class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle k-icon-button"
             [title]="clearText"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
-                <span class="k-icon k-i-filter-clear"></span>
+                <span class="k-icon k-button-icon k-i-filter-clear"></span>
         </button>
     `
     }),
@@ -10242,11 +10245,11 @@ let LogicalCellDirective = class LogicalCellDirective {
                 if (!this.logicalSlaveCell && this.navigationService.autoFocusCell(this.logicalColIndex, this.logicalColIndex + this.colSpan - 1)) {
                     this.microtask(() => this.isFocused() && el.focus());
                 }
-                this.renderer.addClass(el, 'k-state-focused');
+                this.renderer.addClass(el, 'k-focus');
             }
         }
         else {
-            this.renderer.removeClass(el, 'k-state-focused');
+            this.renderer.removeClass(el, 'k-focus');
         }
     }
     microtask(callback) {
@@ -11586,7 +11589,7 @@ PagerPrevButtonsComponent = __decorate([
             [ngClass]="{
                 'k-link': true,
                 'k-pager-nav': true,
-                'k-state-disabled': disabled,
+                'k-disabled': disabled,
                 'k-pager-first': true
             }">
             <span [attr.aria-label]="textFor('pagerFirstPage')"
@@ -11603,7 +11606,7 @@ PagerPrevButtonsComponent = __decorate([
             [ngClass]="{
                 'k-link': true,
                 'k-pager-nav': true,
-                'k-state-disabled': disabled,
+                'k-disabled': disabled,
                 '': true
             }">
             <span [attr.aria-label]="textFor('pagerPreviousPage')"
@@ -11656,7 +11659,7 @@ PagerNextButtonsComponent = __decorate([
             [ngClass]="{
                 'k-link': true,
                 'k-pager-nav': true,
-                'k-state-disabled': disabled,
+                'k-disabled': disabled,
                 '': true
             }">
             <span [attr.aria-label]="textFor('pagerNextPage')"
@@ -11673,7 +11676,7 @@ PagerNextButtonsComponent = __decorate([
             [ngClass]="{
                 'k-link': true,
                 'k-pager-nav': true,
-                'k-state-disabled': disabled,
+                'k-disabled': disabled,
                 'k-pager-last': true
             }">
             <span [attr.aria-label]="textFor('pagerLastPage')"
@@ -11792,7 +11795,7 @@ PagerNumericButtonsComponent = __decorate([
                 [value]="num.toString()"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage == num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-state-selected':currentPage == num}">
+                [ngClass]="{'k-link': true, 'k-selected':currentPage == num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
@@ -11813,7 +11816,7 @@ PagerNumericButtonsComponent = __decorate([
                 <a  href="#"
                     [attr.aria-label]="pageLabel(num)"
                     tabindex="-1"
-                    [ngClass]="{'k-link': true, 'k-state-selected':currentPage == num}"
+                    [ngClass]="{'k-link': true, 'k-selected':currentPage == num}"
                     (click)="changePage(num - 1)">
                     {{num}}
                 </a>
@@ -12728,8 +12731,11 @@ HeaderComponent = __decorate([
                         </span>
                     </ng-template>
                     <ng-container *ngIf="renderSelectAll(column)">
-                        <input type="checkbox" class="k-checkbox" kendoTreeListFocusable
-                              (click)="selectAllClick($event)" />
+                        <input
+                            type="checkbox"
+                            class="k-checkbox k-checkbox-md k-rounded-md"
+                            kendoTreeListFocusable
+                            (click)="selectAllClick($event)" />
                     </ng-container>
                     <span kendoTreeListColumnHandle
                         kendoDraggable
@@ -13247,8 +13253,17 @@ FilterMenuContainerComponent = __decorate([
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button type="reset" class="k-button">{{clearText}}</button>
-                    <button type="submit" class="k-button k-primary" [disabled]="disabled">{{filterText}}</button>
+                    <button
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle">
+                        {{clearText}}
+                    </button>
+                    <button
+                        type="submit"
+                        class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [disabled]="disabled">
+                        {{filterText}}
+                    </button>
                 </div>
             </div>
         </form>
@@ -13382,7 +13397,11 @@ StringFilterMenuInputComponent = __decorate([
             [currentFilter]="currentFilter"
             [filterService]="filterService"
             >
-            <input class="k-textbox" kendoFilterInput [filterDelay]="0" [ngModel]="currentFilter?.value" />
+            <input
+                kendoTextBox
+                kendoFilterInput
+                [filterDelay]="0"
+                [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-menu-input-wrapper>
     `
     })
@@ -13900,8 +13919,8 @@ BooleanFilterMenuComponent = __decorate([
         <ul class="k-radio-list k-reset">
             <li *ngFor="let item of items">
                 <input type="radio"
+                    kendoRadioButton
                     [name]="idPrefix"
-                    class="k-radio"
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
                     (change)="onChange(item.value)"
@@ -14121,9 +14140,9 @@ FilterMenuModule = __decorate([
  */
 const preventOnDblClick$1 = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
 const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
-const isDeleteButton = or(hasClass("k-i-group-delete"), hasClass("k-button-icon"));
-const isSortIcon = or(hasClass("k-i-sort-asc-sm"), hasClass("k-i-sort-desc-sm"));
-const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName("label")));
+const isDeleteButton = or(hasClass('k-i-group-delete'), hasClass('k-icon-button'));
+const isSortIcon = or(hasClass('k-i-sort-asc-sm'), hasClass('k-i-sort-desc-sm'));
+const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
 const elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
 const hideThenShow = (element, cont) => {
     element.style.display = 'none';
@@ -14430,12 +14449,28 @@ ColumnListComponent = __decorate([
         template: `
         <div class="k-column-list">
             <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input class="k-checkbox" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+                <input
+                    class="k-checkbox k-checkbox-md k-rounded-md"
+                    type="checkbox"
+                    [attr.data-index]="index"
+                    [checked]="!column.hidden"
+                    [disabled]="isDisabled(column)" />
+                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button" (click)="cancelChanges()">{{ resetText }}</button>
-            <button type="button" class="k-button k-primary" (click)="applyChanges()">{{ applyText }}</button>
+            <button
+                type="button"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()">
+                {{ resetText }}
+            </button>
+            <button
+                type="button"
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()">
+                {{ applyText }}
+            </button>
         </div>
     `
     }),
@@ -14546,9 +14581,9 @@ ColumnChooserComponent = __decorate([
         <button #anchor
             type="button"
             (click)="toggle(anchor, template)"
-            class="k-button k-bare k-button-icon"
+            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
             [attr.title]="localization.get('columns')">
-            <span class="k-icon k-i-columns"></span>
+            <span class="k-button-icon k-icon k-i-columns"></span>
         </button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
@@ -14955,7 +14990,7 @@ ColumnMenuItemComponent = __decorate([
         ],
         selector: 'kendo-treelist-columnmenu-item',
         template: `
-        <div class="k-columnmenu-item" (click)="onClick($event)" [class.k-state-selected]="selected" [class.k-state-disabled]="disabled">
+        <div class="k-columnmenu-item" (click)="onClick($event)" [class.k-selected]="selected" [class.k-disabled]="disabled">
            <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
            </span>
            {{ text }}
@@ -15757,7 +15792,7 @@ TableBodyComponent = __decorate([
             [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"
+            [class.k-selected]="item.selected"
             [attr.data-treelist-view-index]="rowIndex">
 
             <td kendoTreeListCell
@@ -15785,7 +15820,7 @@ TableBodyComponent = __decorate([
                     [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)"
+                [class.k-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
                 [ngStyle]="column.style"
                 [attr.colspan]="column.colspan"
                 *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
@@ -15813,12 +15848,13 @@ TableBodyComponent = __decorate([
                 </ng-container>
                 <ng-container [ngTemplateOutlet]="column.footerTemplateRef"
                     [ngTemplateOutletContext]="{
-                        items: item.items,
-                        field: column.field,
+                        $implicit: item.aggregates,
+                        aggregates: item.aggregates,
                         column: column,
                         columnIndex: columnIndex,
-                        aggregates: item.aggregates,
-                        $implicit: item.aggregates
+                        field: column.field,
+                        items: item.items,
+                        parentItem: item.parentItem
                     }">
                 </ng-container>
            </td>
@@ -16013,7 +16049,11 @@ CellComponent = __decorate([
                 </ng-container>
                 <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                 <ng-template [ngIf]="column.isCheckboxColumn && !isNew">
-                    <input type="checkbox" kendoTreeListFocusable class="k-checkbox" [checked]="selected" />
+                    <input
+                        type="checkbox"
+                        kendoTreeListFocusable
+                        class="k-checkbox k-checkbox-md k-rounded-md"
+                        [checked]="selected" />
                 </ng-template>
             </ng-container>
             <ng-container *ngSwitchCase="true">
@@ -16040,7 +16080,7 @@ CellComponent = __decorate([
                     <input
                         *ngSwitchCase="'boolean'"
                         type="checkbox"
-                        class="k-checkbox"
+                        class="k-checkbox k-checkbox-md k-rounded-md"
                         [formControl]="formGroup.get(column.field)"
                         kendoTreeListFocusable
                     />
@@ -16048,7 +16088,7 @@ CellComponent = __decorate([
                     <input
                         *ngSwitchDefault
                         type="text"
-                        class="k-textbox"
+                        class="k-textbox k-input k-rounded-md"
                         [formControl]="formGroup.get(column.field)"
                         kendoTreeListFocusable
                     />