@progress/kendo-angular-grid 6.0.0-dev.202201141020 → 6.0.0-dev.202201191529

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

@@ -14,7 +14,7 @@ import { CellContext } from '../rendering/common/cell-context';
  * _@Component({
  *    selector: 'my-app',
  *    template: `
- *      <input type="text" class="k-textbox" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
+ *      <input type="text" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
  *      <kendo-grid [data]="data" [navigable]="true">
  *          <kendo-grid-column field="ProductID" title="Product ID" width="100">
  *          </kendo-grid-column>
@@ -23,18 +23,18 @@ import { CellContext } from '../rendering/common/cell-context';
  *          <kendo-grid-column>
  *              <ng-template kendoGridCellTemplate let-dataItem>
  *                  <!-- The first focusable element will be focused when pressing Enter on the cell -->
- *                  <input type="text" class="k-textbox" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
- *                  <button class="k-button" kendoGridFocusable>Update</button>
+ *                  <input type="text" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
+ *                  <button kendoGridFocusable>Update</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *          <kendo-grid-column width="100">
  *              <ng-template kendoGridCellTemplate>
  *                  <!-- A single focusable element will be focused during navigation -->
- *                  <button class="k-button" kendoGridFocusable>Delete</button>
+ *                  <button kendoGridFocusable>Delete</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *      </kendo-grid>
- *      <input type="text" class="k-textbox" placeholder="Tab stop #2" style="margin-top: 8px;" />
+ *      <input type="text" placeholder="Tab stop #2" style="margin-top: 8px;" />
  *    `
  * })
  *

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

@@ -15,7 +15,7 @@ import { CELL_CONTEXT } from '../rendering/common/cell-context';
  * _@Component({
  *    selector: 'my-app',
  *    template: `
- *      <input type="text" class="k-textbox" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
+ *      <input type="text" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
  *      <kendo-grid [data]="data" [navigable]="true">
  *          <kendo-grid-column field="ProductID" title="Product ID" width="100">
  *          </kendo-grid-column>
@@ -24,18 +24,18 @@ import { CELL_CONTEXT } from '../rendering/common/cell-context';
  *          <kendo-grid-column>
  *              <ng-template kendoGridCellTemplate let-dataItem>
  *                  <!-- The first focusable element will be focused when pressing Enter on the cell -->
- *                  <input type="text" class="k-textbox" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
- *                  <button class="k-button" kendoGridFocusable>Update</button>
+ *                  <input type="text" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
+ *                  <button kendoGridFocusable>Update</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *          <kendo-grid-column width="100">
  *              <ng-template kendoGridCellTemplate>
  *                  <!-- A single focusable element will be focused during navigation -->
- *                  <button class="k-button" kendoGridFocusable>Delete</button>
+ *                  <button kendoGridFocusable>Delete</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *      </kendo-grid>
- *      <input type="text" class="k-textbox" placeholder="Tab stop #2" style="margin-top: 8px;" />
+ *      <input type="text" placeholder="Tab stop #2" style="margin-top: 8px;" />
  *    `
  * })
  *

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642155100,
+    publishDate: 1642605543,
     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-numeric-buttons.component.js

