@progress/kendo-angular-grid 16.5.0 → 16.6.0-develop.2

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

@@ -14,20 +14,18 @@ import { tap, filter, switchMapTo, takeUntil } from 'rxjs/operators';
 import { arrowLeftIcon, arrowRightIcon, sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
 import { PopupService } from '@progress/kendo-angular-popup';
+import { ChipComponent, ChipListComponent } from '@progress/kendo-angular-buttons';
 import { closest } from '../rendering/common/dom-queries';
-import { Keys } from '@progress/kendo-angular-common';
+import { DraggableDirective, EventsOutsideAngularDirective, Keys } from '@progress/kendo-angular-common';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { DraggableColumnDirective } from '../dragdrop/draggable-column.directive';
+import { NgIf, NgFor } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "../dragdrop/drag-hint.service";
 import * as i2 from "../dragdrop/drop-cue.service";
 import * as i3 from "./group-info.service";
 import * as i4 from "../common/provider.service";
 import * as i5 from "@progress/kendo-angular-popup";
-import * as i6 from "@angular/common";
-import * as i7 from "@progress/kendo-angular-common";
-import * as i8 from "@progress/kendo-angular-icons";
-import * as i9 from "../dragdrop/draggable-column.directive";
-import * as i10 from "../dragdrop/drop-target.directive";
-import * as i11 from "@progress/kendo-angular-buttons";
 const withoutField = ({ field }) => isNullOrEmptyString(field);
 const alreadyGrouped = ({ groups, field }) => groups.some(group => group.field === field);
 const overSameTarget = ({ target, field }) => target.field === field;
@@ -150,6 +148,7 @@ export class GroupPanelComponent {
         }
     }
     remove(group) {
+        this.destroyMenu();
         this.change.emit(this.groups.filter(x => x.field !== group.field));
     }
     toggleMenu(chip, first, last, field) {
@@ -272,7 +271,7 @@ export class GroupPanelComponent {
     }
 }
 GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupPanelComponent, deps: [{ token: i1.DragHintService }, { token: i2.DropCueService }, { token: i3.GroupInfoService }, { token: i4.ContextService }, { token: i0.ChangeDetectorRef }, { token: i5.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", navigable: "navigable", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
+GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GroupPanelComponent, isStandalone: true, selector: "kendo-grid-group-panel", inputs: { text: "text", navigable: "navigable", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
         <div
             *ngIf="groups.length === 0"
             class="k-grouping-drop-container"
@@ -350,7 +349,7 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </li>
             </ul>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: i9.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: i10.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "component", type: i11.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "component", type: i11.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "component", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -434,7 +433,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </li>
             </ul>
         </ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, DropTargetDirective, ChipListComponent, NgFor, ChipComponent, DraggableColumnDirective, DraggableDirective, EventsOutsideAngularDirective, IconWrapperComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.DragHintService }, { type: i2.DropCueService }, { type: i3.GroupInfoService }, { type: i4.ContextService }, { type: i0.ChangeDetectorRef }, { type: i5.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { change: [{
                 type: Output

package/esm2020/grouping/group-scroll-binding.directive.mjs

@@ -317,12 +317,13 @@ export class GroupBindingDirective extends DataBindingDirective {
     }
 }
 GroupBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupBindingDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalDataChangesService }, { token: i2.ContextService }, { token: i3.GroupsService }], target: i0.ɵɵFactoryTarget.Directive });
-GroupBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GroupBindingDirective, selector: "[kendoGridGroupBinding]", inputs: { kendoGridGroupBinding: "kendoGridGroupBinding", sort: "sort", filter: "filter", group: "group" }, exportAs: ["kendoGridGroupBinding"], usesInheritance: true, ngImport: i0 });
+GroupBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GroupBindingDirective, isStandalone: true, selector: "[kendoGridGroupBinding]", inputs: { kendoGridGroupBinding: "kendoGridGroupBinding", sort: "sort", filter: "filter", group: "group" }, exportAs: ["kendoGridGroupBinding"], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridGroupBinding]',
-                    exportAs: 'kendoGridGroupBinding'
+                    exportAs: 'kendoGridGroupBinding',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.LocalDataChangesService }, { type: i2.ContextService }, { type: i3.GroupsService }]; }, propDecorators: { kendoGridGroupBinding: [{
                 type: Input,

package/esm2020/grouping/group.module.mjs

@@ -3,52 +3,52 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { GroupHeaderTemplateDirective } from './group-header-template.directive';
-import { GroupHeaderColumnTemplateDirective } from './group-header-column-template.directive';
-import { GroupHeaderComponent } from './group-header.component';
-import { GroupFooterTemplateDirective } from './group-footer-template.directive';
-import { GroupPanelComponent } from './group-panel.component';
-import { SharedModule } from "../shared.module";
-import { DragAndDropModule } from '../dragdrop/drag-and-drop.module';
-import { ChipModule } from '@progress/kendo-angular-buttons';
-import { PopupModule } from '@progress/kendo-angular-popup';
+import { KENDO_CHIPLIST } from '@progress/kendo-angular-buttons';
+import { KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
+import { IconsService } from '@progress/kendo-angular-icons';
+import { ResizeBatchService } from '@progress/kendo-angular-common';
+import { KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_SHARED } from '../directives';
 import * as i0 from "@angular/core";
-const exportedModules = [
-    GroupHeaderTemplateDirective,
-    GroupHeaderColumnTemplateDirective,
-    GroupFooterTemplateDirective,
-    GroupHeaderComponent,
-    GroupPanelComponent,
-];
+import * as i1 from "../columns/column.component";
+import * as i2 from "../columns/column-group.component";
+import * as i3 from "../navigation/logical-cell.directive";
+import * as i4 from "../navigation/logical-row.directive";
+import * as i5 from "../navigation/focusable.directive";
+import * as i6 from "../rendering/footer/footer-template.directive";
+import * as i7 from "../rendering/common/col-group.component";
+import * as i8 from "../layout/resizable.directive";
+import * as i9 from "@progress/kendo-angular-common";
+import * as i10 from "../rendering/common/field-accessor.pipe";
+import * as i11 from "../rendering/details/detail-template.directive";
+import * as i12 from "../columns/span-column.component";
+import * as i13 from "../column-resizing/table.directive";
+import * as i14 from "../rendering/common/loading.component";
+import * as i15 from "../rendering/grid-table.directive";
+import * as i16 from "../dragdrop/draggable-column.directive";
+import * as i17 from "../dragdrop/drop-target.directive";
+import * as i18 from "@progress/kendo-angular-buttons";
+import * as i19 from "@progress/kendo-angular-popup";
+import * as i20 from "./group-header-template.directive";
+import * as i21 from "./group-header-column-template.directive";
+import * as i22 from "./group-footer-template.directive";
+import * as i23 from "./group-header.component";
+import * as i24 from "./group-panel.component";
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * @hidden
+ *
+ * This module is deprecated and will be removed in a future major version release.
  */
 export class GroupModule {
-    static exports() {
-        return [
-            GroupHeaderTemplateDirective,
-            GroupHeaderColumnTemplateDirective,
-            GroupFooterTemplateDirective
-        ];
-    }
 }
 GroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: GroupModule, declarations: [GroupHeaderTemplateDirective,
-        GroupHeaderColumnTemplateDirective,
-        GroupFooterTemplateDirective,
-        GroupHeaderComponent,
-        GroupPanelComponent], imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule, PopupModule], exports: [GroupHeaderTemplateDirective,
-        GroupHeaderColumnTemplateDirective,
-        GroupFooterTemplateDirective,
-        GroupHeaderComponent,
-        GroupPanelComponent] });
-GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupModule, imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule, PopupModule] });
+GroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: GroupModule, imports: [i1.ColumnComponent, i2.ColumnGroupComponent, i3.LogicalCellDirective, i4.LogicalRowDirective, i5.FocusableDirective, i6.FooterTemplateDirective, i7.ColGroupComponent, i8.ResizableContainerDirective, i9.TemplateContextDirective, i10.FieldAccessorPipe, i11.DetailTemplateDirective, i12.SpanColumnComponent, i13.TableDirective, i14.LoadingComponent, i15.GridTableDirective, i9.DraggableDirective, i16.DraggableColumnDirective, i17.DropTargetDirective, i18.ChipComponent, i18.ChipListComponent, i19.PopupComponent, i20.GroupHeaderTemplateDirective, i21.GroupHeaderColumnTemplateDirective, i22.GroupFooterTemplateDirective, i23.GroupHeaderComponent, i24.GroupPanelComponent], exports: [i20.GroupHeaderTemplateDirective, i21.GroupHeaderColumnTemplateDirective, i22.GroupFooterTemplateDirective, i23.GroupHeaderComponent, i24.GroupPanelComponent] });
+GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ColumnComponent, i2.ColumnGroupComponent, i7.ColGroupComponent, i12.SpanColumnComponent, i14.LoadingComponent, KENDO_CHIPLIST, KENDO_POPUP, i23.GroupHeaderComponent, i24.GroupPanelComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...exportedModules],
-                    exports: [exportedModules],
-                    imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule, PopupModule]
+                    exports: [...KENDO_GRID_GROUP_EXPORTS],
+                    imports: [...KENDO_GRID_SHARED, ...KENDO_GRID_COLUMN_DRAGANDDROP, ...KENDO_CHIPLIST, ...KENDO_POPUP, ...KENDO_GRID_GROUP_EXPORTS],
+                    providers: [IconsService, PopupService, ResizeBatchService]
                 }]
         }] });

