@progress/kendo-angular-grid 7.0.0-next.202203311511 → 7.0.0-next.202204011628

package/common/provider.service.d.ts

@@ -2,13 +2,19 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import type { GridComponent } from 'src/grid.component';
+import type { GridComponent } from '../grid.component';
 import * as i0 from "@angular/core";
 /**
  * @hidden
+ *
+ * The Context service is used to provide common
+ * services and DI tokens for a Grid instance.
+ *
+ * This keeps the constructor parameters stable
+ * and a avoids dependency cycles between components.
  */
-export declare class ProviderService {
+export declare class ContextService {
     grid: GridComponent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ProviderService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ProviderService>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ContextService>;
 }

package/editing-directives/editing-directive-base.d.ts

@@ -7,7 +7,7 @@ import { GridComponent } from '../grid.component';
 import { EditService } from './edit-service.interface';
 import { Subscription } from 'rxjs';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
-import { RemoveConfirmationCallback } from 'src/common/remove-confirmation';
+import { RemoveConfirmationCallback } from '../common/remove-confirmation';
 import * as i0 from "@angular/core";
 /**
  * @hidden

package/editing-directives/in-cell-editing.directive.d.ts

@@ -6,7 +6,7 @@ import { ChangeDetectorRef } from '@angular/core';
 import { EditingDirectiveBase } from './editing-directive-base';
 import { GridComponent } from '../grid.component';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
-import { CreateFormGroup } from 'src/common/create-form-group';
+import { CreateFormGroup } from '../common/create-form-group';
 import * as i0 from "@angular/core";
 /**
  * A directive which encapsulates the editing operations of the Grid when using the in-cell

package/editing-directives/reactive-editing.directive.d.ts

@@ -5,7 +5,7 @@
 import { RowEditingDirectiveBase } from './row-editing-directive-base';
 import { GridComponent } from '../grid.component';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
-import { CreateFormGroup } from 'src/common/create-form-group';
+import { CreateFormGroup } from '../common/create-form-group';
 import * as i0 from "@angular/core";
 /**
  * A directive which encapsulates the editing operations of the Grid when using the

package/esm2015/common/provider.service.js

@@ -6,11 +6,17 @@ import { Injectable } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * @hidden
+ *
+ * The Context service is used to provide common
+ * services and DI tokens for a Grid instance.
+ *
+ * This keeps the constructor parameters stable
+ * and a avoids dependency cycles between components.
  */
-export class ProviderService {
+export class ContextService {
 }
-ProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProviderService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProviderService, decorators: [{
+ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContextService, decorators: [{
             type: Injectable
         }] });

package/esm2015/grid.component.js

@@ -69,7 +69,7 @@ import { defaultTrackBy } from './common/default-track-by';
 import { CellSelectionService } from './selection/cell-selection.service';
 import { ColumnStickyChangeEvent } from './column-menu/column-sticky-change-event';
 import { CellLoadingTemplateDirective } from './rendering/cell-loading.template.directive';
-import { ProviderService } from './common/provider.service';
+import { ContextService } from './common/provider.service';
 import { LoadingTemplateDirective } from './rendering/loading-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
@@ -158,7 +158,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, providerService) {
+    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) {
         this.supportService = supportService;
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
@@ -184,7 +184,7 @@ export class GridComponent {
         this.sortService = sortService;
         this.scrollRequestService = scrollRequestService;
         this.localization = localization;
-        this.providerService = providerService;
+        this.ctx = ctx;
         /**
          * Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count
          * ([more information and example]({% slug databinding_grid %})).
@@ -461,7 +461,7 @@ export class GridComponent {
         this.rtl = false;
         this._rowClass = () => null;
         validatePackage(packageMetadata);
-        this.providerService.grid = this;
+        this.ctx.grid = this;
         this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
             this.direction = this.rtl ? 'rtl' : 'ltr';
@@ -1690,7 +1690,7 @@ export class GridComponent {
             return;
         }
         if (!this.selectionDirective && !isPresent(this.defaultSelection)) {
-            this.defaultSelection = new Selection(this, this.changeDetectorRef);
+            this.defaultSelection = new Selection(this.ctx, this.changeDetectorRef);
         }
         const cellSelectionMode = this.selectable['cell'];
         const activeService = cellSelectionMode ? this.cellSelectionService : this.selectionService;
@@ -2100,7 +2100,7 @@ export class GridComponent {
         return previousValue.cell !== currentValue.cell;
     }
 }
-GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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.ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: [
         BrowserSupportService,
         LocalizationService,
@@ -2141,7 +2141,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         IdService,
         ScrollRequestService,
         SortService,
-        ProviderService
+        ContextService
     ], 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"
@@ -2636,7 +2636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         IdService,
                         ScrollRequestService,
                         SortService,
-                        ProviderService
+                        ContextService
                     ],
                     selector: 'kendo-grid',
                     styles: [
@@ -3102,7 +3102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-grid-toolbar class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom" *ngIf="showBottomToolbar" 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.ProviderService }]; }, 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 }]; }, propDecorators: { data: [{
                 type: Input
             }], pageSize: [{
                 type: Input

package/esm2015/layout/resizable.directive.js

@@ -10,11 +10,11 @@ import * as i2 from "./../common/provider.service";
  * @hidden
  */
 export class ResizableContainerDirective {
-    constructor(el, renderer, resizeService, providerService) {
+    constructor(el, renderer, resizeService, ctx) {
         this.el = el;
         this.renderer = renderer;
         this.resizeService = resizeService;
-        this.providerService = providerService;
+        this.ctx = ctx;
         this.enabled = false;
     }
     set lockedWidth(value) {
@@ -47,8 +47,8 @@ export class ResizableContainerDirective {
         }
     }
     resize() {
-        if (this.providerService.grid && this.providerService.grid.wrapper) {
-            const containerElement = this.providerService.grid.wrapper.nativeElement;
+        if (this.ctx.grid && this.ctx.grid.wrapper) {
+            const containerElement = this.ctx.grid.wrapper.nativeElement;
             const width = Math.max(containerElement.clientWidth - this._lockedWidth, 0);
             if (this.enabled && width > 0) {
                 this.renderer.setStyle(this.el.nativeElement, "width", width + "px");
@@ -59,14 +59,14 @@ export class ResizableContainerDirective {
         }
     }
 }
-ResizableContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizableContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ResizeService }, { token: i2.ProviderService }], target: i0.ɵɵFactoryTarget.Directive });
+ResizableContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizableContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ResizeService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
 ResizableContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: { lockedWidth: "lockedWidth", kendoGridResizableContainer: "kendoGridResizableContainer" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizableContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridResizableContainer]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ResizeService }, { type: i2.ProviderService }]; }, propDecorators: { lockedWidth: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ResizeService }, { type: i2.ContextService }]; }, propDecorators: { lockedWidth: [{
                 type: Input,
                 args: ['lockedWidth']
             }], kendoGridResizableContainer: [{

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648739193,
+    publishDate: 1648830205,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/pdf/pdf.service.js

@@ -20,6 +20,9 @@ export class PDFService {
     draw(component, promise) {
         this.emitEvent(this.drawPDF, { component, promise });
     }
+    /**
+     * @hidden
+     */
     emitEvent(emitter, args) {
         if (emitter.observers.length === 0) {
             if (isDevMode()) {

package/esm2015/rendering/toolbar/toolbar.component.js

@@ -10,18 +10,18 @@ import * as i2 from "@angular/common";
  * @hidden
  */
 export class ToolbarComponent {
-    constructor(providerService) {
-        this.providerService = providerService;
+    constructor(ctx) {
+        this.ctx = ctx;
         this.context = {};
     }
     set position(value) {
         this.context.position = value;
     }
     get toolbarTemplateRef() {
-        return this.providerService.grid.toolbarTemplate ? this.providerService.grid.toolbarTemplate.templateRef : undefined;
+        return this.ctx.grid.toolbarTemplate ? this.ctx.grid.toolbarTemplate.templateRef : undefined;
     }
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
 ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: { position: "position" }, ngImport: i0, template: `
         <ng-template
             *ngIf="toolbarTemplateRef"
@@ -43,6 +43,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ProviderService }]; }, propDecorators: { position: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { position: [{
                 type: Input
             }] } });

package/esm2015/selection/selection-default.js

@@ -6,13 +6,13 @@ import { Input, EventEmitter, Output, Directive } from '@angular/core';
 import { isPresent } from "../utils";
 import { PairSet } from './pair-set';
 import * as i0 from "@angular/core";
-import * as i1 from "../grid.component";
+import * as i1 from "../common/provider.service";
 /**
  * @hidden
  */
 export class Selection {
-    constructor(grid, cd) {
-        this.grid = grid;
+    constructor(ctx, cd) {
+        this.ctx = ctx;
         this.cd = cd;
         /**
          * Defines the collection that will store the selected item keys.
@@ -27,7 +27,7 @@ export class Selection {
         this.init();
     }
     get isCellSelectionMode() {
-        return isPresent(this.grid.selectable) && this.grid.selectable['cell'];
+        return isPresent(this.ctx.grid.selectable) && this.ctx.grid.selectable['cell'];
     }
     ngOnChanges(changes) {
         // skip reinitialization if the user data is the same as the last state change
@@ -36,11 +36,11 @@ export class Selection {
         }
     }
     init() {
-        if (!isPresent(this.grid.rowSelected)) {
-            this.grid.rowSelected = (row) => this.rowSelectionState.has(this.getItemKey(row));
+        if (!isPresent(this.ctx.grid.rowSelected)) {
+            this.ctx.grid.rowSelected = (row) => this.rowSelectionState.has(this.getItemKey(row));
         }
-        if (!isPresent(this.grid.cellSelected)) {
-            this.grid.cellSelected = (row, column, colIndex) => {
+        if (!isPresent(this.ctx.grid.cellSelected)) {
+            this.ctx.grid.cellSelected = (row, column, colIndex) => {
                 const contender = this.getSelectionItem(row, column, colIndex);
                 return {
                     selected: this.cellSelectionState.has(contender.itemKey, contender.columnKey),
@@ -48,7 +48,7 @@ export class Selection {
                 };
             };
         }
-        this.selectionChangeSubscription = this.grid
+        this.selectionChangeSubscription = this.ctx.grid
             .selectionChange
             .subscribe(this.onSelectionChange.bind(this));
     }
@@ -101,7 +101,7 @@ export class Selection {
                 const itemKey = this.getItemKey(item);
                 this.rowSelectionState.delete(itemKey);
             });
-            if (this.grid.selectableSettings.mode === "single" && this.rowSelectionState.size > 0) {
+            if (this.ctx.grid.selectableSettings.mode === "single" && this.rowSelectionState.size > 0) {
                 this.reset();
             }
             selection.selectedRows.forEach((item) => {
@@ -113,7 +113,7 @@ export class Selection {
             selection.deselectedCells.forEach(({ itemKey, columnKey }) => {
                 this.cellSelectionState.delete(itemKey, columnKey);
             });
-            if (this.grid.selectableSettings.mode === "single" && this.cellSelectionState.size > 0) {
+            if (this.ctx.grid.selectableSettings.mode === "single" && this.cellSelectionState.size > 0) {
                 this.reset();
             }
             selection.selectedCells.forEach(({ itemKey, columnKey }) => {
@@ -142,7 +142,7 @@ export class Selection {
             Array.from(this.rowSelectionState);
     }
 }
-Selection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Selection, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+Selection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Selection, deps: [{ token: i1.ContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 Selection.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Selection, selector: "kendo-grid-selection-base", inputs: { selectedKeys: "selectedKeys", selectionKey: ["kendoGridSelectBy", "selectionKey"], columnKey: "columnKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Selection, decorators: [{
             type: Directive,
@@ -150,7 +150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendo-grid-selection-base'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedKeys: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedKeys: [{
                 type: Input
             }], selectionKey: [{
                 type: Input,

package/esm2015/selection/selection.directive.js

@@ -5,24 +5,24 @@
 import { Directive } from '@angular/core';
 import { Selection } from "./selection-default";
 import * as i0 from "@angular/core";
-import * as i1 from "../grid.component";
+import * as i1 from "../common/provider.service";
 /**
  * A directive which stores the row selection state of the Grid in memory
  * ([see example]({% slug selection_grid %}#toc-during-data-operations)).
  */
 export class SelectionDirective extends Selection {
-    constructor(grid, cd) {
-        super(grid, cd);
-        this.grid = grid;
+    constructor(ctx, cd) {
+        super(ctx, cd);
+        this.ctx = ctx;
     }
     /**
      * @hidden
      */
     ngOnInit() {
-        if (this.grid.selectable === false) {
-            this.grid.selectable = true;
+        if (this.ctx.grid.selectable === false) {
+            this.ctx.grid.selectable = true;
         }
-        this.grid.selectionDirective = this;
+        this.ctx.grid.selectionDirective = this;
     }
     /**
      * @hidden
@@ -31,11 +31,11 @@ export class SelectionDirective extends Selection {
         super.destroy();
     }
 }
-SelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionDirective, deps: [{ token: i1.ContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 SelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SelectionDirective, selector: "[kendoGridSelectBy]", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridSelectBy]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ChangeDetectorRef }]; } });

package/excel/excel.component.d.ts

@@ -7,7 +7,7 @@ import { ExcelExportData, ColumnBase, CellOptions } from '@progress/kendo-angula
 import { GridComponent } from '../grid.component';
 import { ExcelService } from './excel.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { FetchDataCallback } from 'src/common/fetch-data-callback';
+import { FetchDataCallback } from '../common/fetch-data-callback';
 import * as i0 from "@angular/core";
 /**
  * Configures the settings for the export of Grid in Excel ([see example]({% slug excelexport_grid %})).