@@ -97,7 +97,7 @@ PagerNumericButtonsComponent = tslib_1.__decorate([
         selector: 'kendo-pager-numeric-buttons',
         template: `
         <select
-            class="k-dropdown k-pager-nav"
+            class="k-dropdownlist k-pager-nav"
             kendoGridFocusable
             tabindex="0"
             [value]="(currentPage).toString()"

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

@@ -33,7 +33,6 @@ export declare class PagerComponent implements OnChanges, OnInit, OnDestroy {
     pageChange: EventEmitter<PageChangeEvent>;
     pagerWrapClass: boolean;
     gridPagerClass: boolean;
-    widgetClass: boolean;
     settings: PagerSettings;
     private subscriptions;
     private _templateContext;

package/dist/es2015/pager/pager.component.js

@@ -36,7 +36,6 @@ let PagerComponent = class PagerComponent {
         this.pageChange = new EventEmitter();
         this.pagerWrapClass = true;
         this.gridPagerClass = true;
-        this.widgetClass = true;
         this.settings = normalize({});
         this.subscriptions = new Subscription();
         this._templateContext = {};
@@ -251,10 +250,6 @@ tslib_1.__decorate([
     HostBinding('class.k-grid-pager'),
     tslib_1.__metadata("design:type", Boolean)
 ], PagerComponent.prototype, "gridPagerClass", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-widget'),
-    tslib_1.__metadata("design:type", Boolean)
-], PagerComponent.prototype, "widgetClass", void 0);
 tslib_1.__decorate([
     HostBinding('class.k-state-focused'),
     tslib_1.__metadata("design:type", Boolean),

package/dist/es2015/pdf/export-element.js

@@ -34,7 +34,7 @@ const appendNodes = (element, nodes) => {
 const ɵ0 = appendNodes;
 const wrapTable = (table) => {
     const wrapper = document.createElement('div');
-    wrapper.className = 'k-widget k-grid';
+    wrapper.className = 'k-grid';
     wrapper.appendChild(table);
     return wrapper;
 };

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

@@ -189,7 +189,7 @@ CellComponent = tslib_1.__decorate([
                     <ng-template [ngIf]="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-template>
                     <ng-template [ngIf]="isCheckboxColumn && !isNew">
                         <input
-                            class="k-checkbox"
+                            class="k-checkbox k-checkbox-md k-rounded-md"
                             [kendoGridSelectionCheckbox]="rowIndex"
                             [attr.id]="selectionCheckboxId"
                             [attr.aria-label]="selectionCheckboxLabel" />
@@ -228,7 +228,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)"
                         kendoGridFocusable
                     />
@@ -236,7 +236,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)"
                         kendoGridFocusable
                     />

package/dist/es2015/rendering/constants.d.ts

@@ -17,4 +17,4 @@ export declare const IGNORE_TARGET_CLASSSES = "k-icon";
 /**
  * @hidden
  */
-export declare const IGNORE_CONTAINER_CLASSES = "k-widget k-grid-ignore-click";
+export declare const IGNORE_CONTAINER_CLASSES = "k-grid k-grid-ignore-click";

package/dist/es2015/rendering/constants.js

@@ -17,4 +17,4 @@ export const IGNORE_TARGET_CLASSSES = 'k-icon';
 /**
  * @hidden
  */
-export const IGNORE_CONTAINER_CLASSES = 'k-widget k-grid-ignore-click';
+export const IGNORE_CONTAINER_CLASSES = 'k-grid k-grid-ignore-click';

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

@@ -603,7 +603,7 @@ HeaderComponent = tslib_1.__decorate([
 
                     <ng-template [ngIf]="isCheckboxColumn(column) && !column.headerTemplateRef && column.showSelectAll">
                         <input
-                            class="k-checkbox"
+                            class="k-checkbox k-checkbox-md k-rounded-md"
                             [attr.id]="selectAllCheckboxId()"
                             [attr.aria-label]="selectAllCheckboxLabel"
                             kendoGridSelectAllCheckbox

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

@@ -16,16 +16,16 @@ import { TemplateRef } from '@angular/core';
  *     selector: 'my-app',
  *     template: `
  *       <div class="example-config">
- *         <input type="radio" id="top" name="position" class="k-radio" value="top" checked (click)="positionChange($event)"/>
+ *         <input type="radio" id="top" name="position" value="top" checked (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="top">Top</label><br/>
- *         <input type="radio" id="bottom" name="position" class="k-radio" value="bottom" (click)="positionChange($event)"/>
+ *         <input type="radio" id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="bottom">Bottom</label><br/>
- *         <input type="radio" id="both" name="position" value="both" class="k-radio" (click)="positionChange($event)"/>
+ *         <input type="radio" id="both" name="position" value="both" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="both">Both</label><br/>
  *       </div>
  *       <kendo-grid [data]="gridData" style="height: 200px">
  *            <ng-template kendoGridToolbarTemplate [position]="position" let-position="position">
- *                <button (click)="onClick()" class="k-button">Custom action</button>
+ *                <button (click)="onClick()">Custom action</button>
  *            </ng-template>
  *            <kendo-grid-column field="ProductName">
  *            </kendo-grid-column>

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

@@ -17,16 +17,16 @@ import { Directive, TemplateRef, Optional, Input } from '@angular/core';
  *     selector: 'my-app',
  *     template: `
  *       <div class="example-config">
- *         <input type="radio" id="top" name="position" class="k-radio" value="top" checked (click)="positionChange($event)"/>
+ *         <input type="radio" id="top" name="position" value="top" checked (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="top">Top</label><br/>
- *         <input type="radio" id="bottom" name="position" class="k-radio" value="bottom" (click)="positionChange($event)"/>
+ *         <input type="radio" id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="bottom">Bottom</label><br/>
- *         <input type="radio" id="both" name="position" value="both" class="k-radio" (click)="positionChange($event)"/>
+ *         <input type="radio" id="both" name="position" value="both" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="both">Both</label><br/>
  *       </div>
  *       <kendo-grid [data]="gridData" style="height: 200px">
  *            <ng-template kendoGridToolbarTemplate [position]="position" let-position="position">
- *                <button (click)="onClick()" class="k-button">Custom action</button>
+ *                <button (click)="onClick()">Custom action</button>
  *            </ng-template>
  *            <kendo-grid-column field="ProductName">
  *            </kendo-grid-column>

package/dist/fesm2015/index.js

@@ -487,7 +487,7 @@ const EMPTY_CELL_CONTEXT = {};
  * _@Component({
  *    selector: 'my-app',
  *    template: `
- *      <input type="text" class="k-textbox" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
+ *      <input type="text" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
  *      <kendo-grid [data]="data" [navigable]="true">
  *          <kendo-grid-column field="ProductID" title="Product ID" width="100">
  *          </kendo-grid-column>
@@ -496,18 +496,18 @@ const EMPTY_CELL_CONTEXT = {};
  *          <kendo-grid-column>
  *              <ng-template kendoGridCellTemplate let-dataItem>
  *                  <!-- The first focusable element will be focused when pressing Enter on the cell -->
- *                  <input type="text" class="k-textbox" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
- *                  <button class="k-button" kendoGridFocusable>Update</button>
+ *                  <input type="text" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
+ *                  <button kendoGridFocusable>Update</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *          <kendo-grid-column width="100">
  *              <ng-template kendoGridCellTemplate>
  *                  <!-- A single focusable element will be focused during navigation -->
- *                  <button class="k-button" kendoGridFocusable>Delete</button>
+ *                  <button kendoGridFocusable>Delete</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *      </kendo-grid>
- *      <input type="text" class="k-textbox" placeholder="Tab stop #2" style="margin-top: 8px;" />
+ *      <input type="text" placeholder="Tab stop #2" style="margin-top: 8px;" />
  *    `
  * })
  *
@@ -2831,7 +2831,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642155100,
+    publishDate: 1642605543,
     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'
 };
@@ -5591,16 +5591,16 @@ ExcelService = __decorate([
  *     selector: 'my-app',
  *     template: `
  *       <div class="example-config">
- *         <input type="radio" id="top" name="position" class="k-radio" value="top" checked (click)="positionChange($event)"/>
+ *         <input type="radio" id="top" name="position" value="top" checked (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="top">Top</label><br/>
- *         <input type="radio" id="bottom" name="position" class="k-radio" value="bottom" (click)="positionChange($event)"/>
+ *         <input type="radio" id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="bottom">Bottom</label><br/>
- *         <input type="radio" id="both" name="position" value="both" class="k-radio" (click)="positionChange($event)"/>
+ *         <input type="radio" id="both" name="position" value="both" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="both">Both</label><br/>
  *       </div>
  *       <kendo-grid [data]="gridData" style="height: 200px">
  *            <ng-template kendoGridToolbarTemplate [position]="position" let-position="position">
- *                <button (click)="onClick()" class="k-button">Custom action</button>
+ *                <button (click)="onClick()">Custom action</button>
  *            </ng-template>
  *            <kendo-grid-column field="ProductName">
  *            </kendo-grid-column>
@@ -7603,7 +7603,7 @@ let GridComponent = class GridComponent {
      *            [resizable]="true"
      *            style="height: 300px">
      *            <ng-template kendoGridToolbarTemplate>
-     *                 <button class="k-button" (click)="grid.autoFitColumn(groupColumn)">
+     *                 <button kendoButton (click)="grid.autoFitColumn(groupColumn)">
      *                     Auto-fit the group column
      *                 </button>
      *            </ng-template>
@@ -7669,10 +7669,10 @@ let GridComponent = class GridComponent {
      *          [resizable]="true"
      *          style="height: 300px">
      *          <ng-template kendoGridToolbarTemplate>
-     *              <button class="k-button" (click)="grid.autoFitColumns([firstColumn, lastColumn])">
+     *              <button kendoButton (click)="grid.autoFitColumns([firstColumn, lastColumn])">
      *                  Auto-fit the first and last column
      *              </button>
-     *              <button class="k-button" (click)="grid.autoFitColumns()">
+     *              <button kendoButton (click)="grid.autoFitColumns()">
      *                  Auto-fit all columns
      *              </button>
      *          </ng-template>
@@ -7845,7 +7845,7 @@ let GridComponent = class GridComponent {
      *            [reorderable]="true"
      *            style="height: 300px">
      *            <ng-template kendoGridToolbarTemplate>
-     *                 <button class="k-button"
+     *                 <button kendoButton
      *                     (click)="grid.reorderColumn(groupColumn, 2, { before: true })">
      *                     Move the group column before the last one.
      *                 </button>
@@ -8682,7 +8682,6 @@ __decorate([
     __metadata("design:paramtypes", [])
 ], GridComponent.prototype, "dir", null);
 __decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-grid'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
@@ -9471,7 +9470,7 @@ const IGNORE_TARGET_CLASSSES = 'k-icon';
 /**
  * @hidden
  */
-const IGNORE_CONTAINER_CLASSES = 'k-widget k-grid-ignore-click';
+const IGNORE_CONTAINER_CLASSES = 'k-grid k-grid-ignore-click';
 
 const elementAt = (index, elements, elementOffset) => {
     for (let idx = 0, elementIdx = 0; idx < elements.length; idx++) {
@@ -11728,7 +11727,8 @@ let FilterInputDirective = class FilterInputDirective {
     addAriaAttributes() {
         const ariaValue = this.columnLabel;
         if (this.kendoInput && this.kendoInput.focusableId && isDocumentAvailable()) {
-            const focusableElement = this.element.nativeElement.querySelector(`#${this.kendoInput.focusableId}`);
+            const focusableElement = this.element.nativeElement.querySelector(`#${this.kendoInput.focusableId}`) ||
+                this.element.nativeElement;
             this.renderer.setAttribute(focusableElement, 'aria-label', ariaValue);
         }
         else {
@@ -12064,7 +12064,7 @@ StringFilterCellComponent = __decorate([
             [defaultOperator]="operator"
             [showOperators]="showOperators">
             <input
-                class="k-textbox"
+                kendoTextBox
                 kendoGridFocusable
                 kendoFilterInput
                 [columnLabel]="columnLabel"
@@ -12201,12 +12201,12 @@ FilterCellOperatorsComponent = __decorate([
         </kendo-dropdownlist>
         <button type="button"
             kendoGridFocusable
-            [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>
     `
     }),
@@ -14143,7 +14143,6 @@ let PagerComponent = class PagerComponent {
         this.pageChange = new EventEmitter();
         this.pagerWrapClass = true;
         this.gridPagerClass = true;
-        this.widgetClass = true;
         this.settings = normalize({});
         this.subscriptions = new Subscription();
         this._templateContext = {};
@@ -14358,10 +14357,6 @@ __decorate([
     HostBinding('class.k-grid-pager'),
     __metadata("design:type", Boolean)
 ], PagerComponent.prototype, "gridPagerClass", void 0);
-__decorate([
-    HostBinding('class.k-widget'),
-    __metadata("design:type", Boolean)
-], PagerComponent.prototype, "widgetClass", void 0);
 __decorate([
     HostBinding('class.k-state-focused'),
     __metadata("design:type", Boolean),
@@ -14795,7 +14790,7 @@ PagerNumericButtonsComponent = __decorate([
         selector: 'kendo-pager-numeric-buttons',
         template: `
         <select
-            class="k-dropdown k-pager-nav"
+            class="k-dropdownlist k-pager-nav"
             kendoGridFocusable
             tabindex="0"
             [value]="(currentPage).toString()"
@@ -15822,8 +15817,8 @@ GroupIndicatorComponent = __decorate([
                 [class.k-i-sort-asc-sm]="dir === 'asc'"
                 [class.k-i-sort-desc-sm]="dir === 'desc'"></span>
             {{groupTitle}}</a>
-        <a class="k-button k-button-icon k-bare" tabindex="-1" (click)="removeDescriptor()">
-            <span class="k-icon k-i-group-delete"></span>
+        <a 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" tabindex="-1" (click)="removeDescriptor()">
+            <span class="k-button-icon k-icon k-i-group-delete"></span>
         </a>
     `
     })
@@ -15836,9 +15831,9 @@ GroupIndicatorComponent = __decorate([
  */
 const preventOnDblClick = 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';
@@ -17001,7 +16996,7 @@ HeaderComponent = __decorate([
 
                     <ng-template [ngIf]="isCheckboxColumn(column) && !column.headerTemplateRef && column.showSelectAll">
                         <input
-                            class="k-checkbox"
+                            class="k-checkbox k-checkbox-md k-rounded-md"
                             [attr.id]="selectAllCheckboxId()"
                             [attr.aria-label]="selectAllCheckboxLabel"
                             kendoGridSelectAllCheckbox
@@ -17607,11 +17602,11 @@ FilterMenuContainerComponent = __decorate([
                     <button
                         #resetButton
                         type="reset"
-                        class="k-button"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
-                        class="k-button k-primary"
+                        class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
                 </div>
@@ -17796,7 +17791,7 @@ StringFilterMenuInputComponent = __decorate([
             [menuTabbingService]="menuTabbingService"
             >
             <input
-                class="k-textbox"
+                kendoTextBox
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
@@ -18445,7 +18440,7 @@ BooleanFilterMenuComponent = __decorate([
                     [columnLabel]="columnLabel"
                     #input
                     [name]="idPrefix"
-                    class="k-radio"
+                    kendoRadioButton
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
                     (change)="onChange(item.value, input)"
@@ -18933,12 +18928,12 @@ 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 #applyButton type="button" (keydown.tab)="onTab($event)" 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 #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
         </div>
     `
     }),
@@ -19068,9 +19063,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>
@@ -21395,7 +21390,7 @@ CellComponent = __decorate([
                     <ng-template [ngIf]="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-template>
                     <ng-template [ngIf]="isCheckboxColumn && !isNew">
                         <input
-                            class="k-checkbox"
+                            class="k-checkbox k-checkbox-md k-rounded-md"
                             [kendoGridSelectionCheckbox]="rowIndex"
                             [attr.id]="selectionCheckboxId"
                             [attr.aria-label]="selectionCheckboxLabel" />
@@ -21434,7 +21429,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)"
                         kendoGridFocusable
                     />
@@ -21442,7 +21437,7 @@ CellComponent = __decorate([
                     <input
                         *ngSwitchDefault
                         type="text"
-                        class="k-textbox"
+                        class="k-textbox k-input k-rounded-md"
                         [formControl]="formGroup.get(column.field)"
                         kendoGridFocusable
                     />
@@ -22934,7 +22929,7 @@ const appendNodes = (element, nodes) => {
 };
 const wrapTable = (table) => {
     const wrapper = document.createElement('div');
-    wrapper.className = 'k-widget k-grid';
+    wrapper.className = 'k-grid';
     wrapper.appendChild(table);
     return wrapper;
 };