package/esm2020/index.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+export * from './directives';
 export { GridModule } from './grid.module';
 export { SharedModule } from './shared.module';
 export { GridComponent } from './grid.component';
@@ -64,7 +65,6 @@ export { GroupHeaderTemplateDirective } from './grouping/group-header-template.d
 export { GroupHeaderColumnTemplateDirective } from './grouping/group-header-column-template.directive';
 export { GroupFooterTemplateDirective } from './grouping/group-footer-template.directive';
 export { ResizableContainerDirective } from './layout/resizable.directive';
-export { TemplateContextDirective } from './rendering/common/template-context.directive';
 export { NoRecordsTemplateDirective } from './rendering/no-records-template.directive';
 export { DataBindingDirective } from './databinding.directive';
 export { SelectionDirective } from './selection/selection.directive';

package/esm2020/layout/resizable.directive.mjs

@@ -62,11 +62,12 @@ export class ResizableContainerDirective {
     }
 }
 ResizableContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: { lockedWidth: "lockedWidth", kendoGridResizableContainer: "kendoGridResizableContainer" }, ngImport: i0 });
+ResizableContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ResizableContainerDirective, isStandalone: true, selector: "[kendoGridResizableContainer]", inputs: { lockedWidth: "lockedWidth", kendoGridResizableContainer: "kendoGridResizableContainer" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ResizableContainerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGridResizableContainer]'
+                    selector: '[kendoGridResizableContainer]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ResizeService }, { type: i2.ContextService }]; }, propDecorators: { lockedWidth: [{
                 type: Input,

