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

package/esm2020/grid.component.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 { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, QueryList, ViewChild, isDevMode, NgZone, ViewChildren, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
@@ -71,6 +71,7 @@ import { ColumnStickyChangeEvent } from './column-menu/column-sticky-change-even
 import { CellLoadingTemplateDirective } from './rendering/cell-loading.template.directive';
 import { ContextService } from './common/provider.service';
 import { LoadingTemplateDirective } from './rendering/loading-template.directive';
+import { SizingOptionsService } from './layout/sizing-options.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./selection/selection.service";
@@ -94,21 +95,23 @@ import * as i19 from "./common/sort.service";
 import * as i20 from "./scrolling/scroll-request.service";
 import * as i21 from "@progress/kendo-angular-l10n";
 import * as i22 from "./common/provider.service";
-import * as i23 from "./rendering/toolbar/toolbar.component";
-import * as i24 from "./pager/pager.component";
-import * as i25 from "./grouping/group-panel.component";
-import * as i26 from "./rendering/common/col-group.component";
-import * as i27 from "./rendering/header/header.component";
-import * as i28 from "./rendering/list.component";
-import * as i29 from "./rendering/footer/footer.component";
-import * as i30 from "./rendering/table-body.component";
-import * as i31 from "./rendering/common/loading.component";
-import * as i32 from "./localization/localized-messages.directive";
-import * as i33 from "@angular/common";
-import * as i34 from "./column-resizing/table.directive";
-import * as i35 from "./layout/resizable.directive";
-import * as i36 from "@progress/kendo-angular-common";
-import * as i37 from "./selection/marquee.directive";
+import * as i23 from "./layout/sizing-options.service";
+import * as i24 from "./rendering/toolbar/toolbar.component";
+import * as i25 from "./pager/pager.component";
+import * as i26 from "./grouping/group-panel.component";
+import * as i27 from "./rendering/common/col-group.component";
+import * as i28 from "./rendering/header/header.component";
+import * as i29 from "./rendering/list.component";
+import * as i30 from "./rendering/footer/footer.component";
+import * as i31 from "./rendering/table-body.component";
+import * as i32 from "./rendering/common/loading.component";
+import * as i33 from "./localization/localized-messages.directive";
+import * as i34 from "@angular/common";
+import * as i35 from "./column-resizing/table.directive";
+import * as i36 from "./rendering/grid-table.directive";
+import * as i37 from "./layout/resizable.directive";
+import * as i38 from "@progress/kendo-angular-common";
+import * as i39 from "./selection/marquee.directive";
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -158,7 +161,7 @@ const isInEditedCell = (element, gridElement) => closest(element, matchesClasses
  * ```
  */
 export 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;
@@ -185,6 +188,7 @@ export 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 %})).
@@ -439,6 +443,7 @@ export 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 => {
@@ -456,6 +461,7 @@ export class GridComponent {
         this._rowSelected = null;
         this._cellSelected = null;
         this._navigable = [];
+        this._size = 'medium';
         this.rtl = false;
         this._rowClass = () => null;
         validatePackage(packageMetadata);
@@ -518,6 +524,21 @@ export 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 %})).
      */
@@ -732,8 +753,11 @@ export 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;
@@ -1039,6 +1063,7 @@ export class GridComponent {
         this.attachElementEventHandlers();
         this.updateNavigationMetadata();
         this.applyAutoSize();
+        // this.sizingService.changes.next(this.size);
     }
     ngAfterContentChecked() {
         this.columnsContainer.refresh();
@@ -2124,8 +2149,8 @@ export 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: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.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: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.ContextService }, { token: i23.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,
@@ -2165,7 +2190,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"
@@ -2380,18 +2406,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>
@@ -2417,7 +2451,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)"
@@ -2443,10 +2483,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"
@@ -2494,6 +2541,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"
@@ -2518,7 +2566,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"
@@ -2532,11 +2586,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"
@@ -2555,7 +2615,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"
@@ -2617,11 +2680,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: i23.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position"] }, { type: i24.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: i25.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: i26.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i27.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex"] }, { type: i28.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: i29.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i30.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: i31.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: i32.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i33.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i34.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i35.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i36.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i37.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: i24.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size"] }, { type: i25.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: i26.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: i27.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i28.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: i29.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: i30.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i31.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: i32.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: i33.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i34.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i35.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i36.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i37.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i38.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i39.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: [{
@@ -2667,7 +2735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         IdService,
                         ScrollRequestService,
                         SortService,
-                        ContextService
+                        ContextService,
+                        SizingOptionsService
                     ],
                     selector: 'kendo-grid',
                     template: `
@@ -2884,18 +2953,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>
@@ -2921,7 +2998,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)"
@@ -2947,10 +3030,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"
@@ -2998,6 +3088,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"
@@ -3022,7 +3113,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"
@@ -3036,11 +3133,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"
@@ -3059,7 +3162,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"
@@ -3121,13 +3227,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: i1.BrowserSupportService }, { type: i2.SelectionService }, { type: i3.CellSelectionService }, { type: i0.ElementRef }, { type: i4.GroupInfoService }, { type: i5.GroupsService }, { type: i6.ChangeNotificationService }, { type: i7.DetailsService }, { type: i8.EditService }, { type: i9.FilterService }, { type: i10.PDFService }, { type: i11.ResponsiveService }, { type: i0.Renderer2 }, { type: i12.ExcelService }, { type: i0.NgZone }, { type: i13.ScrollSyncService }, { type: i14.DomEventsService }, { type: i15.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i16.ColumnReorderService }, { type: i17.ColumnInfoService }, { type: i18.NavigationService }, { type: i19.SortService }, { type: i20.ScrollRequestService }, { type: i21.LocalizationService }, { type: i22.ContextService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1.BrowserSupportService }, { type: i2.SelectionService }, { type: i3.CellSelectionService }, { type: i0.ElementRef }, { type: i4.GroupInfoService }, { type: i5.GroupsService }, { type: i6.ChangeNotificationService }, { type: i7.DetailsService }, { type: i8.EditService }, { type: i9.FilterService }, { type: i10.PDFService }, { type: i11.ResponsiveService }, { type: i0.Renderer2 }, { type: i12.ExcelService }, { type: i0.NgZone }, { type: i13.ScrollSyncService }, { type: i14.DomEventsService }, { type: i15.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i16.ColumnReorderService }, { type: i17.ColumnInfoService }, { type: i18.NavigationService }, { type: i19.SortService }, { type: i20.ScrollRequestService }, { type: i21.LocalizationService }, { type: i22.ContextService }, { type: i23.SizingOptionsService }]; }, propDecorators: { data: [{
                 type: Input
             }], pageSize: [{
                 type: Input
@@ -3145,6 +3256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], sort: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], trackBy: [{
                 type: Input
             }], filter: [{
@@ -3243,9 +3356,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']