@progress/kendo-angular-grid 11.0.0-develop.79 → 11.0.0-develop.81

package/fesm2015/progress-kendo-angular-grid.mjs

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2022 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
@@ -19,20 +19,21 @@ import { orderBy, isCompositeFilterDescriptor, process, filterBy } from '@progre
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i1$3 from '@angular/platform-browser';
-import * as i4$1 from '@progress/kendo-angular-inputs';
+import * as i4$1 from '@progress/kendo-angular-buttons';
+import { ButtonModule, Button } from '@progress/kendo-angular-buttons';
+import * as i3 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i1$4 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, DropDownListModule, AutoCompleteModule, DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import * as i5 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
-import * as i4$3 from '@progress/kendo-angular-dateinputs';
+import * as i5$1 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { getter } from '@progress/kendo-common';
 import * as i1$5 from '@progress/kendo-angular-intl';
-import * as i3 from '@progress/kendo-angular-icons';
+import * as i3$1 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
-import { Button } from '@progress/kendo-angular-buttons';
 import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponent } from '@progress/kendo-angular-pdf-export';
 import { saveAs } from '@progress/kendo-file-saver';
 import { workbookOptions, toDataURL, ColumnBase as ColumnBase$1, ExcelExportModule } from '@progress/kendo-angular-excel-export';