package/esm2020/localization/custom-messages.component.mjs

@@ -21,7 +21,7 @@ export class CustomMessagesComponent extends GridMessages {
     }
 }
 CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, selector: "kendo-grid-messages", providers: [
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-grid-messages", providers: [
         {
             provide: GridMessages,
             useExisting: forwardRef(() => CustomMessagesComponent)
@@ -37,6 +37,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ],
                     selector: 'kendo-grid-messages',
-                    template: ``
+                    template: ``,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2020/localization/localized-messages.directive.mjs

@@ -17,7 +17,7 @@ export class LocalizedMessagesDirective extends GridMessages {
     }
 }
 LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]", providers: [
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoGridLocalizedMessages]", providers: [
         {
             provide: GridMessages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
@@ -32,6 +32,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => LocalizedMessagesDirective)
                         }
                     ],
-                    selector: '[kendoGridLocalizedMessages]'
+                    selector: '[kendoGridLocalizedMessages]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2020/navigation/focusable.directive.mjs

@@ -116,7 +116,7 @@ export class FocusableDirective {
     }
 }
 FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusableDirective, deps: [{ token: CELL_CONTEXT, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
-FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: { enabled: ["kendoGridFocusable", "enabled"] }, ngImport: i0 });
+FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusableDirective, isStandalone: true, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: { enabled: ["kendoGridFocusable", "enabled"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
             args: [{
@@ -126,7 +126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         [kendoGridSaveCommand],
         [kendoGridCancelCommand],
         [kendoGridSelectionCheckbox]
-    `
+    `,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional

package/esm2020/navigation/logical-cell.directive.mjs

@@ -139,7 +139,7 @@ export class LogicalCellDirective {
     }
 }
 LogicalCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LogicalCellDirective, deps: [{ token: i1.FocusGroup }, { token: i0.ElementRef }, { token: i2.ColumnInfoService }, { token: i3.IdService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-LogicalCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: { logicalColIndex: "logicalColIndex", logicalRowIndex: "logicalRowIndex", logicalSlaveCell: "logicalSlaveCell", colIndex: "colIndex", colSpan: "colSpan", rowSpan: "rowSpan", groupItem: "groupItem", dataRowIndex: "dataRowIndex", dataItem: "dataItem", detailExpandCell: "detailExpandCell", headerLabelText: "headerLabelText" }, host: { properties: { "attr.id": "this.id", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [{
+LogicalCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LogicalCellDirective, isStandalone: true, selector: "[kendoGridLogicalCell]", inputs: { logicalColIndex: "logicalColIndex", logicalRowIndex: "logicalRowIndex", logicalSlaveCell: "logicalSlaveCell", colIndex: "colIndex", colSpan: "colSpan", rowSpan: "rowSpan", groupItem: "groupItem", dataRowIndex: "dataRowIndex", dataItem: "dataItem", detailExpandCell: "detailExpandCell", headerLabelText: "headerLabelText" }, host: { properties: { "attr.id": "this.id", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [{
             provide: FocusGroup,
             deps: [FocusRoot],
             useClass: FocusGroup
@@ -152,7 +152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             deps: [FocusRoot],
                             useClass: FocusGroup
                         }],
-                    selector: '[kendoGridLogicalCell]'
+                    selector: '[kendoGridLogicalCell]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.FocusGroup }, { type: i0.ElementRef }, { type: i2.ColumnInfoService }, { type: i3.IdService }, { type: i4.NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Optional

package/esm2020/navigation/logical-row.directive.mjs

@@ -86,11 +86,12 @@ export class LogicalRowDirective {
     }
 }
 LogicalRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LogicalRowDirective, deps: [{ token: i1.IdService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem", totalColumns: "totalColumns" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "attr.data-kendo-grid-row-index": "this.rowIndex", "class.k-table-row": "this.tableRowClass", "attr.aria-owns": "this.ariaOwns" } }, usesOnChanges: true, ngImport: i0 });
+LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LogicalRowDirective, isStandalone: true, selector: "[kendoGridLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem", totalColumns: "totalColumns" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "attr.data-kendo-grid-row-index": "this.rowIndex", "class.k-table-row": "this.tableRowClass", "attr.aria-owns": "this.ariaOwns" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LogicalRowDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoGridLogicalRow]'
+                    selector: '[kendoGridLogicalRow]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.IdService }, { type: i2.NavigationService }]; }, propDecorators: { logicalRowIndex: [{
                 type: Input

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: 1721814289,
-    version: '16.5.0',
+    publishDate: 1721847179,
+    version: '16.6.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager-dropdown.directive.mjs

@@ -29,8 +29,11 @@ export class PagerDropDownListDirective {
     }
 }
 PagerDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerDropDownListDirective, deps: [{ token: i1.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
-PagerDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]", ngImport: i0 });
+PagerDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerDropDownListDirective, isStandalone: true, selector: "[kendoGridPagerDropDown]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerDropDownListDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kendoGridPagerDropDown]' }]
+            args: [{
+                    selector: '[kendoGridPagerDropDown]',
+                    standalone: true
+                }]
         }], ctorParameters: function () { return [{ type: i1.DropDownListComponent }]; } });

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

@@ -58,13 +58,14 @@ export class PagerInfoComponent extends PagerElementComponent {
     }
 }
 PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerInfoComponent, selector: "kendo-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerInfoComponent, isStandalone: true, selector: "kendo-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-pager-info',
-                    template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`
+                    template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { classes: [{
                 type: HostBinding,

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

@@ -7,16 +7,14 @@ import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
 import { Component, ChangeDetectorRef, ViewChild, NgZone } from '@angular/core';
 import { PagerElementComponent } from './pager-element.component';
 import { PagerContextService } from "./pager-context.service";
-import { Keys } from '@progress/kendo-angular-common';
+import { EventsOutsideAngularDirective, Keys } from '@progress/kendo-angular-common';
 import { ContextService } from '../common/provider.service';
+import { FocusableDirective } from '../navigation/focusable.directive';
+import { PagerInputDirective } from './pager-input.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 import * as i2 from "./pager-context.service";
 import * as i3 from "./../navigation/navigation.service";
-import * as i4 from "@progress/kendo-angular-common";
-import * as i5 from "@progress/kendo-angular-inputs";
-import * as i6 from "../navigation/focusable.directive";
-import * as i7 from "./pager-input.directive";
 /**
  * Displays an input element which allows the typing and rendering of page numbers ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
@@ -81,7 +79,7 @@ export class PagerInputComponent extends PagerElementComponent {
     }
 }
 PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.ContextService }, { token: i2.PagerContextService }, { token: i0.NgZone }, { token: i3.NavigationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerInputComponent, selector: "kendo-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerInputComponent, isStandalone: true, selector: "kendo-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
      <span class="k-pager-input k-label">
         {{textFor('pagerPage')}}
         <kendo-numerictextbox
@@ -105,7 +103,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         </kendo-numerictextbox>
         {{textFor('pagerOf')}} {{totalPages}}
      </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", 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", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: i7.PagerInputDirective, selector: "[kendoGridPagerInput]" }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: 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", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PagerInputDirective, selector: "[kendoGridPagerInput]" }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -134,7 +132,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </kendo-numerictextbox>
         {{textFor('pagerOf')}} {{totalPages}}
      </span>
-    `
+    `,
+                    standalone: true,
+                    imports: [NumericTextBoxComponent, PagerInputDirective, FocusableDirective, EventsOutsideAngularDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.PagerContextService }, { type: i0.NgZone }, { type: i3.NavigationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
                 type: ViewChild,

package/esm2020/pager/pager-input.directive.mjs

@@ -20,8 +20,11 @@ export class PagerInputDirective {
     }
 }
 PagerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputDirective, deps: [{ token: i1.NumericTextBoxComponent }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-PagerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerInputDirective, selector: "[kendoGridPagerInput]", ngImport: i0 });
+PagerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerInputDirective, isStandalone: true, selector: "[kendoGridPagerInput]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kendoGridPagerInput]' }]
+            args: [{
+                    selector: '[kendoGridPagerInput]',
+                    standalone: true
+                }]
         }], ctorParameters: function () { return [{ type: i1.NumericTextBoxComponent }, { type: i0.Renderer2 }]; } });

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

@@ -7,12 +7,12 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
 import { ContextService } from '../common/provider.service';
+import { FocusableDirective } from '../navigation/focusable.directive';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 import * as i2 from "./pager-context.service";
 import * as i3 from "./../navigation/navigation.service";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "../navigation/focusable.directive";
 /**
  * Displays buttons for navigating to the next and to the last page ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
@@ -39,7 +39,7 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
     }
 }
 PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.ContextService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerNextButtonsComponent, selector: "kendo-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
+PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
         <button
             kendoButton
             [kendoGridFocusable]="!disabled"
@@ -70,7 +70,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             [attr.aria-label]="textFor('pagerLastPage')"
             (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
         </button>
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i5.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -107,6 +107,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [attr.aria-label]="textFor('pagerLastPage')"
             (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
         </button>
-    `
+    `,
+                    standalone: true,
+                    imports: [ButtonComponent, FocusableDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }, { type: i3.NavigationService }]; } });

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

@@ -6,12 +6,12 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inpu
 import { ContextService } from '../common/provider.service';
 import { PagerContextService } from './pager-context.service';
 import { PagerElementComponent } from './pager-element.component';
+import { NgClass, NgIf, NgFor } from '@angular/common';
+import { FocusableDirective } from '../navigation/focusable.directive';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 import * as i2 from "./pager-context.service";
-import * as i3 from "@angular/common";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "../navigation/focusable.directive";
 /**
  * Displays numeric buttons to enable navigation between the pages ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
@@ -88,7 +88,7 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
     }
 }
 PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerNumericButtonsComponent, isStandalone: true, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <select
             #select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
@@ -162,7 +162,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 [attr.title]="pageLabel(end + 1)"
                 (click)="changePage(end)">...</button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i5.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -242,7 +242,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [attr.title]="pageLabel(end + 1)"
                 (click)="changePage(end)">...</button>
         </div>
-    `
+    `,
+                    standalone: true,
+                    imports: [FocusableDirective, NgClass, NgIf, NgFor, ButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { selectElement: [{
                 type: ViewChild,

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

@@ -7,14 +7,14 @@ import { Component, ChangeDetectorRef, ChangeDetectionStrategy, HostBinding, Inp
 import { PagerElementComponent } from './pager-element.component';
 import { PagerContextService } from './pager-context.service';
 import { ContextService } from '../common/provider.service';
+import { FocusableDirective } from '../navigation/focusable.directive';
+import { PagerDropDownListDirective } from './pager-dropdown.directive';
+import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
+import { LabelComponent } from '@progress/kendo-angular-label';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 import * as i2 from "./pager-context.service";
 import * as i3 from "./../navigation/navigation.service";
-import * as i4 from "@progress/kendo-angular-label";
-import * as i5 from "@progress/kendo-angular-dropdowns";
-import * as i6 from "../navigation/focusable.directive";
-import * as i7 from "./pager-dropdown.directive";
 /**
  * Displays a drop-down list for the page size selection ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
@@ -27,7 +27,7 @@ export class PagerPageSizesComponent extends PagerElementComponent {
     }
     /**
      * The page sizes collection. Can be an Array of numbers and/or [`PageSizeItem`](slug:api_grid_pagesizeitem) objects
-     * ([see example]({% slug paging_grid %}#toc-pager-templates))
+     * ([see example](slug:pager_template_grid))
      */
     set pageSizes(pageSizes) {
         let normalizedItems = [];
@@ -94,7 +94,7 @@ export class PagerPageSizesComponent extends PagerElementComponent {
     }
 }
 PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.ContextService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
+PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             class="k-dropdown"
             #dropdownlist
@@ -109,7 +109,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i5.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: i7.PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
@@ -130,7 +130,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [value]="pageSize"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `
+    `,
+                    standalone: true,
+                    imports: [DropDownListComponent, PagerDropDownListDirective, FocusableDirective, LabelComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }, { type: i3.NavigationService }]; }, propDecorators: { pageSizes: [{
                 type: Input