@progress/kendo-angular-grid 13.0.0-develop.2 → 13.0.0-develop.21

package/esm2020/grid.module.mjs

@@ -23,6 +23,8 @@ import { FooterModule } from "./rendering/footer/footer.module";
 import { SharedModule } from './shared.module';
 import { ToolbarTemplateDirective } from "./rendering/toolbar/toolbar-template.directive";
 import { ToolbarComponent } from "./rendering/toolbar/toolbar.component";
+import { StatusBarTemplateDirective } from './aggregates/status-bar-template.directive';
+import { StatusBarComponent } from './aggregates/status-bar.component';
 import { ResizeSensorModule } from '@progress/kendo-angular-common';
 import { TemplateEditingDirective } from './editing-directives/template-editing.directive';
 import { ReactiveEditingDirective } from './editing-directives/reactive-editing.directive';
@@ -123,6 +125,7 @@ const exportedModules = [
     ToolbarTemplateDirective,
     ToolbarComponent,
     GridSpacerComponent,
+    StatusBarTemplateDirective,
     DataBindingDirective,
     SelectionDirective,
     CustomMessagesComponent,
@@ -160,7 +163,9 @@ const declarations = [
     GroupBindingDirective,
     GridMarqueeDirective,
     GridSpacerComponent,
-    GridToolbarFocusableDirective
+    GridToolbarFocusableDirective,
+    StatusBarComponent,
+    StatusBarTemplateDirective
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -202,7 +207,9 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         GroupBindingDirective,
         GridMarqueeDirective,
         GridSpacerComponent,
-        GridToolbarFocusableDirective], imports: [CommonModule,
+        GridToolbarFocusableDirective,
+        StatusBarComponent,
+        StatusBarTemplateDirective], imports: [CommonModule,
         GroupModule,
         SharedModule,
         BodyModule,
@@ -217,6 +224,7 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         ToolbarTemplateDirective,
         ToolbarComponent,
         GridSpacerComponent,
+        StatusBarTemplateDirective,
         DataBindingDirective,
         SelectionDirective,
         CustomMessagesComponent,

package/esm2020/grouping/group-header.component.mjs

@@ -7,8 +7,8 @@ import { GroupInfoService } from './group-info.service';
 import { GroupsService } from './groups.service';
 import { columnsSpan } from '../columns/column-common';
 import { getGroupRowArgs } from './utils';
-import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
+import { caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./groups.service";
 import * as i2 from "./group-info.service";
@@ -30,11 +30,12 @@ export class GroupHeaderComponent {
         this.hasDetails = false;
         this.totalColumnsCount = 0;
         this.groups = [];
+        this.groupItemClass = true;
+        this.tableGroupRowClass = true;
         this.isExpanded = false;
         this.caretAltDownIcon = caretAltDownIcon;
         this.caretAltRightIcon = caretAltRightIcon;
-        this.groupItemClass = true;
-        this.tableGroupRowClass = true;
+        this.caretAltLeftIcon = caretAltLeftIcon;
     }
     ngDoCheck() {
         const groupArgs = {
@@ -85,6 +86,22 @@ export class GroupHeaderComponent {
         const messageKey = this.isExpanded ? 'groupCollapse' : 'groupExpand';
         return this.ctx.localization.get(messageKey);
     }
+    get arrowIcon() {
+        const icon = !this.isExpanded ?
+            !this.ctx.localization.rtl ?
+                'caret-alt-right' :
+                'caret-alt-left' :
+            'caret-alt-down';
+        return icon;
+    }
+    get arrowSVGIcon() {
+        const icon = !this.isExpanded ?
+            !this.ctx.localization.rtl ?
+                this.caretAltRightIcon :
+                this.caretAltLeftIcon :
+            this.caretAltDownIcon;
+        return icon;
+    }
 }
 GroupHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: i1.GroupsService }, { token: i2.GroupInfoService }, { token: i3.ContextService }], target: i0.ɵɵFactoryTarget.Component });
 GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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: `
@@ -111,8 +128,8 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                         <kendo-icon-wrapper
-                            [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                            [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                            [name]="arrowIcon"
+                            [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
                     {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
@@ -156,7 +173,7 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </ng-template>
             </td>
         </ng-container>
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": i8.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": i8.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -185,8 +202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                         <kendo-icon-wrapper
-                            [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                            [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                            [name]="arrowIcon"
+                            [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
                     {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}

package/esm2020/grouping/group-panel.component.mjs

@@ -180,7 +180,7 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [label]="groupTitles[index]"
                 [removable]="true"
                 [icon]="getDirectionIcon(group)"
-                [svgIcon]=""
+                [svgIcon]="getDirectionSvgIcon(group)"
                 (contentClick)="directionChange(group)"
                 (remove)="remove(group)"
             >
@@ -232,7 +232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [label]="groupTitles[index]"
                 [removable]="true"
                 [icon]="getDirectionIcon(group)"
-                [svgIcon]=""
+                [svgIcon]="getDirectionSvgIcon(group)"
                 (contentClick)="directionChange(group)"
                 (remove)="remove(group)"
             >

package/esm2020/index.mjs

@@ -25,6 +25,7 @@ export { FooterTemplateDirective } from './rendering/footer/footer-template.dire
 export { PagerTemplateDirective } from './pager/pager-template.directive';
 export { GridSpacerComponent } from './rendering/common/spacer.component';
 export { ExpandDetailsDirective } from './rendering/details-expand.directive';
+export { StatusBarTemplateDirective } from './aggregates/status-bar-template.directive';
 export { ExpandGroupDirective } from './rendering/groups-expand.directive';
 export { defaultTrackBy } from './common/default-track-by';
 export { DetailTemplateDirective } from './rendering/details/detail-template.directive';

package/esm2020/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class GridMessages extends ComponentMessages {
 }
 GridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", 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", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle" }, usesInheritance: true, ngImport: i0 });
+GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", 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", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", 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", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
             args: [{
@@ -54,6 +54,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], filterMenuLogicDropDownLabel: [{
                 type: Input
+            }], filterCellOperatorLabel: [{
+                type: Input
+            }], booleanFilterCellLabel: [{
+                type: Input
             }], filterEqOperator: [{
                 type: Input
             }], filterNotEqOperator: [{

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846761,
-    version: '13.0.0-develop.2',
+    publishDate: 1685973015,
+    version: '13.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager-element.component.mjs

@@ -5,6 +5,7 @@
 import { ChangeDetectorRef, Directive, Input } from '@angular/core';
 import { PagerContextService } from "./pager-context.service";
 import { ContextService } from '../common/provider.service';
+import { caretAltLeftIcon, caretAltRightIcon, caretAltToLeftIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 import * as i2 from "./pager-context.service";
@@ -19,6 +20,10 @@ export class PagerElementComponent {
         this.total = this.pagerContext.total;
         this.skip = this.pagerContext.skip;
         this.pageSize = this.pagerContext.pageSize;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltToLeftIcon = caretAltToLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltToRightIcon = caretAltToRightIcon;
         /**
          * Sets the pager element sizing option.
          * @default `medium`
@@ -81,6 +86,18 @@ export class PagerElementComponent {
             this.subscriptions.unsubscribe();
         }
     }
+    get prevArrowIcons() {
+        return !this.ctx.localization.rtl ? ['caret-alt-to-left', 'caret-alt-left'] : ['caret-alt-to-right', 'caret-alt-right'];
+    }
+    get prevArrowSVGIcons() {
+        return !this.ctx.localization.rtl ? [this.caretAltToLeftIcon, this.caretAltLeftIcon] : [this.caretAltToRightIcon, this.caretAltRightIcon];
+    }
+    get nextArrowIcons() {
+        return !this.ctx.localization.rtl ? ['caret-alt-right', 'caret-alt-to-right'] : ['caret-alt-left', 'caret-alt-to-left'];
+    }
+    get nextArrowSVGIcons() {
+        return !this.ctx.localization.rtl ? [this.caretAltRightIcon, this.caretAltToRightIcon] : [this.caretAltLeftIcon, this.caretAltToLeftIcon];
+    }
 }
 PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.ContextService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 PagerElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PagerElementComponent, inputs: { size: "size" }, ngImport: i0 });

package/esm2020/pager/pager-next-buttons.component.mjs

@@ -6,7 +6,6 @@ import { NavigationService } from './../navigation/navigation.service';
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
-import { caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
@@ -21,8 +20,6 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
     constructor(ctx, pagerContext, cd, navigationService) {
         super(ctx, pagerContext, cd);
         this.navigationService = navigationService;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.caretAltToRightIcon = caretAltToRightIcon;
     }
     /**
      * @hidden
@@ -48,8 +45,8 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-right"
-            [svgIcon]="caretAltRightIcon"
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -63,8 +60,8 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-to-right"
-            [svgIcon]="caretAltToRightIcon"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -85,8 +82,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-right"
-            [svgIcon]="caretAltRightIcon"
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -100,8 +97,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-to-right"
-            [svgIcon]="caretAltToRightIcon"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"

package/esm2020/pager/pager-page-sizes.component.mjs

@@ -109,7 +109,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: i6.PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: i6.PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: i7.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.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/pager/pager-prev-buttons.component.mjs

@@ -6,7 +6,6 @@ import { NavigationService } from './../navigation/navigation.service';
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
-import { caretAltLeftIcon, caretAltToLeftIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
@@ -21,8 +20,6 @@ export class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(ctx, pagerContext, cd, navigationService) {
         super(ctx, pagerContext, cd);
         this.navigationService = navigationService;
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
     /**
      * @hidden
@@ -51,8 +48,8 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            icon="caret-alt-to-left"
-            [svgIcon]="caretAltToLeftIcon"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -65,8 +62,8 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             type="button"
             class="k-pager-nav"
             [disabled]="disabled"
-            icon="caret-alt-left"
-            [svgIcon]="caretAltLeftIcon"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             [size]="size"
@@ -89,8 +86,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            icon="caret-alt-to-left"
-            [svgIcon]="caretAltToLeftIcon"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -103,8 +100,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type="button"
             class="k-pager-nav"
             [disabled]="disabled"
-            icon="caret-alt-left"
-            [svgIcon]="caretAltLeftIcon"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             [size]="size"

package/esm2020/pdf/pdf-command.directive.mjs

@@ -62,7 +62,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.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], 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.12", ngImport: i0, type: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{

package/esm2020/rendering/cell.component.mjs

@@ -231,7 +231,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.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: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "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", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i9.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.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": i11.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i5.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: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "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", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i9.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.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": i11.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -689,7 +689,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
         ></tr>
     </ng-container>
-    `, isInline: true, components: [{ type: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i12.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i16.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i17.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i18.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i20.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i21.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i22.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i12.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i16.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i17.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i18.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i20.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i21.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i22.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/rendering/list.component.mjs

@@ -614,7 +614,6 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [size]="size"
                 [style.width.px]="lockedWidth">
                 <colgroup kendoGridColGroup
-                    role="presentation"
                     [groups]="groups"
                     [columns]="$any(lockedLeafColumns)"
                     [detailTemplate]="detailTemplate"
@@ -646,11 +645,12 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
-    <div #container
-               class="k-grid-content k-virtual-content"
-               role="presentation" tabindex="-1"
-               [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-               [lockedWidth]="lockedWidth + 1">
+    <div 
+        #container
+        class="k-grid-content k-virtual-content"
+        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+        [lockedWidth]="lockedWidth + 1"
+    >
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 [style.width.px]="nonLockedWidth"
@@ -661,7 +661,6 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [size]="size"
                 role="presentation">
                 <colgroup kendoGridColGroup
-                    role="presentation"
                     [groups]="isLocked ? [] : groups"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [detailTemplate]="detailTemplate"
@@ -733,7 +732,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [size]="size"
                 [style.width.px]="lockedWidth">
                 <colgroup kendoGridColGroup
-                    role="presentation"
                     [groups]="groups"
                     [columns]="$any(lockedLeafColumns)"
                     [detailTemplate]="detailTemplate"
@@ -765,11 +763,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
-    <div #container
-               class="k-grid-content k-virtual-content"
-               role="presentation" tabindex="-1"
-               [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-               [lockedWidth]="lockedWidth + 1">
+    <div 
+        #container
+        class="k-grid-content k-virtual-content"
+        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+        [lockedWidth]="lockedWidth + 1"
+    >
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 [style.width.px]="nonLockedWidth"
@@ -780,7 +779,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [size]="size"
                 role="presentation">
                 <colgroup kendoGridColGroup
-                    role="presentation"
                     [groups]="isLocked ? [] : groups"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [detailTemplate]="detailTemplate"

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

@@ -610,7 +610,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         </tr>
     </ng-container>
     <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: i11.CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: i12.GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i14.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i17.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i15.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i11.CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: i12.GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i14.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i17.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i15.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/selection/cell-selection.service.mjs

@@ -21,6 +21,7 @@ export class CellSelectionService {
         this.localDataChangesService = localDataChangesService;
         this.navigationService = navigationService;
         this.changes = new EventEmitter();
+        this.aggregateChanges = new EventEmitter();
         this.mouseUpEvent = new EventEmitter();
         this.currentSelection = [];
         this.active = false;
@@ -106,6 +107,16 @@ export class CellSelectionService {
         }
         ev.ctrlKey = ctrlKey;
         ev.shiftKey = event.shiftKey;
+        if (this.options.cellAggregates) {
+            this.aggregateChanges.emit(ev);
+            ev.cellAggregates = this.aggregates;
+        }
+        if (ev.shiftKey) {
+            ev.rangeStartCell = this.lastSelectionItem;
+            ev.rangeEndCell = {
+                ...this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item
+            };
+        }
         this.changes.emit(ev);
     }
     toggle(item) {
@@ -209,13 +220,20 @@ export class CellSelectionService {
             }
             next = iterator.next();
         }
+        let cellAggregates;
+        if (this.options.cellAggregates) {
+            this.aggregateChanges.emit({ selectedCells, deselectedCells });
+            cellAggregates = this.aggregates;
+        }
         return {
             deselectedCells,
-            selectedCells
+            selectedCells,
+            cellAggregates
         };
     }
     get options() {
         const defaultOptions = {
+            cellAggregates: false,
             checkboxOnly: false,
             enabled: true,
             mode: "multiple"
@@ -225,6 +243,7 @@ export class CellSelectionService {
         }
         if (typeof this.settings.selectable === 'boolean') {
             return {
+                cellAggregates: false,
                 checkboxOnly: false,
                 enabled: this.settings.selectable,
                 mode: "multiple"

package/esm2020/selection/selection-checkbox.directive.mjs

@@ -54,6 +54,8 @@ export class SelectionCheckboxDirective {
                 const ev = this.selectionService.toggleByIndex(this.itemIndex);
                 ev.ctrlKey = true;
                 ev.shiftKey = false;
+                this.selectionService.aggregateChanges.emit(ev);
+                ev.cellAggregates = this.selectionService.aggregates;
                 this.selectionService.changes.emit(ev);
             });
         }