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

package/dist/es/column-menu/column-chooser.component.js

@@ -132,7 +132,7 @@ var ColumnChooserComponent = /** @class */ (function () {
     ColumnChooserComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-grid-column-chooser',
-            template: "\n        <button #anchor\n            type=\"button\"\n            (click)=\"toggle(anchor, template)\"\n            class=\"k-button k-bare k-button-icon\"\n            [attr.title]=\"localization.get('columns')\">\n            <span class=\"k-icon k-i-columns\"></span>\n        </button>\n        <ng-template #template>\n            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>\n            <kendo-grid-columnlist\n                [columns]=\"columns\"\n                [applyText]=\"localization.get('columnsApply')\"\n                [resetText]=\"localization.get('columnsReset')\"\n                [autoSync]=\"autoSync\"\n                [allowHideAll]=\"allowHideAll\"\n                (apply)=\"onApply($event)\"\n                (columnChange)=\"onChange($event)\">\n            </kendo-grid-columnlist>\n        </ng-template>\n    "
+            template: "\n        <button #anchor\n            type=\"button\"\n            (click)=\"toggle(anchor, template)\"\n            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\"\n            [attr.title]=\"localization.get('columns')\">\n            <span class=\"k-button-icon k-icon k-i-columns\"></span>\n        </button>\n        <ng-template #template>\n            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>\n            <kendo-grid-columnlist\n                [columns]=\"columns\"\n                [applyText]=\"localization.get('columnsApply')\"\n                [resetText]=\"localization.get('columnsReset')\"\n                [autoSync]=\"autoSync\"\n                [allowHideAll]=\"allowHideAll\"\n                (apply)=\"onApply($event)\"\n                (columnChange)=\"onChange($event)\">\n            </kendo-grid-columnlist>\n        </ng-template>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             ColumnInfoService,

package/dist/es/column-menu/column-list.component.js

@@ -221,7 +221,7 @@ var ColumnListComponent = /** @class */ (function () {
     ColumnListComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-grid-columnlist',
-            template: "\n        <div class=\"k-column-list\">\n            <label *ngFor=\"let column of columns; let index = index;\" class='k-column-list-item'>\n                <input class=\"k-checkbox\" type=\"checkbox\" [attr.data-index]=\"index\" [checked]=\"!column.hidden\" [disabled]=\"isDisabled(column)\" /><span class=\"k-checkbox-label\">{{ column.displayTitle }}</span>\n            </label>\n        </div>\n        <div [ngClass]=\"actionsClass\" *ngIf=\"!autoSync\">\n            <button type=\"button\" class=\"k-button\" (click)=\"cancelChanges()\">{{ resetText }}</button>\n            <button #applyButton type=\"button\" (keydown.tab)=\"onTab($event)\" class=\"k-button k-primary\" (click)=\"applyChanges()\">{{ applyText }}</button>\n        </div>\n    "
+            template: "\n        <div class=\"k-column-list\">\n            <label *ngFor=\"let column of columns; let index = index;\" class='k-column-list-item'>\n                <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>\n            </label>\n        </div>\n        <div [ngClass]=\"actionsClass\" *ngIf=\"!autoSync\">\n            <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>\n            <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>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ElementRef,
             NgZone,

package/dist/es/dragdrop/draggable-column.directive.js

@@ -24,9 +24,9 @@ var preventOnDblClick = function (release) { return function (mouseDown) {
 var ɵ0 = preventOnDblClick;
 var hasClass = function (className) { return function (el) { return new RegExp("(^| )" + className + "( |$)").test(el.className); }; };
 var ɵ1 = hasClass;
-var isDeleteButton = or(hasClass("k-i-group-delete"), hasClass("k-button-icon"));
-var isSortIcon = or(hasClass("k-i-sort-asc-sm"), hasClass("k-i-sort-desc-sm"));
-var skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName("label")));
+var isDeleteButton = or(hasClass('k-i-group-delete'), hasClass('k-icon-button'));
+var isSortIcon = or(hasClass('k-i-sort-asc-sm'), hasClass('k-i-sort-desc-sm'));
+var skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
 var elementUnderCursor = function (_a) {
     var clientX = _a.clientX, clientY = _a.clientY;
     return document.elementFromPoint(clientX, clientY);

package/dist/es/filtering/cell/filter-cell-operators.component.js

@@ -117,7 +117,7 @@ var FilterCellOperatorsComponent = /** @class */ (function () {
     FilterCellOperatorsComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-grid-filter-cell-operators',
-            template: "\n        <kendo-dropdownlist\n            #dropdown\n            *ngIf=\"showOperators\"\n            kendoGridFocusable\n            [data]=\"operators\"\n            class=\"k-dropdown-operator\"\n            (valueChange)=\"onChange($event)\"\n            [value]=\"value\"\n            iconClass=\"k-i-filter\"\n            [valuePrimitive]=\"true\"\n            textField=\"text\"\n            [popupSettings]=\"{ width: 'auto' }\"\n            valueField=\"value\"\n            (keydown)=\"dropdownKeydown($event)\">\n        </kendo-dropdownlist>\n        <button type=\"button\"\n            kendoGridFocusable\n            [ngClass]=\"{'k-clear-button-visible': showButton}\"\n            class=\"k-button k-button-icon\"\n            [title]=\"clearText\"\n            (click)=\"clearClick()\"\n            (keydown)=\"clearKeydown($event)\">\n                <span class=\"k-icon k-i-filter-clear\"></span>\n        </button>\n    "
+            template: "\n        <kendo-dropdownlist\n            #dropdown\n            *ngIf=\"showOperators\"\n            kendoGridFocusable\n            [data]=\"operators\"\n            class=\"k-dropdown-operator\"\n            (valueChange)=\"onChange($event)\"\n            [value]=\"value\"\n            iconClass=\"k-i-filter\"\n            [valuePrimitive]=\"true\"\n            textField=\"text\"\n            [popupSettings]=\"{ width: 'auto' }\"\n            valueField=\"value\"\n            (keydown)=\"dropdownKeydown($event)\">\n        </kendo-dropdownlist>\n        <button type=\"button\"\n            kendoGridFocusable\n            *ngIf=\"showButton\"\n            class=\"k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle k-icon-button\"\n            [title]=\"clearText\"\n            (click)=\"clearClick()\"\n            (keydown)=\"clearKeydown($event)\">\n                <span class=\"k-icon k-button-icon k-i-filter-clear\"></span>\n        </button>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], FilterCellOperatorsComponent);

package/dist/es/filtering/cell/string-filter-cell.component.js

@@ -67,7 +67,7 @@ var StringFilterCellComponent = /** @class */ (function (_super) {
     StringFilterCellComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-grid-string-filter-cell',
-            template: "\n        <kendo-grid-filter-wrapper-cell\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [showOperators]=\"showOperators\">\n            <input\n                class=\"k-textbox\"\n                kendoGridFocusable\n                kendoFilterInput\n                [columnLabel]=\"columnLabel\"\n                [filterDelay]=\"filterDelay\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-grid-filter-wrapper-cell>\n    "
+            template: "\n        <kendo-grid-filter-wrapper-cell\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [showOperators]=\"showOperators\">\n            <input\n                kendoTextBox\n                kendoGridFocusable\n                kendoFilterInput\n                [columnLabel]=\"columnLabel\"\n                [filterDelay]=\"filterDelay\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-grid-filter-wrapper-cell>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [FilterService,
             LocalizationService])

package/dist/es/filtering/filter-input.directive.js

@@ -79,7 +79,8 @@ var FilterInputDirective = /** @class */ (function () {
     FilterInputDirective.prototype.addAriaAttributes = function () {
         var ariaValue = this.columnLabel;
         if (this.kendoInput && this.kendoInput.focusableId && isDocumentAvailable()) {
-            var focusableElement = this.element.nativeElement.querySelector("#" + this.kendoInput.focusableId);
+            var focusableElement = this.element.nativeElement.querySelector("#" + this.kendoInput.focusableId) ||
+                this.element.nativeElement;
             this.renderer.setAttribute(focusableElement, 'aria-label', ariaValue);
         }
         else {

package/dist/es/filtering/menu/boolean-filter-menu.component.js

@@ -125,7 +125,7 @@ var BooleanFilterMenuComponent = /** @class */ (function (_super) {
     BooleanFilterMenuComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-grid-boolean-filter-menu',
-            template: "\n        <ul class=\"k-radio-list k-reset\">\n            <li *ngFor=\"let item of items\">\n                <input type=\"radio\"\n                    kendoFilterMenuRadioButton\n                    [columnLabel]=\"columnLabel\"\n                    #input\n                    [name]=\"idPrefix\"\n                    class=\"k-radio\"\n                    [checked]=\"isSelected(item.value)\"\n                    [attr.id]=\"radioId(item.value)\"\n                    (change)=\"onChange(item.value, input)\"\n                    (keydown.shift.tab)=\"onShiftTab($event)\"\n                />\n                <label class=\"k-radio-label\" [attr.for]=\"radioId(item.value)\">{{item.text}}</label>\n            </li>\n        </ul>\n    "
+            template: "\n        <ul class=\"k-radio-list k-reset\">\n            <li *ngFor=\"let item of items\">\n                <input type=\"radio\"\n                    kendoFilterMenuRadioButton\n                    [columnLabel]=\"columnLabel\"\n                    #input\n                    [name]=\"idPrefix\"\n                    kendoRadioButton\n                    [checked]=\"isSelected(item.value)\"\n                    [attr.id]=\"radioId(item.value)\"\n                    (change)=\"onChange(item.value, input)\"\n                    (keydown.shift.tab)=\"onShiftTab($event)\"\n                />\n                <label class=\"k-radio-label\" [attr.for]=\"radioId(item.value)\">{{item.text}}</label>\n            </li>\n        </ul>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], BooleanFilterMenuComponent);

package/dist/es/filtering/menu/filter-menu-container.component.js

@@ -226,7 +226,7 @@ var FilterMenuContainerComponent = /** @class */ (function () {
                 MenuTabbingService
             ],
             selector: 'kendo-grid-filter-menu-container',
-            template: "\n        <form (submit)=\"submit()\" (reset)=\"reset()\"\n            class=\"k-filter-menu k-group k-reset k-state-border-up\">\n            <div class=\"k-filter-menu-container\">\n                <ng-container [ngSwitch]=\"hasTemplate\">\n                    <ng-container *ngSwitchCase=\"false\">\n                        <ng-container\n                            kendoFilterMenuHost\n                            [filterService]=\"childService\"\n                            [column]=\"column\"\n                            [filter]=\"childFilter\"\n                            [menuTabbingService]=\"menuTabbingService\">\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"true\">\n                        <ng-template\n                            *ngIf=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutlet]=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"templateContext\"\n                            >\n                        </ng-template>\n                    </ng-container>\n                </ng-container>\n                <div [ngClass]=\"actionsClass\">\n                    <button\n                        #resetButton\n                        type=\"reset\"\n                        class=\"k-button\"\n                        (keydown.tab)=\"onTab($event, 'reset')\">{{clearText}}</button>\n                    <button #filterButton\n                        type=\"submit\"\n                        class=\"k-button k-primary\"\n                        [disabled]=\"disabled\"\n                        (keydown.tab)=\"onTab($event, 'filter')\">{{filterText}}</button>\n                </div>\n            </div>\n        </form>\n    "
+            template: "\n        <form (submit)=\"submit()\" (reset)=\"reset()\"\n            class=\"k-filter-menu k-group k-reset k-state-border-up\">\n            <div class=\"k-filter-menu-container\">\n                <ng-container [ngSwitch]=\"hasTemplate\">\n                    <ng-container *ngSwitchCase=\"false\">\n                        <ng-container\n                            kendoFilterMenuHost\n                            [filterService]=\"childService\"\n                            [column]=\"column\"\n                            [filter]=\"childFilter\"\n                            [menuTabbingService]=\"menuTabbingService\">\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"true\">\n                        <ng-template\n                            *ngIf=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutlet]=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"templateContext\"\n                            >\n                        </ng-template>\n                    </ng-container>\n                </ng-container>\n                <div [ngClass]=\"actionsClass\">\n                    <button\n                        #resetButton\n                        type=\"reset\"\n                        class=\"k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle\"\n                        (keydown.tab)=\"onTab($event, 'reset')\">{{clearText}}</button>\n                    <button #filterButton\n                        type=\"submit\"\n                        class=\"k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle\"\n                        [disabled]=\"disabled\"\n                        (keydown.tab)=\"onTab($event, 'filter')\">{{filterText}}</button>\n                </div>\n            </div>\n        </form>\n    "
         }),
         tslib_1.__param(0, SkipSelf()),
         tslib_1.__metadata("design:paramtypes", [FilterService,

package/dist/es/filtering/menu/string-filter-menu-input.component.js

@@ -61,7 +61,7 @@ var StringFilterMenuInputComponent = /** @class */ (function () {
     StringFilterMenuInputComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-grid-string-filter-menu-input',
-            template: "\n        <kendo-grid-filter-menu-input-wrapper\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [currentFilter]=\"currentFilter\"\n            [filterService]=\"filterService\"\n            [isFirstDropDown]=\"isFirstDropDown\"\n            [menuTabbingService]=\"menuTabbingService\"\n            >\n            <input\n                class=\"k-textbox\"\n                kendoFilterInput\n                [columnLabel]=\"columnLabel\"\n                [filterDelay]=\"0\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-grid-filter-menu-input-wrapper>\n    "
+            template: "\n        <kendo-grid-filter-menu-input-wrapper\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [currentFilter]=\"currentFilter\"\n            [filterService]=\"filterService\"\n            [isFirstDropDown]=\"isFirstDropDown\"\n            [menuTabbingService]=\"menuTabbingService\"\n            >\n            <input\n                kendoTextBox\n                kendoFilterInput\n                [columnLabel]=\"columnLabel\"\n                [filterDelay]=\"0\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-grid-filter-menu-input-wrapper>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], StringFilterMenuInputComponent);

package/dist/es/grid.component.js

@@ -1452,7 +1452,7 @@ var GridComponent = /** @class */ (function () {
      *            [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>
@@ -1518,10 +1518,10 @@ var GridComponent = /** @class */ (function () {
      *          [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>
@@ -1700,7 +1700,7 @@ var GridComponent = /** @class */ (function () {
      *            [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>
@@ -2561,7 +2561,6 @@ var GridComponent = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", [])
     ], GridComponent.prototype, "dir", null);
     tslib_1.__decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-grid'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])

package/dist/es/grouping/group-indicator.component.js

@@ -65,7 +65,7 @@ var GroupIndicatorComponent = /** @class */ (function () {
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
             selector: '[kendoGroupIndicator]',
-            template: "\n        <a href=\"#\" class=\"k-link\" tabindex=\"-1\" (click)=\"toggleDirection()\">\n            <span class=\"k-icon\"\n                [class.k-i-sort-asc-sm]=\"dir === 'asc'\"\n                [class.k-i-sort-desc-sm]=\"dir === 'desc'\"></span>\n            {{groupTitle}}</a>\n        <a class=\"k-button k-button-icon k-bare\" tabindex=\"-1\" (click)=\"removeDescriptor()\">\n            <span class=\"k-icon k-i-group-delete\"></span>\n        </a>\n    "
+            template: "\n        <a href=\"#\" class=\"k-link\" tabindex=\"-1\" (click)=\"toggleDirection()\">\n            <span class=\"k-icon\"\n                [class.k-i-sort-asc-sm]=\"dir === 'asc'\"\n                [class.k-i-sort-desc-sm]=\"dir === 'desc'\"></span>\n            {{groupTitle}}</a>\n        <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()\">\n            <span class=\"k-button-icon k-icon k-i-group-delete\"></span>\n        </a>\n    "
         })
     ], GroupIndicatorComponent);
     return GroupIndicatorComponent;

package/dist/es/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/es/package-metadata.js

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

@@ -109,7 +109,7 @@ var PagerNumericButtonsComponent = /** @class */ (function (_super) {
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
             selector: 'kendo-pager-numeric-buttons',
-            template: "\n        <select\n            class=\"k-dropdown k-pager-nav\"\n            kendoGridFocusable\n            tabindex=\"0\"\n            [value]=\"(currentPage).toString()\"\n            (change)=\"onSelectChange($event)\">\n            <option *ngIf=\"start > 1\"\n                class=\"k-link\"\n                value=\"previousButtons\"\n                [attr.aria-label]=\"pageLabel(start - 1)\">...\n            </option>\n            <option *ngFor=\"let num of buttons\"\n                [value]=\"num.toString()\"\n                [attr.aria-label]=\"pageLabel(num)\"\n                [attr.aria-current]=\"currentPage == num ? 'page' : undefined\"\n                [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num}\">\n                {{num}}\n            </option>\n            <option *ngIf=\"end < totalPages\"\n                value=\"nextButtons\"\n                class=\"k-link\"\n                [attr.aria-label]=\"pageLabel(end + 1)\">...\n            </option>\n        </select>\n        <ul [ngClass]=\"{'k-pager-numbers': true, 'k-reset': true}\">\n            <li *ngIf=\"start > 1\">\n                <span\n                    kendoGridFocusable\n                    tabindex=\"0\"\n                    class=\"k-link k-pager-nav\"\n                    [attr.aria-label]=\"pageLabel(start - 1)\"\n                    (click)=\"changePage(start - 2)\"\n                    (keydown.enter)=\"changePage(start - 2)\">...</span>\n            </li>\n            <li *ngFor=\"let num of buttons\">\n                <span\n                    kendoGridFocusable\n                    tabindex=\"0\"\n                    [attr.aria-label]=\"pageLabel(num)\"\n                    [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num, 'k-pager-nav': true}\"\n                    (click)=\"changePage(num - 1)\"\n                    (keydown.enter)=\"changePage(num - 1)\">\n                    {{num}}\n                </span>\n            </li>\n            <li *ngIf=\"end < totalPages\">\n                <span\n                    kendoGridFocusable\n                    tabindex=\"0\"\n                    class=\"k-link k-pager-nav\"\n                    [attr.aria-label]=\"pageLabel(end + 1)\"\n                    (click)=\"changePage(end)\"\n                    (keydown.enter)=\"changePage(end)\">...</span>\n            </li>\n        </ul>\n    "
+            template: "\n        <select\n            class=\"k-dropdownlist k-pager-nav\"\n            kendoGridFocusable\n            tabindex=\"0\"\n            [value]=\"(currentPage).toString()\"\n            (change)=\"onSelectChange($event)\">\n            <option *ngIf=\"start > 1\"\n                class=\"k-link\"\n                value=\"previousButtons\"\n                [attr.aria-label]=\"pageLabel(start - 1)\">...\n            </option>\n            <option *ngFor=\"let num of buttons\"\n                [value]=\"num.toString()\"\n                [attr.aria-label]=\"pageLabel(num)\"\n                [attr.aria-current]=\"currentPage == num ? 'page' : undefined\"\n                [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num}\">\n                {{num}}\n            </option>\n            <option *ngIf=\"end < totalPages\"\n                value=\"nextButtons\"\n                class=\"k-link\"\n                [attr.aria-label]=\"pageLabel(end + 1)\">...\n            </option>\n        </select>\n        <ul [ngClass]=\"{'k-pager-numbers': true, 'k-reset': true}\">\n            <li *ngIf=\"start > 1\">\n                <span\n                    kendoGridFocusable\n                    tabindex=\"0\"\n                    class=\"k-link k-pager-nav\"\n                    [attr.aria-label]=\"pageLabel(start - 1)\"\n                    (click)=\"changePage(start - 2)\"\n                    (keydown.enter)=\"changePage(start - 2)\">...</span>\n            </li>\n            <li *ngFor=\"let num of buttons\">\n                <span\n                    kendoGridFocusable\n                    tabindex=\"0\"\n                    [attr.aria-label]=\"pageLabel(num)\"\n                    [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num, 'k-pager-nav': true}\"\n                    (click)=\"changePage(num - 1)\"\n                    (keydown.enter)=\"changePage(num - 1)\">\n                    {{num}}\n                </span>\n            </li>\n            <li *ngIf=\"end < totalPages\">\n                <span\n                    kendoGridFocusable\n                    tabindex=\"0\"\n                    class=\"k-link k-pager-nav\"\n                    [attr.aria-label]=\"pageLabel(end + 1)\"\n                    (click)=\"changePage(end)\"\n                    (keydown.enter)=\"changePage(end)\">...</span>\n            </li>\n        </ul>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             ChangeDetectorRef,

package/dist/es/pager/pager.component.js

@@ -37,7 +37,6 @@ var PagerComponent = /** @class */ (function () {
         this.pageChange = new EventEmitter();
         this.pagerWrapClass = true;
         this.gridPagerClass = true;
-        this.widgetClass = true;
         this.settings = normalize({});
         this.subscriptions = new Subscription();
         this._templateContext = {};
@@ -284,10 +283,6 @@ var PagerComponent = /** @class */ (function () {
         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/es/pdf/export-element.js

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

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

@@ -232,7 +232,7 @@ var CellComponent = /** @class */ (function () {
     CellComponent = tslib_1.__decorate([
         Component({
             selector: '[kendoGridCell]',
-            template: "\n        <ng-container [ngSwitch]=\"isEdited\">\n            <ng-container *ngSwitchCase=\"false\">\n                <ng-container *ngIf=\"!showLoading; else loading\">\n                    <ng-template [ngIf]=\"column.templateRef\"\n                        [ngTemplateOutlet]=\"column.templateRef\"\n                        [ngTemplateOutletContext]=\"templateContext\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"isSpanColumn\">\n                        <ng-template ngFor let-childColumn [ngForOf]=\"childColumns\">\n                            {{ dataItem | valueOf: childColumn.field: childColumn.format}}\n                        </ng-template>\n                    </ng-template>\n                    <ng-template [ngIf]=\"isBoundColumn\">{{ dataItem | valueOf: column.field: column.format}}</ng-template>\n                    <ng-template [ngIf]=\"isCheckboxColumn && !isNew\">\n                        <input\n                            class=\"k-checkbox\"\n                            [kendoGridSelectionCheckbox]=\"rowIndex\"\n                            [attr.id]=\"selectionCheckboxId\"\n                            [attr.aria-label]=\"selectionCheckboxLabel\" />\n                    </ng-template>\n                </ng-container>\n                <ng-template #loading>\n                    <ng-template\n                        *ngIf=\"loadingTemplate\"\n                        [ngTemplateOutlet]=\"loadingTemplate\"\n                        [ngTemplateOutletContext]=\"{$implicit: column}\">\n                    </ng-template>\n                    <div *ngIf=\"!loadingTemplate\" class=\"k-skeleton-text k-skeleton\"></div>\n                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"true\">\n                <ng-template\n                    *ngIf=\"column.editTemplateRef\"\n                    [ngTemplateOutlet]=\"column.editTemplateRef\"\n                    [ngTemplateOutletContext]=\"editTemplateContext\">\n                </ng-template>\n                <ng-container [ngSwitch]=\"column.editor\" *ngIf=\"!column.editTemplateRef\">\n                    <kendo-numerictextbox\n                        *ngSwitchCase=\"'numeric'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoGridFocusable\n                    ></kendo-numerictextbox>\n\n                    <kendo-datepicker\n                        *ngSwitchCase=\"'date'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoGridFocusable\n                    ></kendo-datepicker>\n\n                    <input\n                        *ngSwitchCase=\"'boolean'\"\n                        type=\"checkbox\"\n                        class=\"k-checkbox\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoGridFocusable\n                    />\n\n                    <input\n                        *ngSwitchDefault\n                        type=\"text\"\n                        class=\"k-textbox\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoGridFocusable\n                    />\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    "
+            template: "\n        <ng-container [ngSwitch]=\"isEdited\">\n            <ng-container *ngSwitchCase=\"false\">\n                <ng-container *ngIf=\"!showLoading; else loading\">\n                    <ng-template [ngIf]=\"column.templateRef\"\n                        [ngTemplateOutlet]=\"column.templateRef\"\n                        [ngTemplateOutletContext]=\"templateContext\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"isSpanColumn\">\n                        <ng-template ngFor let-childColumn [ngForOf]=\"childColumns\">\n                            {{ dataItem | valueOf: childColumn.field: childColumn.format}}\n                        </ng-template>\n                    </ng-template>\n                    <ng-template [ngIf]=\"isBoundColumn\">{{ dataItem | valueOf: column.field: column.format}}</ng-template>\n                    <ng-template [ngIf]=\"isCheckboxColumn && !isNew\">\n                        <input\n                            class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                            [kendoGridSelectionCheckbox]=\"rowIndex\"\n                            [attr.id]=\"selectionCheckboxId\"\n                            [attr.aria-label]=\"selectionCheckboxLabel\" />\n                    </ng-template>\n                </ng-container>\n                <ng-template #loading>\n                    <ng-template\n                        *ngIf=\"loadingTemplate\"\n                        [ngTemplateOutlet]=\"loadingTemplate\"\n                        [ngTemplateOutletContext]=\"{$implicit: column}\">\n                    </ng-template>\n                    <div *ngIf=\"!loadingTemplate\" class=\"k-skeleton-text k-skeleton\"></div>\n                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"true\">\n                <ng-template\n                    *ngIf=\"column.editTemplateRef\"\n                    [ngTemplateOutlet]=\"column.editTemplateRef\"\n                    [ngTemplateOutletContext]=\"editTemplateContext\">\n                </ng-template>\n                <ng-container [ngSwitch]=\"column.editor\" *ngIf=\"!column.editTemplateRef\">\n                    <kendo-numerictextbox\n                        *ngSwitchCase=\"'numeric'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoGridFocusable\n                    ></kendo-numerictextbox>\n\n                    <kendo-datepicker\n                        *ngSwitchCase=\"'date'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoGridFocusable\n                    ></kendo-datepicker>\n\n                    <input\n                        *ngSwitchCase=\"'boolean'\"\n                        type=\"checkbox\"\n                        class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoGridFocusable\n                    />\n\n                    <input\n                        *ngSwitchDefault\n                        type=\"text\"\n                        class=\"k-textbox k-input k-rounded-md\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoGridFocusable\n                    />\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    "
         }),
         tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(CELL_CONTEXT)),
         tslib_1.__metadata("design:paramtypes", [EditService,

package/dist/es/rendering/constants.js

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

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

@@ -552,7 +552,7 @@ var HeaderComponent = /** @class */ (function () {
         Component({
             selector: '[kendoGridHeader]',
             styles: ["\n        .k-column-resizer {\n            cursor: col-resize;\n            display: block;\n            height: 1000%;\n            position: absolute;\n            top: 0;\n            width: .5em;\n        }\n    "],
-            template: "\n    <ng-template [ngIf]=\"true\">\n        <tr *ngFor=\"let i of columnLevels; let levelIndex = index\"\n            kendoGridLogicalRow\n                [logicalRowIndex]=\"levelIndex\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n            <th\n                class=\"k-group-cell k-header\"\n                role=\"presentation\"\n                *ngFor=\"let g of groups\">\n            </th>\n            <th class=\"k-hierarchy-cell k-header\"\n                role=\"presentation\"\n                *ngIf=\"detailTemplate?.templateRef\"\n                kendoGridLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"0\"\n                    aria-selected=\"false\"\n            >\n            </th>\n            <ng-template ngFor let-column [ngForOf]=\"columnsForLevel(levelIndex)\" [ngForTrackBy]=\"trackByIndex\" let-columnIndex=\"index\" let-last=\"last\">\n                <th *ngIf=\"!isColumnGroupComponent(column)\"\n                    kendoGridLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [headerLabelText]=\"column.title || column.field\"\n                    [colSpan]=\"column.colspan\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    role=\"columnheader\"\n                    aria-selected=\"false\"\n                    [attr.aria-sort]=\"sortState(column)\"\n                    (keydown)=\"onHeaderKeydown(column, $event)\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        field: column.field,\n                        type: 'column',\n                        column: column,\n                        hint: column.title || column.field,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-filterable]=\"(showFilterMenu && isFilterable(column)) || showColumnMenu(column)\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [class.k-grid-header-sticky]=\"column.sticky\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.sticky ? addStickyStyles(column) : column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n\n                    <ng-template [ngIf]=\"!isSortable(column)\">\n                        <kendo-grid-filter-menu\n                            *ngIf=\"showFilterMenu && isFilterable(column)\"\n                            [column]=\"column\"\n                            [filter]=\"filter\"\n                            [tabIndex]=\"tabIndex\">\n                        </kendo-grid-filter-menu>\n                        <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\"\n                            [sort]=\"sort\"\n                            [filter]=\"filter\"\n                            [sortable]=\"sortable\"\n                            [tabIndex]=\"tabIndex\">\n                        </kendo-grid-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: column.leafIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                    </ng-template>\n\n                    <ng-template [ngIf]=\"isSortable(column)\">\n                        <span class=\"k-cell-inner\">\n                            <span #link class=\"k-link\" (click)=\"onSortClick(column, $event, link)\">\n                                <ng-template\n                                    [templateContext]=\"{\n                                        templateRef: column.headerTemplateRef,\n                                        columnIndex: column.leafIndex,\n                                        column: column,\n                                        $implicit: column\n                                    }\">\n                                </ng-template>\n                                <ng-template [ngIf]=\"!column.headerTemplateRef\">\n                                    <span class=\"k-column-title\">{{column.displayTitle}}</span>\n                                </ng-template>\n                                <span [attr.aria-label]=\"sortableLabel\" [ngClass]=\"sortIcon(column.field)\"></span>\n                                <span *ngIf=\"showSortNumbering(column)\" class=\"k-sort-order\">{{sortOrder(column.field)}}</span>\n                            </span>\n                            <span role=\"status\"\n                                class=\"k-sort-status\"\n                                style=\"position: absolute; left: -10000px;\"\n                                [innerHtml]=\"sortStatus(column)\">\n                            </span>\n                            <kendo-grid-filter-menu\n                                *ngIf=\"showFilterMenu && isFilterable(column)\"\n                                [column]=\"column\"\n                                [filter]=\"filter\"\n                                [tabIndex]=\"tabIndex\">\n                            </kendo-grid-filter-menu>\n                            <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n                                [standalone]=\"false\"\n                                [settings]=\"columnMenu\"\n                                [column]=\"column\"\n                                [columnMenuTemplate]=\"columnMenuTemplate\"\n                                [sort]=\"sort\"\n                                [filter]=\"filter\"\n                                [sortable]=\"sortable\"\n                                [tabIndex]=\"tabIndex\">\n                            </kendo-grid-column-menu>\n                        </span>\n                    </ng-template>\n\n                    <ng-template [ngIf]=\"isCheckboxColumn(column) && !column.headerTemplateRef && column.showSelectAll\">\n                        <input\n                            class=\"k-checkbox\"\n                            [attr.id]=\"selectAllCheckboxId()\"\n                            [attr.aria-label]=\"selectAllCheckboxLabel\"\n                            kendoGridSelectAllCheckbox\n                            kendoGridFocusable>\n                    </ng-template>\n                    <span kendoGridColumnHandle\n                        kendoDraggable\n                        class=\"k-column-resizer\"\n                        *ngIf=\"resizable\"\n                        [column]=\"column\"\n                        [columns]=\"columns\">\n                    </span>\n                </th>\n                <th *ngIf=\"isColumnGroupComponent(column)\"\n                    kendoGridLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    [colSpan]=\"column.colspan\"\n                    [headerLabelText]=\"column.title || column.field\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        type: 'columnGroup',\n                        column: column,\n                        hint: column.title,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [class.k-filterable]=\"showColumnMenu(column)\"\n                    [class.k-grid-content-sticky]=\"column.sticky\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                        <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\">\n                        </kendo-grid-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: lockedColumnsCount + columnIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                        <span kendoGridColumnHandle\n                            kendoDraggable\n                            class=\"k-column-resizer\"\n                            *ngIf=\"resizable\"\n                            [column]=\"column\"\n                            [columns]=\"columns\">\n                        </span>\n                </th>\n            </ng-template>\n        </tr>\n        <tr *ngIf=\"showFilterRow\"\n            kendoGridFilterRow\n                [columns]=\"leafColumns\"\n                [filter]=\"filter\"\n                [groups]=\"groups\"\n                [detailTemplate]=\"detailTemplate\"\n                [lockedColumnsCount]=\"lockedColumnsCount\"\n            kendoGridLogicalRow\n                [logicalRowIndex]=\"totalColumnLevels + 1\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n        ></tr>\n    </ng-template>\n    "
+            template: "\n    <ng-template [ngIf]=\"true\">\n        <tr *ngFor=\"let i of columnLevels; let levelIndex = index\"\n            kendoGridLogicalRow\n                [logicalRowIndex]=\"levelIndex\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n            <th\n                class=\"k-group-cell k-header\"\n                role=\"presentation\"\n                *ngFor=\"let g of groups\">\n            </th>\n            <th class=\"k-hierarchy-cell k-header\"\n                role=\"presentation\"\n                *ngIf=\"detailTemplate?.templateRef\"\n                kendoGridLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"0\"\n                    aria-selected=\"false\"\n            >\n            </th>\n            <ng-template ngFor let-column [ngForOf]=\"columnsForLevel(levelIndex)\" [ngForTrackBy]=\"trackByIndex\" let-columnIndex=\"index\" let-last=\"last\">\n                <th *ngIf=\"!isColumnGroupComponent(column)\"\n                    kendoGridLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [headerLabelText]=\"column.title || column.field\"\n                    [colSpan]=\"column.colspan\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    role=\"columnheader\"\n                    aria-selected=\"false\"\n                    [attr.aria-sort]=\"sortState(column)\"\n                    (keydown)=\"onHeaderKeydown(column, $event)\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        field: column.field,\n                        type: 'column',\n                        column: column,\n                        hint: column.title || column.field,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-filterable]=\"(showFilterMenu && isFilterable(column)) || showColumnMenu(column)\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [class.k-grid-header-sticky]=\"column.sticky\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.sticky ? addStickyStyles(column) : column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n\n                    <ng-template [ngIf]=\"!isSortable(column)\">\n                        <kendo-grid-filter-menu\n                            *ngIf=\"showFilterMenu && isFilterable(column)\"\n                            [column]=\"column\"\n                            [filter]=\"filter\"\n                            [tabIndex]=\"tabIndex\">\n                        </kendo-grid-filter-menu>\n                        <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\"\n                            [sort]=\"sort\"\n                            [filter]=\"filter\"\n                            [sortable]=\"sortable\"\n                            [tabIndex]=\"tabIndex\">\n                        </kendo-grid-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: column.leafIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                    </ng-template>\n\n                    <ng-template [ngIf]=\"isSortable(column)\">\n                        <span class=\"k-cell-inner\">\n                            <span #link class=\"k-link\" (click)=\"onSortClick(column, $event, link)\">\n                                <ng-template\n                                    [templateContext]=\"{\n                                        templateRef: column.headerTemplateRef,\n                                        columnIndex: column.leafIndex,\n                                        column: column,\n                                        $implicit: column\n                                    }\">\n                                </ng-template>\n                                <ng-template [ngIf]=\"!column.headerTemplateRef\">\n                                    <span class=\"k-column-title\">{{column.displayTitle}}</span>\n                                </ng-template>\n                                <span [attr.aria-label]=\"sortableLabel\" [ngClass]=\"sortIcon(column.field)\"></span>\n                                <span *ngIf=\"showSortNumbering(column)\" class=\"k-sort-order\">{{sortOrder(column.field)}}</span>\n                            </span>\n                            <span role=\"status\"\n                                class=\"k-sort-status\"\n                                style=\"position: absolute; left: -10000px;\"\n                                [innerHtml]=\"sortStatus(column)\">\n                            </span>\n                            <kendo-grid-filter-menu\n                                *ngIf=\"showFilterMenu && isFilterable(column)\"\n                                [column]=\"column\"\n                                [filter]=\"filter\"\n                                [tabIndex]=\"tabIndex\">\n                            </kendo-grid-filter-menu>\n                            <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n                                [standalone]=\"false\"\n                                [settings]=\"columnMenu\"\n                                [column]=\"column\"\n                                [columnMenuTemplate]=\"columnMenuTemplate\"\n                                [sort]=\"sort\"\n                                [filter]=\"filter\"\n                                [sortable]=\"sortable\"\n                                [tabIndex]=\"tabIndex\">\n                            </kendo-grid-column-menu>\n                        </span>\n                    </ng-template>\n\n                    <ng-template [ngIf]=\"isCheckboxColumn(column) && !column.headerTemplateRef && column.showSelectAll\">\n                        <input\n                            class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                            [attr.id]=\"selectAllCheckboxId()\"\n                            [attr.aria-label]=\"selectAllCheckboxLabel\"\n                            kendoGridSelectAllCheckbox\n                            kendoGridFocusable>\n                    </ng-template>\n                    <span kendoGridColumnHandle\n                        kendoDraggable\n                        class=\"k-column-resizer\"\n                        *ngIf=\"resizable\"\n                        [column]=\"column\"\n                        [columns]=\"columns\">\n                    </span>\n                </th>\n                <th *ngIf=\"isColumnGroupComponent(column)\"\n                    kendoGridLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    [colSpan]=\"column.colspan\"\n                    [headerLabelText]=\"column.title || column.field\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        type: 'columnGroup',\n                        column: column,\n                        hint: column.title,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [class.k-filterable]=\"showColumnMenu(column)\"\n                    [class.k-grid-content-sticky]=\"column.sticky\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                        <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\">\n                        </kendo-grid-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: lockedColumnsCount + columnIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                        <span kendoGridColumnHandle\n                            kendoDraggable\n                            class=\"k-column-resizer\"\n                            *ngIf=\"resizable\"\n                            [column]=\"column\"\n                            [columns]=\"columns\">\n                        </span>\n                </th>\n            </ng-template>\n        </tr>\n        <tr *ngIf=\"showFilterRow\"\n            kendoGridFilterRow\n                [columns]=\"leafColumns\"\n                [filter]=\"filter\"\n                [groups]=\"groups\"\n                [detailTemplate]=\"detailTemplate\"\n                [lockedColumnsCount]=\"lockedColumnsCount\"\n            kendoGridLogicalRow\n                [logicalRowIndex]=\"totalColumnLevels + 1\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n        ></tr>\n    </ng-template>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [SinglePopupService,
             DragHintService,

package/dist/es/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/es2015/column-menu/column-chooser.component.js

@@ -129,9 +129,9 @@ ColumnChooserComponent = tslib_1.__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>

package/dist/es2015/column-menu/column-list.component.js

@@ -214,12 +214,12 @@ ColumnListComponent = tslib_1.__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>
     `
     }),

package/dist/es2015/dragdrop/draggable-column.directive.js

@@ -22,9 +22,9 @@ const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150),
 const ɵ0 = preventOnDblClick;
 const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
 const ɵ1 = hasClass;
-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 ɵ2 = elementUnderCursor;
 const hideThenShow = (element, cont) => {

package/dist/es2015/filtering/cell/filter-cell-operators.component.js

@@ -131,12 +131,12 @@ FilterCellOperatorsComponent = tslib_1.__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>
     `
     }),

package/dist/es2015/filtering/cell/string-filter-cell.component.js

@@ -70,7 +70,7 @@ StringFilterCellComponent = tslib_1.__decorate([
             [defaultOperator]="operator"
             [showOperators]="showOperators">
             <input
-                class="k-textbox"
+                kendoTextBox
                 kendoGridFocusable
                 kendoFilterInput
                 [columnLabel]="columnLabel"

package/dist/es2015/filtering/filter-input.directive.js

@@ -66,7 +66,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 {

package/dist/es2015/filtering/menu/boolean-filter-menu.component.js

@@ -121,7 +121,7 @@ BooleanFilterMenuComponent = tslib_1.__decorate([
                     [columnLabel]="columnLabel"
                     #input
                     [name]="idPrefix"
-                    class="k-radio"
+                    kendoRadioButton
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
                     (change)="onChange(item.value, input)"

package/dist/es2015/filtering/menu/filter-menu-container.component.js

@@ -221,11 +221,11 @@ FilterMenuContainerComponent = tslib_1.__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>

package/dist/es2015/filtering/menu/string-filter-menu-input.component.js

@@ -70,7 +70,7 @@ StringFilterMenuInputComponent = tslib_1.__decorate([
             [menuTabbingService]="menuTabbingService"
             >
             <input
-                class="k-textbox"
+                kendoTextBox
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"

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

@@ -808,7 +808,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      *            [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>
@@ -872,10 +872,10 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      *          [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>
@@ -1000,7 +1000,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      *            [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>

package/dist/es2015/grid.component.js

@@ -1212,7 +1212,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>
@@ -1278,10 +1278,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>
@@ -1454,7 +1454,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>
@@ -2291,7 +2291,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:paramtypes", [])
 ], GridComponent.prototype, "dir", null);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-grid'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])