@@ -2854,7 +2855,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1672320946,
+    publishDate: 1672821818,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -6651,23 +6652,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+class SizingOptionsService {
+    constructor() {
+        this.changes = new Subject();
+    }
+}
+SizingOptionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SizingOptionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SizingOptionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SizingOptionsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SizingOptionsService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * @hidden
  */
 class ToolbarComponent {
-    constructor(ctx) {
+    constructor(ctx, wrapper) {
         this.ctx = ctx;
+        this.wrapper = wrapper;
         this.context = {};
+        this._size = 'medium';
+    }
+    get sizeSmallClass() {
+        return this.size === 'small';
+    }
+    get sizeMediumClass() {
+        return this.size === 'medium' || !this.size;
     }
     set position(value) {
         this.context.position = value;
     }
+    set size(size) {
+        this._size = size;
+        if (size === 'none') {
+            this.wrapper.nativeElement.classList.remove('k-toolbar-sm', 'k-toolbar-md');
+        }
+    }
+    ;
+    get size() {
+        return this._size;
+    }
     get toolbarTemplateRef() {
         return this.ctx.grid.toolbarTemplate ? this.ctx.grid.toolbarTemplate.templateRef : undefined;
     }
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: { position: "position" }, ngImport: i0, template: `
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, deps: [{ token: ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size" }, host: { properties: { "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
         <ng-template
             *ngIf="toolbarTemplateRef"
             [ngTemplateOutlet]="toolbarTemplateRef"
@@ -6688,7 +6718,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { position: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ElementRef }]; }, propDecorators: { sizeSmallClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-sm']
+            }], sizeMediumClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-md']
+            }], position: [{
+                type: Input
+            }], size: [{
                 type: Input
             }] } });
 
@@ -6785,6 +6823,11 @@ class PagerElementComponent {
         this.total = this.pagerContext.total;
         this.skip = this.pagerContext.skip;
         this.pageSize = this.pagerContext.pageSize;
+        /**
+         * Sets the pager element sizing option.
+         * @default `medium`
+         */
+        this.size = 'medium';
     }
     /**
      * @hidden
@@ -6844,11 +6887,13 @@ class PagerElementComponent {
     }
 }
 PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-PagerElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PagerElementComponent, ngImport: i0 });
+PagerElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PagerElementComponent, inputs: { size: "size" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerElementComponent, decorators: [{
             type: Directive,
             args: [{}]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
+                type: Input
+            }] } });
 
 /**
  * Displays buttons for navigating to the first and to the previous page ([see example]({% slug paging_grid %}#toc-pager-templates)).
@@ -6877,93 +6922,71 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
 }
 PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
-        <span
+        <button
             [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
             [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
-            (keydown.enter)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-first': true
-            }">
-            <span role="note"
-                  [attr.aria-label]="textFor('pagerFirstPage')"
-                  [ngClass]="{
-                    'k-icon': true,
-                    'k-i-caret-alt-to-left': true
-                  }">
-            </span>
-        </span>
-        <span
+            icon="caret-alt-to-left"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none"
+            [size]="size">
+        </button>
+        <button
+            kendoButton
             [kendoGridFocusable]="!disabled"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
             [title]="textFor('pagerPreviousPage')"
-            role="button"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            (keydown.enter)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span role="note"
-                  [attr.aria-label]="textFor('pagerPreviousPage')"
-                  [ngClass]="{
-                    'k-icon': true,
-                    'k-i-caret-alt-left': true
-                  }">
-            </span>
-        </span>
-    `, isInline: true, directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-pager-prev-buttons',
                     template: `
-        <span
+        <button
             [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
             [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
-            (keydown.enter)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-first': true
-            }">
-            <span role="note"
-                  [attr.aria-label]="textFor('pagerFirstPage')"
-                  [ngClass]="{
-                    'k-icon': true,
-                    'k-i-caret-alt-to-left': true
-                  }">
-            </span>
-        </span>
-        <span
+            icon="caret-alt-to-left"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none"
+            [size]="size">
+        </button>
+        <button
+            kendoButton
             [kendoGridFocusable]="!disabled"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
             [title]="textFor('pagerPreviousPage')"
-            role="button"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            (keydown.enter)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span role="note"
-                  [attr.aria-label]="textFor('pagerPreviousPage')"
-                  [ngClass]="{
-                    'k-icon': true,
-                    'k-i-caret-alt-left': true
-                  }">
-            </span>
-        </span>
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
@@ -7047,12 +7070,16 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
 PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
 PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
         <select
-            class="k-dropdownlist k-pager-nav"
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md k-pager-nav"
             kendoGridFocusable
-            tabindex="0"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
+            [ngClass]="{
+                'k-picker-sm': size === 'small',
+                'k-picker-md': size === 'medium' || !size
+            }"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -7062,51 +7089,58 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-selected':currentPage === num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
                 value="nextButtons"
                 [selected]="false"
-                class="k-link"
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    class="k-link k-pager-nav"
-                    role="button"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    (click)="changePage(start - 2)"
-                    (keydown.enter)="changePage(start - 2)">...</span>
-            </li>
-            <li *ngFor="let num of buttons">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    role="button"
-                    [attr.aria-label]="pageLabel(num)"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num, 'k-pager-nav': true}"
-                    (click)="changePage(num - 1)"
-                    (keydown.enter)="changePage(num - 1)">
-                    {{num}}
-                </span>
-            </li>
-            <li *ngIf="end < totalPages">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    class="k-link k-pager-nav"
-                    role="button"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    (click)="changePage(end)"
-                    (keydown.enter)="changePage(end)">...</span>
-            </li>
-        </ul>
-    `, isInline: true, directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <div class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                kendoGridFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(start - 1)"
+                [attr.title]="pageLabel(start - 1)"
+                (click)="changePage(start - 2)">...</button>
+            <button *ngFor="let num of buttons"
+                type="button"
+                kendoGridFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                kendoGridFocusable
+                kendoButton
+                class="k-pager-nav"
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -7114,12 +7148,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-pager-numeric-buttons',
                     template: `
         <select
-            class="k-dropdownlist k-pager-nav"
+            class="k-dropdown-list k-dropdown k-picker k-rounded-md k-pager-nav"
             kendoGridFocusable
-            tabindex="0"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
+            [ngClass]="{
+                'k-picker-sm': size === 'small',
+                'k-picker-md': size === 'medium' || !size
+            }"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -7129,50 +7167,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-selected':currentPage === num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
                 value="nextButtons"
                 [selected]="false"
-                class="k-link"
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    class="k-link k-pager-nav"
-                    role="button"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    (click)="changePage(start - 2)"
-                    (keydown.enter)="changePage(start - 2)">...</span>
-            </li>
-            <li *ngFor="let num of buttons">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    role="button"
-                    [attr.aria-label]="pageLabel(num)"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num, 'k-pager-nav': true}"
-                    (click)="changePage(num - 1)"
-                    (keydown.enter)="changePage(num - 1)">
-                    {{num}}
-                </span>
-            </li>
-            <li *ngIf="end < totalPages">
-                <span
-                    kendoGridFocusable
-                    tabindex="0"
-                    class="k-link k-pager-nav"
-                    role="button"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    (click)="changePage(end)"
-                    (keydown.enter)="changePage(end)">...</span>
-            </li>
-        </ul>
+        <div class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                kendoGridFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(start - 1)"
+                [attr.title]="pageLabel(start - 1)"
+                (click)="changePage(start - 2)">...</button>
+            <button *ngFor="let num of buttons"
+                type="button"
+                kendoGridFocusable
+                kendoButton
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                kendoGridFocusable
+                kendoButton
+                class="k-pager-nav"
+                [size]="size"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
@@ -7195,12 +7240,12 @@ class PagerInputDirective {
         this.renderer.addClass(inputElement, 'k-pager-nav');
     }
 }
-PagerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputDirective, deps: [{ token: i4$1.NumericTextBoxComponent }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+PagerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputDirective, deps: [{ token: i3.NumericTextBoxComponent }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
 PagerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PagerInputDirective, selector: "[kendoGridPagerInput]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[kendoGridPagerInput]' }]
-        }], ctorParameters: function () { return [{ type: i4$1.NumericTextBoxComponent }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: function () { return [{ type: i3.NumericTextBoxComponent }, { type: i0.Renderer2 }]; } });
 
 /**
  * Displays an input element which allows the typing and rendering of page numbers.
@@ -7314,12 +7359,11 @@ class PagerInputComponent extends PagerElementComponent {
 }
 PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: NavigationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInputComponent, selector: "kendo-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
+     <span class="k-pager-input k-label">
         {{textFor('pagerPage')}}
         <kendo-numerictextbox
             kendoGridPagerInput
             [kendoGridFocusable]="hasPages"
-            [tabindex]="0"
             [spinners]="false"
             [decimals]="0"
             format="n0"
@@ -7327,6 +7371,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [value]="current"
             [min]="hasPages ? 1 : 0"
             [max]="totalPages"
+            [size]="size"
             [autoCorrect]="true"
             [title]="textFor('pagerPageNumberInputTitle')"
             [kendoEventsOutsideAngular]="{
@@ -7337,18 +7382,17 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </kendo-numerictextbox>
         {{textFor('pagerOf')}} {{totalPages}}
      </span>
-    `, isInline: true, components: [{ type: i4$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PagerInputDirective, selector: "[kendoGridPagerInput]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: PagerInputDirective, selector: "[kendoGridPagerInput]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pager-input',
                     template: `
-     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
+     <span class="k-pager-input k-label">
         {{textFor('pagerPage')}}
         <kendo-numerictextbox
             kendoGridPagerInput
             [kendoGridFocusable]="hasPages"
-            [tabindex]="0"
             [spinners]="false"
             [decimals]="0"
             format="n0"
@@ -7356,6 +7400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [value]="current"
             [min]="hasPages ? 1 : 0"
             [max]="totalPages"
+            [size]="size"
             [autoCorrect]="true"
             [title]="textFor('pagerPageNumberInputTitle')"
             [kendoEventsOutsideAngular]="{
@@ -7400,93 +7445,69 @@ class PagerNextButtonsComponent extends PagerElementComponent {
 }
 PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNextButtonsComponent, selector: "kendo-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
-        <span
+        <button
+            kendoButton
             [kendoGridFocusable]="!disabled"
-            tabindex="0"
+            type="button"
+            [size]="size"
+            icon="caret-alt-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false"
-            (keydown.enter)="currentPage !== totalPages ? changePage(currentPage) : false"
-            role="button"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span role="note" [attr.aria-label]="textFor('pagerNextPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-right': true
-                }">
-            </span>
-        </span>
-        <span
+            [attr.aria-label]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <button
+            kendoButton
             [kendoGridFocusable]="!disabled"
-            tabindex="0"
+            type="button"
+            [size]="size"
+            icon="caret-alt-to-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false"
-            (keydown.enter)="currentPage !== totalPages ? changePage(totalPages-1) : false"
-            role="button"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-last': true
-            }">
-            <span role="note" [attr.aria-label]="textFor('pagerLastPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-right': true
-                }">
-            </span>
-        </span>
-    `, isInline: true, directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            [attr.aria-label]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-pager-next-buttons',
                     template: `
-        <span
+        <button
+            kendoButton
             [kendoGridFocusable]="!disabled"
-            tabindex="0"
+            type="button"
+            [size]="size"
+            icon="caret-alt-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false"
-            (keydown.enter)="currentPage !== totalPages ? changePage(currentPage) : false"
-            role="button"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span role="note" [attr.aria-label]="textFor('pagerNextPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-right': true
-                }">
-            </span>
-        </span>
-        <span
+            [attr.aria-label]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <button
+            kendoButton
             [kendoGridFocusable]="!disabled"
-            tabindex="0"
+            type="button"
+            [size]="size"
+            icon="caret-alt-to-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false"
-            (keydown.enter)="currentPage !== totalPages ? changePage(totalPages-1) : false"
-            role="button"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-last': true
-            }">
-            <span role="note" [attr.aria-label]="textFor('pagerLastPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-right': true
-                }">
-            </span>
-        </span>
+            [attr.aria-label]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
@@ -7754,7 +7775,9 @@ class PagerPageSizesComponent extends PagerElementComponent {
 PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
+            class="k-dropdown"
             #dropdownlist
+            [size]="size"
             kendoGridPagerDropDown
             [tabindex]="0"
             kendoGridFocusable
@@ -7773,7 +7796,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-pager-page-sizes',
                     template: `
         <kendo-dropdownlist
+            class="k-dropdown"
             #dropdownlist
+            [size]="size"
             kendoGridPagerDropDown
             [tabindex]="0"
             kendoGridFocusable
@@ -7819,6 +7844,7 @@ class PagerComponent {
         this.subscriptions = new Subscription();
         this._templateContext = {};
         this._isFocused = false;
+        this._size = 'medium';
         this.resizeHandler = () => {
             const element = this.element.nativeElement;
             if (this.template || !element) {
@@ -7826,12 +7852,12 @@ class PagerComponent {
             }
             const width = element.offsetWidth;
             if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                this.renderer.removeClass(element, 'k-pager-md');
-                this.renderer.addClass(element, 'k-pager-sm');
+                this.renderer.removeClass(element, 'k-pager-mobile-md');
+                this.renderer.addClass(element, 'k-pager-mobile-sm');
             }
             else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                this.renderer.addClass(element, 'k-pager-md');
-                this.renderer.removeClass(element, 'k-pager-sm');
+                this.renderer.addClass(element, 'k-pager-mobile-md');
+                this.renderer.removeClass(element, 'k-pager-mobile-sm');
             }
             else {
                 this.clearResponsiveClasses();
@@ -7841,15 +7867,28 @@ class PagerComponent {
     set options(value) {
         this.settings = normalize$1(value);
     }
+    set size(size) {
+        this._size = size;
+        if (size === 'none') {
+            this.element.nativeElement.classList.remove('k-pager-sm', 'k-pager-md');
+        }
+    }
+    ;
+    get size() {
+        return this._size;
+    }
+    get sizeSmallClass() {
+        return this.size === 'small';
+    }
+    get sizeMediumClass() {
+        return this.size === 'medium' || !this.size;
+    }
     get isFocused() {
         return this._isFocused;
     }
     get pagerAriaLabel() {
         return this.navigationService.pagerEnabled ? this.pagerLabel : undefined;
     }
-    /**
-     * @hidden
-     */
     get pagerLabel() {
         const localizationMsg = this.localizationService.get('pagerLabel') || '';
         return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
@@ -7882,6 +7921,7 @@ class PagerComponent {
     }
     onEnter(event) {
         if (this.navigationService.pagerEnabled && event.target === this.element.nativeElement) {
+            event.preventDefault();
             this.focusRoot.activate();
             this.focusFirstElement();
         }
@@ -7973,8 +8013,8 @@ class PagerComponent {
     }
     clearResponsiveClasses() {
         const element = this.element.nativeElement;
-        this.renderer.removeClass(element, 'k-pager-sm');
-        this.renderer.removeClass(element, 'k-pager-md');
+        this.renderer.removeClass(element, 'k-pager-mobile-sm');
+        this.renderer.removeClass(element, 'k-pager-mobile-md');
     }
     shouldTriggerPageChange(target, condition) {
         return this.navigationService.pagerEnabled &&
@@ -8000,7 +8040,7 @@ class PagerComponent {
     }
 }
 PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: CELL_CONTEXT, optional: true }, { token: FocusRoot }, { token: FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-pager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", options: "options", template: "template" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "navigateToPreviousPage($event)", "keydown.pageup": "navigateToPreviousPage($event)", "keydown.arrowright": "navigateToNextPage($event)", "keydown.pagedown": "navigateToNextPage($event)", "keydown.home": "navigateToFirstPage($event)", "keydown.end": "navigateToLastPage($event)" }, properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-focus": "this.isFocused", "attr.aria-label": "this.pagerAriaLabel" } }, providers: [{
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-pager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", options: "options", size: "size", template: "template" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "navigateToPreviousPage($event)", "keydown.pageup": "navigateToPreviousPage($event)", "keydown.arrowright": "navigateToNextPage($event)", "keydown.pagedown": "navigateToNextPage($event)", "keydown.home": "navigateToFirstPage($event)", "keydown.end": "navigateToLastPage($event)" }, properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager-sm": "this.sizeSmallClass", "class.k-pager-md": "this.sizeMediumClass", "class.k-focus": "this.isFocused", "attr.aria-label": "this.pagerAriaLabel" } }, providers: [{
             provide: FOCUS_ROOT_ACTIVE,
             useValue: true
         }, {
@@ -8025,15 +8065,17 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
             <kendo-pager-numeric-buttons
+                [size]="size"
                 *ngIf="settings.type === 'numeric'"
                 [buttonCount]="settings.buttonCount">
             </kendo-pager-numeric-buttons>
-            <kendo-pager-input *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
+                [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
                 #pageSizes
@@ -8078,15 +8120,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
             <kendo-pager-numeric-buttons
+                [size]="size"
                 *ngIf="settings.type === 'numeric'"
                 [buttonCount]="settings.buttonCount">
             </kendo-pager-numeric-buttons>
-            <kendo-pager-input *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
+                [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
                 #pageSizes
@@ -8117,6 +8161,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], template: [{
                 type: Input
             }], pageChange: [{
@@ -8127,6 +8173,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], gridPagerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-pager']
+            }], sizeSmallClass: [{
+                type: HostBinding,
+                args: ['class.k-pager-sm']
+            }], sizeMediumClass: [{
+                type: HostBinding,
+                args: ['class.k-pager-md']
             }], isFocused: [{
                 type: HostBinding,
                 args: ['class.k-focus']
@@ -8922,6 +8974,10 @@ class BaseFilterCellComponent {
     constructor(filterService) {
         this.filterService = filterService;
         this.operatorList = new QueryList();
+        /**
+         * @hidden
+         */
+        this.size = 'medium';
     }
     get hostClasses() {
         return true;
@@ -9546,7 +9602,7 @@ StringFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 [filterDelay]="0"
                 [ngModel]="currentFilter?.value" />
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }], directives: [{ type: i4$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }], directives: [{ type: i3.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -9887,7 +9943,7 @@ NumericFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 </kendo-numerictextbox-messages>
             </kendo-numerictextbox>
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i4$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4$1.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i3.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -10331,7 +10387,7 @@ DateFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i4$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i4$3.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i5$1.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i5$1.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -10788,7 +10844,7 @@ BooleanFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
             </li>
         </ul>
-    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
+    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanFilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -13135,9 +13191,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Represents a component which accommodates the filter operators.
  */
 class FilterCellOperatorsComponent {
-    constructor(localization) {
+    constructor(localization, sizing) {
         this.localization = localization;
+        this.sizing = sizing;
         this.clearText = 'Clear';
+        /**
+         * @hidden
+         */
+        this.size = 'medium';
         /**
          * The filter operators that will be displayed.
          */
@@ -13198,15 +13259,16 @@ class FilterCellOperatorsComponent {
         }
     }
     ngOnInit() {
-        this.subscription = this.localization.changes.subscribe(() => this.clearText = this.localization.get("filterClearButton"));
+        this.subs = this.localization.changes.subscribe(() => this.clearText = this.localization.get('filterClearButton'));
+        this.subs.add(this.sizing.changes.subscribe((size) => this.size = size));
     }
     ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
         }
     }
 }
-FilterCellOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterCellOperatorsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterCellOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterCellOperatorsComponent, deps: [{ token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterCellOperatorsComponent, selector: "kendo-grid-filter-cell-operators", inputs: { operators: "operators", showButton: "showButton", showOperators: "showOperators", value: "value" }, outputs: { valueChange: "valueChange", clear: "clear" }, host: { properties: { "class.k-filtercell-operator": "this.hostClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: `
         <kendo-dropdownlist
             #dropdown
@@ -13221,18 +13283,19 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             textField="text"
             [popupSettings]="{ width: 'auto' }"
             valueField="value"
+            [size]="size"
             (keydown)="dropdownKeydown($event)">
         </kendo-dropdownlist>
         <button type="button"
+            kendoButton
             kendoGridFocusable
             *ngIf="showButton"
-            class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle k-icon-button"
+            icon="filter-clear"
             [title]="clearText"
+            [size]="size"
             (click)="clearClick()"
-            (keydown)="clearKeydown($event)">
-                <span class="k-icon k-button-icon k-i-filter-clear"></span>
-        </button>
-    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+            (keydown)="clearKeydown($event)"></button>
+    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,
             args: [{
@@ -13251,20 +13314,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             textField="text"
             [popupSettings]="{ width: 'auto' }"
             valueField="value"
+            [size]="size"
             (keydown)="dropdownKeydown($event)">
         </kendo-dropdownlist>
         <button type="button"
+            kendoButton
             kendoGridFocusable
             *ngIf="showButton"
-            class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle k-icon-button"
+            icon="filter-clear"
             [title]="clearText"
+            [size]="size"
             (click)="clearClick()"
-            (keydown)="clearKeydown($event)">
-                <span class="k-icon k-button-icon k-i-filter-clear"></span>
-        </button>
+            (keydown)="clearKeydown($event)"></button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell-operator']
             }], dropdown: [{
@@ -13363,7 +13427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  *   ```
  */
 class StringFilterCellComponent extends StringFilterComponent {
-    constructor(filterService, localization) {
+    constructor(filterService, localization, sizingService) {
         super(filterService, localization);
         /**
          * Determines the delay time (in milliseconds) before the filter value is submitted.
@@ -13377,6 +13441,12 @@ class StringFilterCellComponent extends StringFilterComponent {
          * @type {boolean}
          */
         this.showOperators = true;
+        this.subs = sizingService.changes.subscribe((size) => this.size = size);
+    }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
     }
     /**
      * @hidden
@@ -13387,7 +13457,7 @@ class StringFilterCellComponent extends StringFilterComponent {
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-StringFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+StringFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: { filterDelay: "filterDelay", showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -13395,15 +13465,16 @@ StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input
+            <kendo-textbox
                 kendoTextBox
+                [size]="size"
                 kendoGridFocusable
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
-                [ngModel]="currentFilter?.value" />
+                [ngModel]="currentFilter?.value"></kendo-textbox>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }], directives: [{ type: i4$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -13415,17 +13486,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input
+            <kendo-textbox
                 kendoTextBox
+                [size]="size"
                 kendoGridFocusable
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
-                [ngModel]="currentFilter?.value" />
+                [ngModel]="currentFilter?.value"></kendo-textbox>
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { filterDelay: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { filterDelay: [{
                 type: Input
             }], showOperators: [{
                 type: Input
@@ -13447,7 +13519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  *   ```
  */
 class NumericFilterCellComponent extends NumericFilterComponent {
-    constructor(filterService, localization) {
+    constructor(filterService, localization, sizingService) {
         super(filterService, localization);
         this.localization = localization;
         /**
@@ -13462,6 +13534,10 @@ class NumericFilterCellComponent extends NumericFilterComponent {
          * @type {boolean}
          */
         this.showOperators = true;
+        this.subs = sizingService.changes.subscribe((size) => this.size = size);
+    }
+    ngOnDestroy() {
+        this.subs && this.subs.unsubscribe();
     }
     /**
      * @hidden
@@ -13478,7 +13554,7 @@ class NumericFilterCellComponent extends NumericFilterComponent {
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-NumericFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+NumericFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: { filterDelay: "filterDelay", showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -13499,6 +13575,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [spinners]="spinners"
                 [min]="min"
                 [max]="max"
+                [size]="size"
                 [step]="step"
             >
                 <kendo-numerictextbox-messages
@@ -13508,7 +13585,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-numerictextbox-messages>
             </kendo-numerictextbox>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4$1.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i3.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -13533,6 +13610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [spinners]="spinners"
                 [min]="min"
                 [max]="max"
+                [size]="size"
                 [step]="step"
             >
                 <kendo-numerictextbox-messages
@@ -13544,7 +13622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { filterDelay: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { filterDelay: [{
                 type: Input
             }], showOperators: [{
                 type: Input
@@ -13567,9 +13645,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  *   ```
  */
 class BooleanFilterCellComponent extends BooleanFilterComponent {
-    constructor(filterService, localization, cd) {
+    constructor(filterService, localization, cd, sizingService) {
         super(filterService, localization);
         this.cd = cd;
+        /**
+         * @hidden
+         */
+        this.size = 'medium';
+        this.subs = sizingService.changes.subscribe((size) => this.size = size);
+    }
+    ngOnDestroy() {
+        this.subs && this.subs.unsubscribe();
     }
     localizationChange() {
         super.localizationChange();
@@ -13584,7 +13670,7 @@ class BooleanFilterCellComponent extends BooleanFilterComponent {
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-BooleanFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BooleanFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BooleanFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 BooleanFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell", usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -13594,6 +13680,7 @@ BooleanFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             <kendo-dropdownlist
                 kendoFilterInput
                 kendoGridFocusable
+                [size]="size"
                 [columnLabel]="columnLabel"
                 [defaultItem]="defaultItem"
                 [data]="items"
@@ -13618,6 +13705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <kendo-dropdownlist
                 kendoFilterInput
                 kendoGridFocusable
+                [size]="size"
                 [columnLabel]="columnLabel"
                 [defaultItem]="defaultItem"
                 [data]="items"
@@ -13630,7 +13718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: SizingOptionsService }]; } });
 
 /**
  * Represents a date-filter cell component.
@@ -13650,7 +13738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  *   ```
  */
 class DateFilterCellComponent extends DateFilterComponent {
-    constructor(filterService, localization) {
+    constructor(filterService, localization, sizingService) {
         super(filterService, localization);
         this.localization = localization;
         /**
@@ -13658,6 +13746,10 @@ class DateFilterCellComponent extends DateFilterComponent {
          * @type {boolean}
          */
         this.showOperators = true;
+        this.subs = sizingService.changes.subscribe((size) => this.size = size);
+    }
+    ngOnDestroy() {
+        this.subs && this.subs.unsubscribe();
     }
     /**
      * @hidden
@@ -13674,7 +13766,7 @@ class DateFilterCellComponent extends DateFilterComponent {
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
 }
-DateFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateFilterCellComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 DateFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: { showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -13689,6 +13781,7 @@ DateFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 [columnLabel]="columnLabel"
                 [value]="currentFilter?.value"
                 [format]="format"
+                [size]="size"
                 [formatPlaceholder]="formatPlaceholder"
                 [placeholder]="placeholder"
                 [activeView]="activeView"
@@ -13705,7 +13798,7 @@ DateFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i4$3.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5$1.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i5$1.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -13724,6 +13817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [columnLabel]="columnLabel"
                 [value]="currentFilter?.value"
                 [format]="format"
+                [size]="size"
                 [formatPlaceholder]="formatPlaceholder"
                 [placeholder]="placeholder"
                 [activeView]="activeView"
@@ -13742,7 +13836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { showOperators: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { showOperators: [{
                 type: Input
             }] } });
 
@@ -13786,6 +13880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class FilterCellComponent {
     constructor() {
+        this.size = 'medium';
         this._templateContext = {};
     }
     get filter() {
@@ -13808,7 +13903,7 @@ class FilterCellComponent {
     }
 }
 FilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: { column: "column", filter: "filter" }, ngImport: i0, template: `
+FilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: { column: "column", filter: "filter", size: "size" }, ngImport: i0, template: `
         <ng-container *ngIf="isFilterable">
             <ng-container [ngSwitch]="hasTemplate">
                 <ng-container *ngSwitchCase="false">
@@ -13849,6 +13944,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], filter: [{
                 type: Input
+            }], size: [{
+                type: Input
             }] } });
 
 let id$1 = 0;
@@ -13892,6 +13989,11 @@ class LogicalCellDirective {
         }
         this.navigationChange = this.navigationService.changes.subscribe((e) => this.onNavigationChange(e));
     }
+    ngAfterViewInit() {
+        const el = this.element.nativeElement;
+        const elementType = el.tagName.toLowerCase();
+        this.renderer.addClass(el, `k-table-${elementType}`);
+    }
     ngDoCheck() {
         if (!this.navigationService.tableEnabled || this.logicalColIndex === -1) {
             return;
@@ -14073,7 +14175,7 @@ FilterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [logicalRowIndex]="logicalRowIndex"
                 [logicalColIndex]="lockedColumnsCount + columnIndex"
       ></td>
-    `, isInline: true, components: [{ type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: ["column", "filter"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: ["column", "filter", "size"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterRowComponent, decorators: [{
             type: Component,
             args: [{
@@ -14135,6 +14237,7 @@ class LogicalRowDirective {
         this.logicalSlaveCellsCount = 0;
         this.dataRowIndex = -1;
         this.uid = nextId();
+        this.tableRowClass = true;
     }
     get hostRole() {
         return this.logicalSlaveRow ? 'presentation' : 'row';
@@ -14173,7 +14276,7 @@ class LogicalRowDirective {
     }
 }
 LogicalRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogicalRowDirective, deps: [{ token: IdService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-owns": "this.ariaOwns" } }, usesOnChanges: true, ngImport: i0 });
+LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "class.k-table-row": "this.tableRowClass", "attr.aria-owns": "this.ariaOwns" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogicalRowDirective, decorators: [{
             type: Directive,
             args: [{
@@ -14197,6 +14300,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], ariaRowIndex: [{
                 type: HostBinding,
                 args: ['attr.aria-rowindex']
+            }], tableRowClass: [{
+                type: HostBinding,
+                args: ['class.k-table-row']
             }], ariaOwns: [{
                 type: HostBinding,
                 args: ['attr.aria-owns']
@@ -14609,7 +14715,9 @@ class HeaderComponent {
         this.reorderable = false;
         this.columnMenu = false;
         this.totalColumnsCount = 0;
+        this.size = 'medium';
         this.sortedFields = {};
+        this.hostClass = true;
         this.dropTargets = new QueryList();
         this.subscription = new Subscription();
     }
@@ -14935,7 +15043,7 @@ class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: IdService }, { token: SortService }, { token: i1.LocalizationService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-header": "this.headerClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
             kendoGridLogicalRow
@@ -14944,7 +15052,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount">
             <th
-                class="k-group-cell k-header"
+                class="k-group-cell k-header k-table-th"
                 role="presentation"
                 *ngFor="let g of groups">
             </th>
@@ -15038,7 +15146,9 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                <span class="k-sort-icon">
+                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
                             </span>
                             <span role="status"
@@ -15166,7 +15276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount">
             <th
-                class="k-group-cell k-header"
+                class="k-group-cell k-header k-table-th"
                 role="presentation"
                 *ngFor="let g of groups">
             </th>
@@ -15260,7 +15370,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                <span class="k-sort-icon">
+                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
                             </span>
                             <span role="status"
@@ -15410,9 +15522,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], tabIndex: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], headerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-header']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-table-thead']
             }], dropTargets: [{
                 type: ViewChildren,
                 args: [DropTargetDirective]
@@ -16057,7 +16174,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i4$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5$1.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -16175,9 +16292,8 @@ class GroupHeaderComponent {
         this.totalColumnsCount = 0;
         this.groups = [];
         this.isExpanded = false;
-    }
-    get groupItemClass() {
-        return true;
+        this.groupItemClass = true;
+        this.tableGroupRowClass = true;
     }
     ngDoCheck() {
         const groupArgs = {
@@ -16230,7 +16346,7 @@ class GroupHeaderComponent {
     }
 }
 GroupHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: GroupsService }, { token: GroupInfoService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass" } }, ngImport: i0, template: `
+GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass", "class.k-table-group-row": "this.tableGroupRowClass" } }, ngImport: i0, template: `
         <ng-container *ngIf="!skipGroupDecoration">
             <td class="k-group-cell"
                 role="presentation"
@@ -16390,6 +16506,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], groupItemClass: [{
                 type: HostBinding,
                 args: ['class.k-grouping-row']
+            }], tableGroupRowClass: [{
+                type: HostBinding,
+                args: ['class.k-table-group-row']
             }] } });
 
 const columnCellIndex = (cell, cells) => {
@@ -16431,6 +16550,7 @@ class TableBodyComponent {
         this.lockedColumnsCount = 0;
         this.totalColumnsCount = 0;
         this.trackBy = defaultTrackBy;
+        this.hostClass = true;
         this.rowClass = () => null;
         this.cellKeydownSubscription = this.navigationService.cellKeydown.subscribe((args) => this.cellKeydownHandler(args));
         this.trackByWrapper = this.trackByWrapper.bind(this);
@@ -16731,7 +16851,7 @@ class TableBodyComponent {
     }
 }
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableBodyComponent, deps: [{ token: DetailsService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: EditService }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: SelectionService }, { token: CellSelectionService }, { token: ColumnInfoService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", data: "data", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", showGroupFooters: "showGroupFooters", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", rowClass: "rowClass" }, usesOnChanges: true, ngImport: i0, template: `
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", data: "data", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", showGroupFooters: "showGroupFooters", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngIf="editService.hasNewItem">
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             kendoGridLogicalRow
@@ -16811,9 +16931,9 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
+            class="{{ isOdd(item) ?  'k-alt k-table-row-alt' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
-            [class.k-alt]="isOdd(item)"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
@@ -17030,9 +17150,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
+            class="{{ isOdd(item) ?  'k-alt k-table-row-alt' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
-            [class.k-alt]="isOdd(item)"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
@@ -17208,6 +17328,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], rowSticky: [{
                 type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-table-tbody']
             }], rowClass: [{
                 type: Input
             }] } });
@@ -17324,6 +17447,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['style.min-width']
             }] } });
 
+/**
+ * @hidden
+ */
+class GridTableDirective {
+    constructor(wrapper) {
+        this.wrapper = wrapper;
+        this.hostClass = true;
+        this._size = 'medium';
+    }
+    get sizeSmallClass() {
+        return this.size === 'small';
+    }
+    get sizeMediumClass() {
+        return this.size === 'medium' || !this.size;
+    }
+    set size(size) {
+        this._size = size;
+        if (size === 'none') {
+            this.wrapper.nativeElement.classList.remove('k-table-sm', 'k-table-md');
+        }
+    }
+    ;
+    get size() {
+        return this._size;
+    }
+}
+GridTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GridTableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+GridTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GridTableDirective, selector: "[kendoGridTable]", inputs: { size: "size" }, host: { properties: { "class.k-table": "this.hostClass", "class.k-table-sm": "this.sizeSmallClass", "class.k-table-md": "this.sizeMediumClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GridTableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridTable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-table']
+            }], sizeSmallClass: [{
+                type: HostBinding,
+                args: ['class.k-table-sm']
+            }], sizeMediumClass: [{
+                type: HostBinding,
+                args: ['class.k-table-md']
+            }], size: [{
+                type: Input
+            }] } });
+
 /**
  * @hidden
  */
@@ -17463,6 +17632,7 @@ class ListComponent {
         this.groupable = false;
         this.trackBy = defaultTrackBy;
         this.sort = new Array();
+        this.size = 'medium';
         this.contentScroll = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.scrollBottom = new EventEmitter();
@@ -17930,7 +18100,7 @@ class ListComponent {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: DetailsService }, { token: ChangeNotificationService }, { token: SuspendService }, { token: GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }, { token: ResizeService }, { token: EditService }, { token: BrowserSupportService }, { token: NavigationService }, { token: ScrollRequestService }, { token: i1.LocalizationService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ListComponent, selector: "kendo-grid-list", inputs: { data: "data", groups: "groups", total: "total", rowHeight: "rowHeight", stickyRowHeight: "stickyRowHeight", detailRowHeight: "detailRowHeight", take: "take", skip: "skip", columns: "columns", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", selectable: "selectable", groupable: "groupable", filterable: "filterable", rowClass: "rowClass", rowSticky: "rowSticky", loading: "loading", trackBy: "trackBy", virtualColumns: "virtualColumns", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", loadingTemplate: "loadingTemplate", sort: "sort" }, outputs: { contentScroll: "contentScroll", pageChange: "pageChange", scrollBottom: "scrollBottom" }, host: { properties: { "class.k-grid-container": "this.hostClass", "attr.role": "this.hostRole" } }, providers: [
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ListComponent, selector: "kendo-grid-list", inputs: { data: "data", groups: "groups", total: "total", rowHeight: "rowHeight", stickyRowHeight: "stickyRowHeight", detailRowHeight: "detailRowHeight", take: "take", skip: "skip", columns: "columns", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", selectable: "selectable", groupable: "groupable", filterable: "filterable", rowClass: "rowClass", rowSticky: "rowSticky", loading: "loading", trackBy: "trackBy", virtualColumns: "virtualColumns", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", loadingTemplate: "loadingTemplate", sort: "sort", size: "size" }, outputs: { contentScroll: "contentScroll", pageChange: "pageChange", scrollBottom: "scrollBottom" }, host: { properties: { "class.k-grid-container": "this.hostClass", "attr.role": "this.hostRole" } }, providers: [
         {
             provide: SCROLLER_FACTORY_TOKEN,
             useValue: DEFAULT_SCROLLER_FACTORY
@@ -17947,7 +18117,14 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         [scope]="this"
         >
         <div role="presentation" class="k-grid-table-wrap">
-            <table [locked]="true" #lockedTable class="k-grid-table" role="presentation" [style.width.px]="lockedWidth">
+            <table
+                [locked]="true"
+                #lockedTable
+                class="k-grid-table"
+                role="presentation"
+                kendoGridTable
+                [size]="size"
+                [style.width.px]="lockedWidth">
                 <colgroup kendoGridColGroup
                     role="presentation"
                     [groups]="groups"
@@ -17980,14 +18157,21 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         <div class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
-    </div><div #container
+    </div>
+    <div #container
                class="k-grid-content k-virtual-content"
                role="presentation" tabindex="-1"
                [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
                [lockedWidth]="lockedWidth + 1">
         <div role="presentation" class="k-grid-table-wrap">
-            <table [style.width.px]="nonLockedWidth" #table [virtualColumns]="virtualColumns"
-              class="k-grid-table" role="presentation">
+            <table
+                [style.width.px]="nonLockedWidth"
+                #table
+                [virtualColumns]="virtualColumns"
+                class="k-grid-table"
+                kendoGridTable
+                [size]="size"
+                role="presentation">
                 <colgroup kendoGridColGroup
                     role="presentation"
                     [groups]="isLocked ? [] : groups"
@@ -18029,7 +18213,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
-    `, isInline: true, components: [{ type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
+    `, isInline: true, components: [{ type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -18052,7 +18236,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         [scope]="this"
         >
         <div role="presentation" class="k-grid-table-wrap">
-            <table [locked]="true" #lockedTable class="k-grid-table" role="presentation" [style.width.px]="lockedWidth">
+            <table
+                [locked]="true"
+                #lockedTable
+                class="k-grid-table"
+                role="presentation"
+                kendoGridTable
+                [size]="size"
+                [style.width.px]="lockedWidth">
                 <colgroup kendoGridColGroup
                     role="presentation"
                     [groups]="groups"
@@ -18085,14 +18276,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <div class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
-    </div><div #container
+    </div>
+    <div #container
                class="k-grid-content k-virtual-content"
                role="presentation" tabindex="-1"
                [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
                [lockedWidth]="lockedWidth + 1">
         <div role="presentation" class="k-grid-table-wrap">
-            <table [style.width.px]="nonLockedWidth" #table [virtualColumns]="virtualColumns"
-              class="k-grid-table" role="presentation">
+            <table
+                [style.width.px]="nonLockedWidth"
+                #table
+                [virtualColumns]="virtualColumns"
+                class="k-grid-table"
+                kendoGridTable
+                [size]="size"
+                role="presentation">
                 <colgroup kendoGridColGroup
                     role="presentation"
                     [groups]="isLocked ? [] : groups"
@@ -18193,6 +18391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], sort: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], contentScroll: [{
                 type: Output
             }], pageChange: [{
@@ -18226,6 +18426,7 @@ class FooterComponent {
         this.groups = [];
         this.lockedColumnsCount = 0;
         this.logicalRowIndex = 0;
+        this.hostClass = true;
     }
     get footerClass() {
         return !this.scrollable;
@@ -18246,7 +18447,7 @@ class FooterComponent {
     }
 }
 FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FooterComponent, deps: [{ token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass" } }, ngImport: i0, template: `
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass" } }, ngImport: i0, template: `
     <ng-container>
         <tr
             [class.k-footer-template]="true"
@@ -18350,6 +18551,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], footerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-footer']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-table-tfoot']
             }] } });
 
 /**
@@ -18401,7 +18605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class GridMessages extends ComponentMessages {
 }
 GridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand" }, usesInheritance: true, ngImport: i0 });
+GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
             args: [{
@@ -18432,6 +18636,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], pagerPageNumberInputTitle: [{
                 type: Input
+            }], selectPage: [{
+                type: Input
             }], filter: [{
                 type: Input
             }], filterInputLabel: [{
@@ -18630,7 +18836,7 @@ const isInEditedCell = (element, gridElement) => closest(element, matchesClasses
  * ```
  */
 class GridComponent {
-    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx) {
+    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx, sizingService) {
         this.supportService = supportService;
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
@@ -18657,6 +18863,7 @@ class GridComponent {
         this.scrollRequestService = scrollRequestService;
         this.localization = localization;
         this.ctx = ctx;
+        this.sizingService = sizingService;
         /**
          * Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count
          * ([more information and example]({% slug binding_grid %})).
@@ -18911,6 +19118,7 @@ class GridComponent {
          * A query list of all declared columns.
          */
         this.columns = new QueryList();
+        this.hostClass = true;
         this.footer = new QueryList();
         this.selectionDirective = false;
         this.columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
@@ -18928,6 +19136,7 @@ class GridComponent {
         this._rowSelected = null;
         this._cellSelected = null;
         this._navigable = [];
+        this._size = 'medium';
         this.rtl = false;
         this._rowClass = () => null;
         validatePackage(packageMetadata);
@@ -18990,6 +19199,21 @@ class GridComponent {
     get sort() {
         return this._sort;
     }
+    /**
+     * Specifies the sizing of various Grid building blocks (e.g. tables, buttons, inputs, dropdowns, etc.)
+     * @default 'medium'
+     */
+    set size(size) {
+        this._size = size;
+        if (size === 'none') {
+            this.wrapper.nativeElement.classList.remove('k-grid-sm', 'k-grid-md');
+        }
+        this.sizingService.changes.next(this.size);
+    }
+    ;
+    get size() {
+        return this._size;
+    }
     /**
      * The descriptors by which the data will be grouped ([see example]({% slug grouping_grid %})).
      */
@@ -19204,8 +19428,11 @@ class GridComponent {
     get dir() {
         return this.direction;
     }
-    get hostClasses() {
-        return true;
+    get sizeSmallClass() {
+        return this.size === 'small';
+    }
+    get sizeMediumClass() {
+        return this.size === 'medium' || !this.size;
     }
     get lockedClasses() {
         return this.lockedLeafColumns.length > 0;
@@ -19511,6 +19738,7 @@ class GridComponent {
         this.attachElementEventHandlers();
         this.updateNavigationMetadata();
         this.applyAutoSize();
+        // this.sizingService.changes.next(this.size);
     }
     ngAfterContentChecked() {
         this.columnsContainer.refresh();
@@ -20596,8 +20824,8 @@ class GridComponent {
         return previousValue.cell !== currentValue.cell;
     }
 }
-GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GridComponent, deps: [{ token: BrowserSupportService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1.LocalizationService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
-GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GridComponent, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
+GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GridComponent, deps: [{ token: BrowserSupportService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
+GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GridComponent, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
         BrowserSupportService,
         LocalizationService,
         ColumnInfoService,
@@ -20637,7 +20865,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         IdService,
         ScrollRequestService,
         SortService,
-        ContextService
+        ContextService,
+        SizingOptionsService
     ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
@@ -20852,18 +21081,26 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
             i18n-groupExpand="kendo.grid.groupExpand|The text of the title and aria-label attributes applied to the expand icon of group rows."
             groupExpand="Expand Group"
+
+            i18n-selectPage="kendo.grid.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
+            selectPage="Select page"
         >
         </ng-container>
-        <kendo-grid-toolbar class="k-toolbar k-grid-toolbar" *ngIf="showTopToolbar" position="top"></kendo-grid-toolbar>
+        <kendo-grid-toolbar
+            class="k-toolbar k-grid-toolbar"
+            *ngIf="showTopToolbar"
+            [size]="size"
+            position="top"></kendo-grid-toolbar>
         <kendo-pager
             *ngIf="showTopPager"
             [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
             [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            class="k-grid-pager-top"
+            class="k-grid-pager-top k-pager"
             [template]="pagerTemplate"
             [pageSize]="pageSize"
             [total]="view.total"
             [skip]="skip"
+            [size]="size"
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-pager>
@@ -20889,7 +21126,13 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                      role="presentation"
                      class="k-grid-header-locked"
                      [style.width.px]="lockedWidth">
-                    <table [locked]="true" role="presentation" [style.width.px]="lockedWidth">
+                    <table
+                        [locked]="true"
+                        role="presentation"
+                        class="k-grid-header-table"
+                        [style.width.px]="lockedWidth"
+                        kendoGridTable
+                        [size]="size">
                         <colgroup kendoGridColGroup
                             role="presentation"
                             [columns]="$any(lockedLeafColumns)"
@@ -20915,10 +21158,17 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                             [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                         </thead>
                     </table>
-                </div><div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                </div>
+                <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
                     [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
                     [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                    <table role="presentation" [style.width.px]="nonLockedWidth" [virtualColumns]="virtualColumns">
+                    <table 
+                        role="presentation"
+                        class="k-grid-header-table"
+                        [style.width.px]="nonLockedWidth"
+                        [virtualColumns]="virtualColumns"
+                        kendoGridTable
+                        [size]="size">
                         <colgroup kendoGridColGroup
                             role="presentation"
                             [columns]="headerLeafColumns"
@@ -20966,6 +21216,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [filterable]="filterable"
                 [detailTemplate]="detailTemplate"
                 [noRecordsTemplate]="noRecordsTemplate"
+                [size]="size"
                 (pageChange)="notifyPageChange('list', $event)"
                 [rowClass]="rowClass"
                 [rowSticky]="rowSticky"
@@ -20990,7 +21241,13 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     *ngIf="lockedLeafColumns.length"
                     class="k-grid-footer-locked"
                     [style.width.px]="lockedWidth">
-                    <table role="presentation" [locked]="true" [style.width.px]="lockedWidth">
+                    <table
+                        role="presentation"
+                        class="k-grid-footer-table"
+                        [locked]="true"
+                        [style.width.px]="lockedWidth"
+                        kendoGridTable
+                        [size]="size">
                         <colgroup kendoGridColGroup
                             [columns]="$any(lockedLeafColumns)"
                             [groups]="group"
@@ -21004,11 +21261,17 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                             [logicalRowIndex]="ariaRowCount">
                         </tfoot>
                     </table>
-                </div><div #footer
+                </div>
+                <div #footer
                     class="k-grid-footer-wrap" data-scrollable
                     [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
                     [lockedWidth]="lockedWidth + scrollbarWidth + 3">
-                    <table role="presentation" [style.width.px]="nonLockedWidth">
+                    <table
+                        role="presentation"
+                        class="k-grid-footer-table"
+                        [style.width.px]="nonLockedWidth"
+                        kendoGridTable
+                        [size]="size">
                         <colgroup kendoGridColGroup
                             [columns]="$any(nonLockedLeafColumns)"
                             [groups]="isLocked ? [] : group"
@@ -21027,7 +21290,10 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </div>
         </ng-container>
         <ng-container *ngIf="!isScrollable">
-            <table [style.table-layout]="resizable ? 'fixed' : null">
+            <table
+                [style.table-layout]="resizable ? 'fixed' : null"
+                kendoGridTable
+                [size]="size">
                 <colgroup kendoGridColGroup
                     [columns]="$any(leafColumns)"
                     [groups]="group"
@@ -21089,11 +21355,16 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             [pageSize]="pageSize"
             [total]="view.total"
             [skip]="skip"
+            [size]="size"
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-pager>
-        <kendo-grid-toolbar class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom" *ngIf="showBottomToolbar" position="bottom"></kendo-grid-toolbar>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+        <kendo-grid-toolbar
+            class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom"
+            *ngIf="showBottomToolbar"
+            [size]="size"
+            position="bottom"></kendo-grid-toolbar>
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -21139,7 +21410,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         IdService,
                         ScrollRequestService,
                         SortService,
-                        ContextService
+                        ContextService,
+                        SizingOptionsService
                     ],
                     selector: 'kendo-grid',
                     template: `
@@ -21356,18 +21628,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
             i18n-groupExpand="kendo.grid.groupExpand|The text of the title and aria-label attributes applied to the expand icon of group rows."
             groupExpand="Expand Group"
+
+            i18n-selectPage="kendo.grid.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
+            selectPage="Select page"
         >
         </ng-container>
-        <kendo-grid-toolbar class="k-toolbar k-grid-toolbar" *ngIf="showTopToolbar" position="top"></kendo-grid-toolbar>
+        <kendo-grid-toolbar
+            class="k-toolbar k-grid-toolbar"
+            *ngIf="showTopToolbar"
+            [size]="size"
+            position="top"></kendo-grid-toolbar>
         <kendo-pager
             *ngIf="showTopPager"
             [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
             [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            class="k-grid-pager-top"
+            class="k-grid-pager-top k-pager"
             [template]="pagerTemplate"
             [pageSize]="pageSize"
             [total]="view.total"
             [skip]="skip"
+            [size]="size"
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-pager>
@@ -21393,7 +21673,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                      role="presentation"
                      class="k-grid-header-locked"
                      [style.width.px]="lockedWidth">
-                    <table [locked]="true" role="presentation" [style.width.px]="lockedWidth">
+                    <table
+                        [locked]="true"
+                        role="presentation"
+                        class="k-grid-header-table"
+                        [style.width.px]="lockedWidth"
+                        kendoGridTable
+                        [size]="size">
                         <colgroup kendoGridColGroup
                             role="presentation"
                             [columns]="$any(lockedLeafColumns)"
@@ -21419,10 +21705,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                         </thead>
                     </table>
-                </div><div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                </div>
+                <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
                     [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
                     [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                    <table role="presentation" [style.width.px]="nonLockedWidth" [virtualColumns]="virtualColumns">
+                    <table 
+                        role="presentation"
+                        class="k-grid-header-table"
+                        [style.width.px]="nonLockedWidth"
+                        [virtualColumns]="virtualColumns"
+                        kendoGridTable
+                        [size]="size">
                         <colgroup kendoGridColGroup
                             role="presentation"
                             [columns]="headerLeafColumns"
@@ -21470,6 +21763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [filterable]="filterable"
                 [detailTemplate]="detailTemplate"
                 [noRecordsTemplate]="noRecordsTemplate"
+                [size]="size"
                 (pageChange)="notifyPageChange('list', $event)"
                 [rowClass]="rowClass"
                 [rowSticky]="rowSticky"
@@ -21494,7 +21788,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     *ngIf="lockedLeafColumns.length"
                     class="k-grid-footer-locked"
                     [style.width.px]="lockedWidth">
-                    <table role="presentation" [locked]="true" [style.width.px]="lockedWidth">
+                    <table
+                        role="presentation"
+                        class="k-grid-footer-table"
+                        [locked]="true"
+                        [style.width.px]="lockedWidth"
+                        kendoGridTable
+                        [size]="size">
                         <colgroup kendoGridColGroup
                             [columns]="$any(lockedLeafColumns)"
                             [groups]="group"
@@ -21508,11 +21808,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             [logicalRowIndex]="ariaRowCount">
                         </tfoot>
                     </table>
-                </div><div #footer
+                </div>
+                <div #footer
                     class="k-grid-footer-wrap" data-scrollable
                     [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
                     [lockedWidth]="lockedWidth + scrollbarWidth + 3">
-                    <table role="presentation" [style.width.px]="nonLockedWidth">
+                    <table
+                        role="presentation"
+                        class="k-grid-footer-table"
+                        [style.width.px]="nonLockedWidth"
+                        kendoGridTable
+                        [size]="size">
                         <colgroup kendoGridColGroup
                             [columns]="$any(nonLockedLeafColumns)"
                             [groups]="isLocked ? [] : group"
@@ -21531,7 +21837,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </div>
         </ng-container>
         <ng-container *ngIf="!isScrollable">
-            <table [style.table-layout]="resizable ? 'fixed' : null">
+            <table
+                [style.table-layout]="resizable ? 'fixed' : null"
+                kendoGridTable
+                [size]="size">
                 <colgroup kendoGridColGroup
                     [columns]="$any(leafColumns)"
                     [groups]="group"
@@ -21593,13 +21902,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [pageSize]="pageSize"
             [total]="view.total"
             [skip]="skip"
+            [size]="size"
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-pager>
-        <kendo-grid-toolbar class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom" *ngIf="showBottomToolbar" position="bottom"></kendo-grid-toolbar>
+        <kendo-grid-toolbar
+            class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom"
+            *ngIf="showBottomToolbar"
+            [size]="size"
+            position="bottom"></kendo-grid-toolbar>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: i1.LocalizationService }, { type: ContextService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: i1.LocalizationService }, { type: ContextService }, { type: SizingOptionsService }]; }, propDecorators: { data: [{
                 type: Input
             }], pageSize: [{
                 type: Input
@@ -21617,6 +21931,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], sort: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], trackBy: [{
                 type: Input
             }], filter: [{
@@ -21715,9 +22031,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], hostClasses: [{
+            }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-grid']
+            }], sizeSmallClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-sm']
+            }], sizeMediumClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-md']
             }], lockedClasses: [{
                 type: HostBinding,
                 args: ['class.k-grid-lockedcolumns']
@@ -22231,12 +22553,14 @@ const stringOperators = localizeOperators({
  * @hidden
  */
 class AutoCompleteFilterCellComponent extends BaseFilterCellComponent {
-    constructor(filterService, column, localization) {
+    constructor(filterService, column, localization, sizingOptionsService) {
         super(filterService);
         this.localization = localization;
         this.showOperators = true;
+        this.size = 'medium';
         this.defaultOperators = stringOperators(this.localization);
         this.column = column;
+        this.subs = sizingOptionsService.changes.subscribe(size => this.size = size);
     }
     set valueField(value) {
         this._valueField = value;
@@ -22250,8 +22574,13 @@ class AutoCompleteFilterCellComponent extends BaseFilterCellComponent {
     get currentOperator() {
         return this.currentFilter ? this.currentFilter.operator : "contains";
     }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+    }
 }
-AutoCompleteFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteFilterCellComponent, deps: [{ token: FilterService }, { token: ColumnComponent }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AutoCompleteFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AutoCompleteFilterCellComponent, deps: [{ token: FilterService }, { token: ColumnComponent }, { token: i1.LocalizationService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
 AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AutoCompleteFilterCellComponent, selector: "kendo-grid-autocomplete-filter-cell", inputs: { showOperators: "showOperators", column: "column", filter: "filter", data: "data", valueField: "valueField" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-filter-wrapper-cell
             [column]="column"
@@ -22261,6 +22590,7 @@ AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             <kendo-autocomplete
                 kendoFilterInput
                 [data]="data"
+                [size]="size"
                 [valueField]="valueField"
                 [value]="currentFilter?.value">
             </kendo-autocomplete>
@@ -22279,13 +22609,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <kendo-autocomplete
                 kendoFilterInput
                 [data]="data"
+                [size]="size"
                 [valueField]="valueField"
                 [value]="currentFilter?.value">
             </kendo-autocomplete>
         </kendo-grid-filter-wrapper-cell>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: ColumnComponent }, { type: i1.LocalizationService }]; }, propDecorators: { showOperators: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ColumnComponent }, { type: i1.LocalizationService }, { type: SizingOptionsService }]; }, propDecorators: { showOperators: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -22311,7 +22642,8 @@ const exportedModules$5 = [
     DetailTemplateDirective,
     SpanColumnComponent,
     TableDirective,
-    LoadingComponent
+    LoadingComponent,
+    GridTableDirective
 ];
 /**
  * @hidden
@@ -22324,7 +22656,8 @@ class SharedModule {
             ColumnGroupComponent,
             FooterTemplateDirective,
             DetailTemplateDirective,
-            FocusableDirective
+            FocusableDirective,
+            GridTableDirective
         ];
     }
 }
@@ -22342,7 +22675,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DetailTemplateDirective,
         SpanColumnComponent,
         TableDirective,
-        LoadingComponent], imports: [CommonModule, IconsModule], exports: [ColumnComponent,
+        LoadingComponent,
+        GridTableDirective], imports: [CommonModule, IconsModule], exports: [ColumnComponent,
         ColumnGroupComponent,
         LogicalCellDirective,
         LogicalRowDirective,
@@ -22355,7 +22689,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DetailTemplateDirective,
         SpanColumnComponent,
         TableDirective,
-        LoadingComponent, DraggableModule, EventsModule, IconsModule] });
+        LoadingComponent,
+        GridTableDirective, DraggableModule, EventsModule, IconsModule] });
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, IconsModule], DraggableModule, EventsModule, IconsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -22990,7 +23325,8 @@ const importedModules$4 = [
     InputsModule,
     DatePickerModule,
     PopupModule,
-    SharedModule
+    SharedModule,
+    ButtonModule
 ];
 const COMPONENTS$1 = [
     FilterInputDirective
@@ -23032,7 +23368,8 @@ SharedFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         InputsModule,
         DatePickerModule,
         PopupModule,
-        SharedModule], exports: [FilterCellOperatorsComponent,
+        SharedModule,
+        ButtonModule], exports: [FilterCellOperatorsComponent,
         ContainsFilterOperatorComponent,
         DoesNotContainFilterOperatorComponent,
         EndsWithFilterOperatorComponent,
@@ -23058,7 +23395,8 @@ SharedFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         InputsModule,
         DatePickerModule,
         PopupModule,
-        SharedModule, FilterInputDirective] });
+        SharedModule,
+        ButtonModule, FilterInputDirective] });
 SharedFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedFilterModule, imports: [[...importedModules$4], CommonModule,
         ReactiveFormsModule,
         FormsModule,
@@ -23067,7 +23405,8 @@ SharedFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
         InputsModule,
         DatePickerModule,
         PopupModule,
-        SharedModule] });
+        SharedModule,
+        ButtonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedFilterModule, decorators: [{
             type: NgModule,
             args: [{
@@ -23149,6 +23488,7 @@ const importedModules$3 = [
     CommonModule,
     InputsModule,
     LabelModule,
+    ButtonModule,
     DropDownsModule,
     ResizeSensorModule,
     SharedModule
@@ -23197,6 +23537,7 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         PagerInputDirective], imports: [CommonModule,
         InputsModule,
         LabelModule,
+        ButtonModule,
         DropDownsModule,
         ResizeSensorModule,
         SharedModule], exports: [PagerComponent,
@@ -23828,7 +24169,7 @@ EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -23939,7 +24280,7 @@ CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CancelCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -24050,7 +24391,7 @@ SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SaveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -24146,7 +24487,7 @@ RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RemoveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -24227,7 +24568,7 @@ AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AddCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -25126,7 +25467,7 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         ReactiveEditingDirective,
         InCellEditingDirective,
         ExpandDetailsDirective,
-        ExpandGroupDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, ColumnComponent, SpanColumnComponent, ColumnGroupComponent, FooterTemplateDirective, DetailTemplateDirective, FocusableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, HeaderTemplateDirective, SelectAllCheckboxDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, PagerDropDownListDirective, PagerInputDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent] });
+        ExpandGroupDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, ColumnComponent, SpanColumnComponent, ColumnGroupComponent, FooterTemplateDirective, DetailTemplateDirective, FocusableDirective, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, HeaderTemplateDirective, SelectAllCheckboxDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, PagerDropDownListDirective, PagerInputDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent] });
 GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GridModule, imports: [[
             CommonModule,
             GroupModule,
@@ -25682,7 +26023,7 @@ PDFCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -25973,7 +26314,7 @@ ExcelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExcelCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -26048,5 +26389,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupIndicatorComponent, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
+export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupIndicatorComponent, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };