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

package/esm2020/rendering/grid-table.directive.mjs

@@ -0,0 +1,51 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export 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
+            }] } });

package/esm2020/rendering/header/header.component.mjs

@@ -95,7 +95,9 @@ export 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();
     }
@@ -421,7 +423,7 @@ export class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.IdService }, { token: i6.SortService }, { token: i7.LocalizationService }, { token: i8.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
@@ -430,7 +432,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>
@@ -524,7 +526,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"
@@ -652,7 +656,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>
@@ -746,7 +750,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"
@@ -896,9 +902,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]

package/esm2020/rendering/list.component.mjs

@@ -54,7 +54,8 @@ import * as i16 from "./table-body.component";
 import * as i17 from "@progress/kendo-angular-common";
 import * as i18 from "@angular/common";
 import * as i19 from "../column-resizing/table.directive";
-import * as i20 from "../layout/resizable.directive";
+import * as i20 from "./grid-table.directive";
+import * as i21 from "../layout/resizable.directive";
 const elementAt = (index, elements, elementOffset) => {
     for (let idx = 0, elementIdx = 0; idx < elements.length; idx++) {
         const offset = elementOffset(elements[idx]);
@@ -127,6 +128,7 @@ export 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();
@@ -594,7 +596,7 @@ export class ListComponent {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i1.DetailsService }, { token: i2.ChangeNotificationService }, { token: i3.SuspendService }, { token: i4.GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i5.ScrollSyncService }, { token: i6.ResizeService }, { token: i7.EditService }, { token: i8.BrowserSupportService }, { token: i9.NavigationService }, { token: i10.ScrollRequestService }, { token: i11.LocalizationService }, { token: i12.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i13.PDFService }, { token: i14.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
@@ -611,7 +613,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"
@@ -644,14 +653,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"
@@ -693,7 +709,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
-    `, isInline: true, components: [{ type: i15.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i16.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: i17.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i19.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i20.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
+    `, isInline: true, components: [{ type: i15.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i16.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: i17.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i19.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i20.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i21.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -716,7 +732,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"
@@ -749,14 +772,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"
@@ -855,6 +885,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], sort: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], contentScroll: [{
                 type: Output
             }], pageChange: [{

package/esm2020/rendering/table-body.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { nodesToArray } from './../utils';
-import { Component, Input, NgZone, Renderer2, ElementRef, TemplateRef } from '@angular/core';
+import { Component, Input, NgZone, Renderer2, ElementRef, TemplateRef, HostBinding } from '@angular/core';
 import { DetailTemplateDirective } from './details/detail-template.directive';
 import { GroupsService } from '../grouping/groups.service';
 import { ChangeNotificationService } from '../data/change-notification.service';
@@ -80,6 +80,7 @@ export 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);
@@ -380,7 +381,7 @@ export class TableBodyComponent {
     }
 }
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableBodyComponent, deps: [{ token: i1.DetailsService }, { token: i2.GroupsService }, { token: i3.ChangeNotificationService }, { token: i4.EditService }, { token: i5.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.DomEventsService }, { token: i7.SelectionService }, { token: i8.CellSelectionService }, { token: i9.ColumnInfoService }, { token: i10.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
@@ -460,9 +461,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"
@@ -679,9 +680,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"
@@ -857,6 +858,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
             }] } });

package/esm2020/rendering/toolbar/toolbar.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input } from '@angular/core';
+import { Component, Input, ElementRef, HostBinding } from '@angular/core';
 import { ContextService } from './../../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./../../common/provider.service";
@@ -11,19 +11,37 @@ import * as i2 from "@angular/common";
  * @hidden
  */
 export 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: i1.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: i1.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"
@@ -44,6 +62,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { position: [{
+        }], ctorParameters: function () { return [{ type: i1.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
             }] } });

package/esm2020/shared.module.mjs

@@ -20,6 +20,7 @@ import { FieldAccessorPipe } from "./rendering/common/field-accessor.pipe";
 import { TableDirective } from "./column-resizing/table.directive";
 import { FocusableDirective } from "./navigation/focusable.directive";
 import { EventsModule } from '@progress/kendo-angular-common';
+import { GridTableDirective } from './rendering/grid-table.directive';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const exportedModules = [
@@ -36,7 +37,8 @@ const exportedModules = [
     DetailTemplateDirective,
     SpanColumnComponent,
     TableDirective,
-    LoadingComponent
+    LoadingComponent,
+    GridTableDirective
 ];
 /**
  * @hidden
@@ -49,7 +51,8 @@ export class SharedModule {
             ColumnGroupComponent,
             FooterTemplateDirective,
             DetailTemplateDirective,
-            FocusableDirective
+            FocusableDirective,
+            GridTableDirective
         ];
     }
 }
@@ -67,7 +70,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,
@@ -80,7 +84,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,