@progress/kendo-angular-grid 18.4.1-develop.2 → 18.5.0-develop.10

package/fesm2022/progress-kendo-angular-grid.mjs

@@ -3,44 +3,49 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ViewEncapsulation, inject, NgModule } from '@angular/core';
 import { merge, of, Subject, zip as zip$1, from, Subscription, interval, fromEvent, Observable, BehaviorSubject } from 'rxjs';
 import * as i1$3 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isPresent as isPresent$1, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, closest as closest$1, isFocusable as isFocusable$1, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@progress/kendo-angular-icons';
 import { IconWrapperComponent, IconsService, KENDO_ICONS } from '@progress/kendo-angular-icons';
-import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterClearIcon, filterIcon, columnsIcon, chevronUpIcon, chevronDownIcon, displayInlineFlexIcon, maxWidthIcon, stickIcon, unstickIcon, setColumnPositionIcon, slidersIcon, moreVerticalIcon, reorderIcon, minusIcon, insertMiddleIcon, filePdfIcon, fileExcelIcon } from '@progress/kendo-svg-icons';
+import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterClearIcon, filterIcon, columnsIcon, chevronUpIcon, chevronDownIcon, displayInlineFlexIcon, maxWidthIcon, stickIcon, unstickIcon, setColumnPositionIcon, slidersIcon, moreVerticalIcon, reorderIcon, minusIcon, insertMiddleIcon, checkIcon, xIcon, saveIcon, filePdfIcon, fileExcelIcon } from '@progress/kendo-svg-icons';
 import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, tap, throttleTime, debounceTime, distinctUntilChanged, skip, auditTime, bufferCount } from 'rxjs/operators';
 import * as i1$2 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import * as i44 from '@progress/kendo-angular-pager';
 import { PagerContextService, PagerNavigationService, PagerTemplateDirective, KENDO_PAGER } from '@progress/kendo-angular-pager';
 import { orderBy, isCompositeFilterDescriptor, groupBy, process, filterBy } from '@progress/kendo-data-query';
-import { NgFor, NgIf, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgClass, NgStyle, NgSwitchDefault } from '@angular/common';
+import { NgFor, NgIf, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgClass, NgStyle, NgSwitchDefault, KeyValuePipe } from '@angular/common';
 import { getter } from '@progress/kendo-common';
 import * as i1$4 from '@progress/kendo-angular-intl';
 import * as i5 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { ChipListComponent, ChipComponent, ButtonComponent, Button } from '@progress/kendo-angular-buttons';
+import * as i2 from '@progress/kendo-angular-buttons';
+import { ChipListComponent, ChipComponent, ButtonComponent, Button, KENDO_BUTTON } from '@progress/kendo-angular-buttons';
 import * as i1$5 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
-import * as i3 from '@progress/kendo-angular-inputs';
-import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent } from '@progress/kendo-angular-inputs';
-import { DatePickerComponent, DatePickerCustomMessagesComponent, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dateinputs';
+import * as i4$1 from '@progress/kendo-angular-inputs';
+import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_CHECKBOX } from '@progress/kendo-angular-inputs';
+import * as i5$1 from '@progress/kendo-angular-dateinputs';
+import { DatePickerComponent, DatePickerCustomMessagesComponent, KENDO_DATEPICKER, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { TabStripComponent, TabStripTabComponent, TabTitleDirective, TabContentDirective } from '@progress/kendo-angular-layout';
 import { saveAs } from '@progress/kendo-file-saver';
-import * as i5$1 from '@progress/kendo-angular-excel-export';
+import * as i5$2 from '@progress/kendo-angular-excel-export';
 import { workbookOptions, toDataURL, ColumnBase as ColumnBase$1, ColumnComponent as ColumnComponent$1, ColumnGroupComponent as ColumnGroupComponent$1, FooterTemplateDirective as FooterTemplateDirective$1, GroupFooterTemplateDirective as GroupFooterTemplateDirective$1, GroupHeaderColumnTemplateDirective as GroupHeaderColumnTemplateDirective$1, GroupHeaderTemplateDirective as GroupHeaderTemplateDirective$1 } from '@progress/kendo-angular-excel-export';
 import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponent } from '@progress/kendo-angular-pdf-export';
 import { validatePackage } from '@progress/kendo-licensing';
 import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
+import * as i1$6 from '@progress/kendo-angular-dialog';
+import { DialogContainerDirective, DialogService, DialogContentBase, DialogActionsComponent, DialogContainerService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
+import * as i3 from '@progress/kendo-angular-label';
+import { KENDO_LABELS } from '@progress/kendo-angular-label';
 import * as i45 from '@progress/kendo-angular-toolbar';
 import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
-import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
 
 /* eslint-disable  no-bitwise */
 /**
@@ -444,7 +449,7 @@ const nodesToArray = (nodes) => [].slice.call(nodes);
 /**
  * @hidden
  */
-const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
+const replaceMessagePlaceholder = (message, name, value) => (message ?? '').replace(new RegExp(`{\\s*${name}\\s*}`, 'g'), value);
 /**
  * @hidden
  */
@@ -506,6 +511,15 @@ const findRowSpan = (data, index, field) => {
     }
     return rowspan;
 };
+/**
+ * @hidden
+ * Determines whether selection of multiple ranges is enabled in the selectable settings.
+ */
+const isMultipleRangesEnabled = (selectableSettings) => {
+    return selectableSettings &&
+        typeof selectableSettings === 'object' &&
+        selectableSettings.selectable.multipleRanges;
+};
 
 /**
  * @hidden
@@ -1416,6 +1430,7 @@ class DomEventsService {
     cellMouseup = new EventEmitter();
     click = new EventEmitter();
     keydown = new EventEmitter();
+    shiftKeyup = new EventEmitter();
     focus = new EventEmitter();
     focusIn = new EventEmitter();
     focusOut = new EventEmitter();
@@ -1629,7 +1644,7 @@ class EditService {
         this.changes.emit({ action: 'edit', rowIndex });
     }
     beginAdd() {
-        this.changes.emit({ action: 'add' });
+        this.changes.emit({ action: 'add', isNew: true });
     }
     endEdit(rowIndex) {
         const { group: formGroup } = this.context(rowIndex);
@@ -2467,6 +2482,10 @@ class ColumnBase {
             throw new Error(ColumnConfigurationErrorMessages.columnNested);
         }
     }
+    ngAfterViewInit() {
+        this.initialMaxResizableWidth = this.maxResizableWidth;
+        this.initialMinResizableWidth = this.minResizableWidth;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass", cellRowspan: "cellRowspan" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
 }
@@ -2840,10 +2859,6 @@ class ColumnComponent extends ColumnBase {
     get displayTitle() {
         return this.title === undefined ? this.field : this.title;
     }
-    ngAfterViewInit() {
-        this.initialMaxResizableWidth = this.maxResizableWidth;
-        this.initialMinResizableWidth = this.minResizableWidth;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
             {
@@ -3452,6 +3467,8 @@ class NavigationService {
     tableIsNavigable = false;
     toolbarIsNavigable = false;
     lastCellRowIndex;
+    isShiftPressed = false;
+    currentSelection = [];
     get activeDataRow() {
         return Math.max(0, this.activeRowIndex - this.meta.headerRows);
     }
@@ -3496,6 +3513,10 @@ class NavigationService {
             .subscribe(() => this.cursor.reset(0, 0)));
         this.subs.add(this.domEvents.keydown
             .subscribe(args => this.onKeydown(args)));
+        this.subs.add(this.domEvents.shiftKeyup
+            .subscribe(() => {
+            this.isShiftPressed = false;
+        }));
         this.subs.add(this.domEvents.keydown.pipe(filter(args => args.keyCode === Keys.Tab && this.mode === 2 /* NavigationMode.Content */), switchMapTo(this.domEvents.focusOut.pipe(takeUntil(
         // Timeout if focusOut doesn't fire very soon
         interval(0).pipe(take(1))))))
@@ -3733,12 +3754,23 @@ class NavigationService {
         let step = modifier ? 5 : 1;
         const rowspan = +args.target?.getAttribute('rowspan');
         let rowspanOffset = 0;
+        let startNewSelection = false;
+        const allowMultipleRanges = (this.ctx.grid.selectionService.active && this.ctx.grid.selectableSettings?.multipleRanges) ||
+            (this.ctx.grid.cellSelectionService.active && this.ctx.grid.cellSelectionService?.options?.multipleRanges);
+        if (!allowMultipleRanges) {
+            this.currentSelection = [];
+        }
         if (!this.onCellKeydown(args)) {
             return;
         }
         const row = this.cursor.row;
         const dir = args.keyCode === Keys.ArrowDown ? 'Down' : 'Up';
         const right = args.keyCode === Keys.ArrowRight;
+        const isArrowKey = args.code === 'ArrowDown' || args.code === 'ArrowUp' || args.code === 'ArrowLeft' || args.code === 'ArrowRight';
+        if (!this.isShiftPressed && args.shiftKey && isArrowKey) {
+            startNewSelection = true;
+            this.isShiftPressed = true;
+        }
         switch (args.keyCode) {
             case Keys.ArrowDown:
             case Keys.ArrowUp:
@@ -3751,9 +3783,10 @@ class NavigationService {
                         return;
                     }
                     preventDefault = this.cursor[`move${dir}`](step);
+                    const preserveCurrentSelection = startNewSelection && allowMultipleRanges;
                     if (this.activeRow?.dataItem) {
                         const sign = dir === 'Down' ? 1 : -1;
-                        this.handleVerticalArrowSelection(sign * step);
+                        this.handleVerticalArrowSelection(sign * step, preserveCurrentSelection);
                     }
                 }
                 else {
@@ -3772,7 +3805,8 @@ class NavigationService {
                         return;
                     }
                     preventDefault = this[`moveCursor${right ? 'Fwd' : 'Bwd'}`]();
-                    this.handleHorizontalArrowSelection(args);
+                    const preserveCurrentSelection = startNewSelection && allowMultipleRanges;
+                    this.handleHorizontalArrowSelection(args, preserveCurrentSelection);
                 }
                 else {
                     preventDefault = this[`moveCursor${right ? 'Fwd' : 'Bwd'}`]();
@@ -3975,7 +4009,7 @@ class NavigationService {
         this.leaveCell();
         this.cursor.reset();
     }
-    handleVerticalArrowSelection(args) {
+    handleVerticalArrowSelection(args, preserveSelection) {
         const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
         const rowSelectionEnabled = this.ctx.grid.selectionService.active && !this.ctx.grid.selectableSettings.checkboxOnly;
         if (cellSelectionEnabled || rowSelectionEnabled) {
@@ -3985,14 +4019,15 @@ class NavigationService {
             const dataItem = selectionService.settings.view.at(rowIdx);
             const item = { index: this.activeRow.dataRowIndex, data: dataItem, column: this.ctx.grid.columnsContainer.leafColumnsToRender[colIdx] };
             if (selectionService.options.mode === 'multiple') {
-                cellSelectionEnabled ? this.handleMultipleArrowCellSelection(item) : this.handleMultipleArrowRowSelection(item);
+                const startRowIndex = this.activeRow.dataRowIndex - args;
+                cellSelectionEnabled ? this.handleMultipleArrowCellSelection(item, preserveSelection, startRowIndex, colIdx) : this.handleMultipleArrowRowSelection(item, preserveSelection, startRowIndex);
             }
             else {
                 selectionService.handleClick(item, args);
             }
         }
     }
-    handleHorizontalArrowSelection(args) {
+    handleHorizontalArrowSelection(args, preserveSelection) {
         const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
         if (cellSelectionEnabled) {
             const selectionService = this.ctx.grid[cellSelectionEnabled ? 'cellSelectionService' : 'selectionService'];
@@ -4004,27 +4039,37 @@ class NavigationService {
                 return;
             }
             if (selectionService.options.mode === 'multiple') {
-                this.handleMultipleArrowCellSelection(item);
+                const startColumnIndex = args.key === 'ArrowRight' ? colIdx - 1 : colIdx + 1;
+                this.handleMultipleArrowCellSelection(item, preserveSelection, row.dataRowIndex, startColumnIndex);
             }
             else {
                 selectionService.handleClick(item, args);
             }
         }
     }
-    handleMultipleArrowCellSelection(item) {
+    handleMultipleArrowCellSelection(item, preserveSelection, startRow, startColumn) {
         const cellSelectionService = this.ctx.grid.cellSelectionService;
-        const startRowIndex = Math.min(cellSelectionService.lastSelectionItemRowIndex, item.index);
-        const startColIndex = Math.min(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
-        const endRowIndex = Math.max(cellSelectionService.lastSelectionItemRowIndex, item.index);
-        const endColIndex = Math.max(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
-        const ev = cellSelectionService.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex);
+        const startRowIndex = preserveSelection ? startRow : Math.min(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const startColIndex = preserveSelection ? startColumn : Math.min(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        const endRowIndex = preserveSelection ? item.index : Math.max(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const endColIndex = preserveSelection ? item.column.leafIndex : Math.max(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        if (preserveSelection) {
+            cellSelectionService.lastSelectionItemRowIndex = startRow;
+            cellSelectionService.lastSelectionItemColIndex = startColumn;
+            this.currentSelection = cellSelectionService.currentSelection;
+        }
+        const ev = cellSelectionService.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex, preserveSelection, this.currentSelection);
         cellSelectionService.changes.emit(ev);
     }
-    handleMultipleArrowRowSelection(item) {
+    handleMultipleArrowRowSelection(item, preserveSelection, startRow) {
         const rowSelectionService = this.ctx.grid.selectionService;
-        const startRowIndex = Math.min(rowSelectionService.lastSelectionStartIndex, item.index);
-        const endRowIndex = Math.max(rowSelectionService.lastSelectionStartIndex, item.index);
-        const ev = rowSelectionService.selectRange(startRowIndex, endRowIndex);
+        const startRowIndex = preserveSelection ? startRow : Math.min(rowSelectionService.lastSelectionStartIndex, item.index);
+        const endRowIndex = preserveSelection ? item.index : Math.max(rowSelectionService.lastSelectionStartIndex, item.index);
+        if (preserveSelection) {
+            rowSelectionService.lastSelectionStartIndex = startRow;
+            this.currentSelection = rowSelectionService.currentSelection;
+        }
+        const ev = rowSelectionService.selectRange(startRowIndex, endRowIndex, preserveSelection, this.currentSelection);
         rowSelectionService.changes.emit(ev);
     }
     calculateRowspanOffset(direction, cellRowspan) {
@@ -7603,16 +7648,14 @@ const diffFilters = (a, b) => {
  */
 class FilterHostDirective {
     host;
-    resolver;
     column;
     filter;
     component;
-    constructor(host, resolver) {
+    constructor(host) {
         this.host = host;
-        this.resolver = resolver;
     }
     ngOnInit() {
-        this.component = this.host.createComponent(this.resolver.resolveComponentFactory(this.componentType()));
+        this.component = this.host.createComponent(this.componentType());
         this.initComponent({
             column: this.column,
             filter: this.filter
@@ -7637,7 +7680,7 @@ class FilterHostDirective {
         instance.column = column;
         instance.filter = filter;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterHostDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterHostDirective, selector: "[kendoGridFilterHostBase]", inputs: { column: "column", filter: "filter" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterHostDirective, decorators: [{
@@ -7645,7 +7688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     selector: '[kendoGridFilterHostBase]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -9520,8 +9563,8 @@ const filterMenuComponentFactory = (type) => ({
 class FilterMenuHostDirective extends FilterHostDirective {
     filterService;
     menuTabbingService;
-    constructor(host, resolver) {
-        super(host, resolver);
+    constructor(host) {
+        super(host);
     }
     componentType() {
         if (isPresent(this.column) && !isNullOrEmptyString(this.column.filter)) {
@@ -9534,7 +9577,7 @@ class FilterMenuHostDirective extends FilterHostDirective {
         this.component.instance.filterService = this.filterService;
         this.component.instance.menuTabbingService = this.menuTabbingService;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuHostDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuHostDirective, isStandalone: true, selector: "[kendoFilterMenuHost]", inputs: { filterService: "filterService", menuTabbingService: "menuTabbingService" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuHostDirective, decorators: [{
@@ -9543,7 +9586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoFilterMenuHost]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { filterService: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { filterService: [{
                 type: Input
             }], menuTabbingService: [{
                 type: Input
@@ -10641,8 +10684,8 @@ const filterComponentFactory = (type) => ({
  * @hidden
  */
 class FilterCellHostDirective extends FilterHostDirective {
-    constructor(host, resolver) {
-        super(host, resolver);
+    constructor(host) {
+        super(host);
     }
     componentType() {
         if (!isNullOrEmptyString(this.column.filter)) {
@@ -10650,7 +10693,7 @@ class FilterCellHostDirective extends FilterHostDirective {
         }
         return StringFilterCellComponent;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellHostDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterCellHostDirective, isStandalone: true, selector: "[kendoFilterCellHost]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellHostDirective, decorators: [{
@@ -10659,7 +10702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoFilterCellHost]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
 
 /**
  * @hidden
@@ -11102,6 +11145,17 @@ class ColumnListComponent {
         if (e.keyCode !== Keys.Tab) {
             e.preventDefault();
         }
+        if (e.key === 'Tab' && !e.shiftKey && this.autoSync) {
+            e.preventDefault();
+        }
+        if (e.key === 'Tab' && e.shiftKey) {
+            this.ngZone.run(() => {
+                if (e.target.matches('.k-column-list-item')) {
+                    e.preventDefault();
+                    this.resetButton?.nativeElement.focus();
+                }
+            });
+        }
         if (e.keyCode === Keys.ArrowDown) {
             this.listNavigationService.next();
         }
@@ -11116,19 +11170,23 @@ class ColumnListComponent {
         if (this.allowHideAll && !this.hasLocked) {
             return;
         }
-        const checkedItems = [];
+        // Cache visible columns to avoid repeated checks
+        const visibleColumns = [];
+        const columnMap = new Map();
         this.checkboxes.forEach((checkbox, index) => {
+            // Reset all disabled states first
+            this.setDisabledState(checkbox, false);
             if (checkbox.checkedState) {
-                checkedItems.push({ checkbox, index });
+                visibleColumns.push({ checkbox, index });
+                columnMap.set(index, this.columns[index]);
             }
-            this.setDisabledState(checkbox, false);
         });
-        if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
-            this.setDisabledState(checkedItems[0].checkbox, true);
+        // Only apply disabled states where needed
+        if (!this.allowHideAll && visibleColumns.length === 1 && !this.hasFiltered) {
+            this.setDisabledState(visibleColumns[0].checkbox, true);
         }
         else if (this.hasLocked && !this.hasUnlockedFiltered) {
-            const columns = this.columns;
-            const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
+            const checkedUnlocked = visibleColumns.filter(item => !columnMap.get(item.index).locked);
             if (checkedUnlocked.length === 1) {
                 this.setDisabledState(checkedUnlocked[0].checkbox, true);
             }
@@ -11149,34 +11207,32 @@ class ColumnListComponent {
         }
     }
     setDisabledState(checkbox, disabled) {
-        this.ngZone.run(() => checkbox.disabled = disabled);
-        const checkboxElement = checkbox.hostElement.nativeElement;
-        const parentElement = checkboxElement.parentElement;
-        const classCommand = disabled ? 'addClass' : 'removeClass';
-        const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
-        this.renderer[classCommand](parentElement, 'k-disabled');
-        this.renderer[attributeCommand](parentElement, 'aria-disabled', disabled ? 'true' : undefined);
+        if (checkbox.disabled !== disabled) {
+            this.ngZone.runOutsideAngular(() => {
+                checkbox.disabled = disabled;
+                const checkboxElement = checkbox.hostElement.nativeElement;
+                const parentElement = checkboxElement.parentElement;
+                if (disabled) {
+                    this.renderer.addClass(parentElement, 'k-disabled');
+                    this.renderer.setAttribute(parentElement, 'aria-disabled', 'true');
+                }
+                else {
+                    this.renderer.removeClass(parentElement, 'k-disabled');
+                    this.renderer.removeAttribute(parentElement, 'aria-disabled');
+                }
+            });
+        }
     }
     handleCheckBoxClick = (e) => {
         const closestItem = e.target.closest('.k-column-list-item');
         if (closestItem) {
             const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
-            const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
             const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
-            if (index !== this.listNavigationService.activeIndex) {
-                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
-                this.listNavigationService.activeIndex = index;
-                this.listNavigationService.toggle(index, true);
-            }
-            if (checkboxElement.contains(e.target)) {
-                const checkboxInputElement = checkboxElement.firstElementChild;
-                checkboxInputElement.blur();
-                checkboxInputElement.classList.remove('k-focus');
-            }
-            else {
-                this.listNavigationService.toggleCheckedState();
+            const checkbox = this.checkboxes.toArray()[index];
+            if (e.target === checkbox.input.nativeElement) {
+                closestItem.focus();
+                e.target.classList.remove('k-focus');
             }
-            closestItem.focus();
             if (this.autoSync) {
                 if (!this.columns[index]) {
                     return;
@@ -11184,14 +11240,21 @@ class ColumnListComponent {
                 const column = this.columns[index];
                 const hidden = !checkbox.checkedState;
                 if (Boolean(column.hidden) !== hidden) {
-                    this.ngZone.run(() => {
+                    this.ngZone.runOutsideAngular(() => {
                         column.hidden = hidden;
-                        this.columnChange.emit([column]);
+                        this.ngZone.run(() => {
+                            this.columnChange.emit([column]);
+                        });
                     });
                 }
             }
             else {
-                this.updateDisabled();
+                this.ngZone.run(() => this.updateDisabled());
+            }
+            if (index !== this.listNavigationService.activeIndex) {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                this.listNavigationService.activeIndex = index;
+                this.listNavigationService.toggle(index, true);
             }
         }
     };
@@ -11209,9 +11272,9 @@ class ColumnListComponent {
                 role="option">
                 <kendo-checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
+                    [tabindex]="-1"
                     [checkedState]="!column.hidden"
                     [disabled]="isDisabled(column)"
-                    [tabindex]="-1"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
@@ -11253,9 +11316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 role="option">
                 <kendo-checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
+                    [tabindex]="-1"
                     [checkedState]="!column.hidden"
                     [disabled]="isDisabled(column)"
-                    [tabindex]="-1"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
@@ -11440,15 +11503,6 @@ class ColumnChooserComponent {
         this.changeDetector.markForCheck();
         this.columnInfoService.changeVisibility(changed);
     }
-    /**
-     * @hidden
-     */
-    onShiftTab(e) {
-        if (e.target.matches('.k-column-list-item')) {
-            e.preventDefault();
-            this.columnList.resetButton.nativeElement.focus();
-        }
-    }
     close(focusAnchor = false) {
         if (this.popupRef) {
             this.popupRef.close();
@@ -11490,8 +11544,7 @@ class ColumnChooserComponent {
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)"
-                (keydown.shift.tab)="onShiftTab($event)">
+                (columnChange)="onChange($event)">
             </kendo-grid-columnlist>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
@@ -11524,8 +11577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)"
-                (keydown.shift.tab)="onShiftTab($event)">
+                (columnChange)="onChange($event)">
             </kendo-grid-columnlist>
         </ng-template>
     `,
@@ -11697,13 +11749,12 @@ class ColumnMenuItemComponent {
      */
     collapse = new EventEmitter();
     /**
-     * Specifies the name of the [font icon](slug:icons#icons-list)
-     * that will be rendered for the item.
+     * Specifies the name of the [font icon](slug:icon_list)
+     * that will be rendered within the item.
      */
     icon;
     /**
-     * Specifies the name of the [SVG icon]({% slug svgicon_list %})
-     * that will be rendered for the item.
+     * Defines the [SVG icon](slug:svgicon_list) to be rendered within the item.
      */
     svgIcon;
     /**
@@ -15458,7 +15509,8 @@ class SelectionService {
                 ev = this.toggle(item);
             }
             else if (event.shiftKey) {
-                ev = this.addAllTo(item, ctrlKey);
+                const preserveCurrentSelection = isMultipleRangesEnabled(this.settings);
+                ev = this.addAllTo(item, ctrlKey, preserveCurrentSelection);
             }
         }
         if (!isPresent(ev)) {
@@ -15565,7 +15617,7 @@ class SelectionService {
             item = iterator.next();
         }
     }
-    addAllTo(item, ctrlKey) {
+    addAllTo(item, ctrlKey, preserveSelection = false) {
         const selectedRows = [];
         const deselectedRows = [];
         const start = Math.min(this.lastSelectionStartIndex, item.index);
@@ -15576,7 +15628,7 @@ class SelectionService {
             if (next.value && next.value.type === "data") {
                 const idx = next.value.index;
                 const rowArgs = { dataItem: next.value.data, index: idx };
-                if ((idx < start || idx > end) && this.isSelected(idx) && !ctrlKey) {
+                if ((idx < start || idx > end) && this.isSelected(idx) && !ctrlKey && !preserveSelection) {
                     deselectedRows.push(rowArgs);
                 }
                 if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
@@ -15633,7 +15685,7 @@ class SelectionService {
         }
         this.changes.emit(ev);
     }
-    selectRange(startIndex, endIndex) {
+    selectRange(startIndex, endIndex, preserveSelection, existingSelections = []) {
         const selectedRows = [];
         const deselectedRows = [];
         const start = Math.min(startIndex, endIndex);
@@ -15645,7 +15697,10 @@ class SelectionService {
                 const idx = next.value.index;
                 const rowArgs = { dataItem: next.value.data, index: idx };
                 if ((idx < start || idx > end) && this.isSelected(idx)) {
-                    deselectedRows.push(rowArgs);
+                    const deselectRow = !(preserveSelection || existingSelections.find((value) => value && value.dataItem === rowArgs.dataItem && value.index === rowArgs.index));
+                    if (deselectRow) {
+                        deselectedRows.push(rowArgs);
+                    }
                 }
                 if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
                     selectedRows.push(rowArgs);
@@ -15870,7 +15925,12 @@ class CellSelectionService {
                 const startColIndex = Math.min(this.lastSelectionItemColIndex, item.column.leafIndex);
                 const endRowIndex = Math.max(this.lastSelectionItemRowIndex, item.index);
                 const endColIndex = Math.max(this.lastSelectionItemColIndex, item.column.leafIndex);
-                ev = this.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex);
+                const preserveCurrentSelection = isMultipleRangesEnabled(this.settings);
+                ev = this.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex, preserveCurrentSelection);
+                if (preserveCurrentSelection) {
+                    this.lastSelectionItemRowIndex = item.index;
+                    this.lastSelectionItemColIndex = item.column.leafIndex;
+                }
             }
         }
         if (!isPresent(ev)) {
@@ -15961,7 +16021,7 @@ class CellSelectionService {
             }
         }
     }
-    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex) {
+    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex, preserveSelection = false, existingSelections = []) {
         const selectedCells = [];
         const deselectedCells = [];
         const selectionStartRow = Math.min(startRowIndex, endRowIndex);
@@ -15985,7 +16045,10 @@ class CellSelectionService {
                     const isInColRange = selectionStartCol <= col.leafIndex && col.leafIndex <= selectionEndCol;
                     const isInSelectionRect = isInRowRange && isInColRange;
                     if (!isInSelectionRect && selected) {
-                        deselectedCells.push(item);
+                        const deselectCell = !(preserveSelection || existingSelections.find((value) => value && value.itemKey === item.itemKey && value.columnKey === item.columnKey));
+                        if (deselectCell) {
+                            deselectedCells.push(item);
+                        }
                     }
                     if (isInSelectionRect && !selected && !this.nonSelectableRows.has(idx)) {
                         selectedCells.push(item);
@@ -16203,7 +16266,7 @@ class SelectAllCheckboxDirective {
                 return undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i4$1.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
@@ -16212,7 +16275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.CheckBoxComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i4$1.CheckBoxComponent, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -17171,6 +17234,7 @@ class FooterComponent {
     lockedColumnsCount = 0;
     logicalRowIndex = 0;
     totalColumns;
+    totalColumnsCount = 0;
     get footerClass() {
         return !this.scrollable;
     }
@@ -17182,6 +17246,10 @@ class FooterComponent {
     get columnsToRender() {
         return columnsToRender(this.columns || []);
     }
+    // Number of unlocked columns in the next table, if any
+    get unlockedColumnsCount() {
+        return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
+    }
     trackByIndex(index) {
         return index;
     }
@@ -17200,15 +17268,15 @@ class FooterComponent {
         return isColumnGroupComponent(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [{ token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
     <ng-container>
         <tr
-            [class.k-footer-template]="true"
+            class="k-footer-template"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
                 [totalColumns]="totalColumns"
             >
             <td
@@ -17253,12 +17321,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
     <ng-container>
         <tr
-            [class.k-footer-template]="true"
+            class="k-footer-template"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
                 [totalColumns]="totalColumns"
             >
             <td
@@ -17312,6 +17380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], totalColumns: [{
                 type: Input
+            }], totalColumnsCount: [{
+                type: Input
             }], footerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-footer']
@@ -17583,7 +17653,7 @@ class SelectionCheckboxDirective {
             this.renderer.setProperty(this.el.nativeElement, 'checked', isSelected);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i4$1.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
@@ -17592,7 +17662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectionCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.CheckBoxComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i4$1.CheckBoxComponent, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -18177,7 +18247,7 @@ class TableBodyComponent {
             }
         });
         const contentColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumnsCount;
-        const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - (this.allColumns || this.columns).length;
+        const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumns.length;
         return item && this.isDataItem(item) ? contentColumnsCount : headerFooterColumnsCount;
     }
     shouldSkipCell(rowIndex, colIndex) {
@@ -19761,8 +19831,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1743598444,
-    version: '18.4.1-develop.2',
+    publishDate: 1744092477,
+    version: '18.5.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -21373,13 +21443,17 @@ class GridMarqueeDirective {
     }
     endSelection(args) {
         if (args.type === 'mouseup' || args.type === 'touchend') {
+            const modifier = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
+            const preserveCurrentSelection = modifier &&
+                (isMultipleRangesEnabled(this.selection.settings) ||
+                    isMultipleRangesEnabled(this.cellSelection.settings));
             if (this.cellSelection.active) {
                 this.cellSelection.dragging = true;
-                this.cellSelection.changes.emit(this.cellSelection.selectRange(this.pressTarget.rowIndex, this.pressTarget.column.leafIndex, args.rowIndex, args.column.leafIndex));
+                this.cellSelection.changes.emit(this.cellSelection.selectRange(this.pressTarget.rowIndex, this.pressTarget.column.leafIndex, args.rowIndex, args.column.leafIndex, preserveCurrentSelection));
             }
             else if (this.selection.active) {
                 this.selection.dragging = true;
-                this.selection.changes.emit(this.selection.selectRange(this.pressTarget.rowIndex, args.rowIndex));
+                this.selection.changes.emit(this.selection.selectRange(this.pressTarget.rowIndex, args.rowIndex, preserveCurrentSelection));
             }
         }
         this.clean();
@@ -23252,8 +23326,53 @@ class GridMessages extends ComponentMessages {
      * The text for the Group pane Chip Menu Move as next item.
      */
     groupChipMenuNext;
+    /**
+     * The default text of a form validation error when using the built-in external editing.
+     * <br/><br/>
+     * The text consists of a three-part message&mdash;the name of the data item property the respective Grid column is bound to,
+     * the name of the error, coming from the respective `FormControl` object, and a localizable string.
+     * <br/><br/>
+     * For a field named `ProductName`, and an error named `required`, the default error text will be `ProductName has required validation error`.
+     * <br/><br/>
+     * To customize the default text of the form validation error, use the `{errorName}` and `{fieldName}` placeholders and a custom localizable string.
+     * For example, `{errorName} detected for {fieldName} field`.
+     * <br/><br/>
+     * The `{errorName}` and `{fieldName}` placeholders will be replaced internally with the field and error names for the respective invalid form control,
+     * and the resulting error message will be rendered as `required error detected for ProductName field`.
+     * [See example](slug:globalization_grid#toc-custom-messages).
+     *
+     */
+    formValidationErrorText;
+    /**
+     * The title of the remove item confirmation Dialog.
+     */
+    removeConfirmationDialogTitle;
+    /**
+     * The content of the remove item confirmation Dialog.
+     */
+    removeConfirmationDialogContent;
+    /**
+     * The text of the confirm action button in the remove confirmation Dialog.
+     */
+    removeConfirmationDialogConfirmText;
+    /**
+     * The text of the reject action button in the remove confirmation Dialog.
+     */
+    removeConfirmationDialogRejectText;
+    /**
+     * The title of the external editing Dialog.
+     */
+    externalEditingTitle;
+    /**
+     * The text of the external editing Dialog <b>Save</b> button.
+     */
+    externalEditingSaveText;
+    /**
+     * The text of the external editing Dialog <b>Cancel</b> button.
+     */
+    externalEditingCancelText;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.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", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", 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", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.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", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", 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", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
@@ -23429,6 +23548,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], groupChipMenuNext: [{
                 type: Input
+            }], formValidationErrorText: [{
+                type: Input
+            }], removeConfirmationDialogTitle: [{
+                type: Input
+            }], removeConfirmationDialogContent: [{
+                type: Input
+            }], removeConfirmationDialogConfirmText: [{
+                type: Input
+            }], removeConfirmationDialogRejectText: [{
+                type: Input
+            }], externalEditingTitle: [{
+                type: Input
+            }], externalEditingSaveText: [{
+                type: Input
+            }], externalEditingCancelText: [{
+                type: Input
             }] } });
 
 /**
@@ -24201,9 +24336,6 @@ class GridComponent {
     columnList;
     selectionDirective = false;
     ariaRootId = `k-${guid()}`;
-    /**
-     * @hidden
-     */
     showLicenseWatermark = false;
     columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
         if (!isUniversal()) {
@@ -25002,9 +25134,6 @@ class GridComponent {
     updateNavigationMetadata() {
         this.navigationService.metadata = this.navigationMetadata();
     }
-    /**
-     * @hidden
-     */
     reorder({ target, source, before, changeContainer }) {
         this.ngZone.run(() => {
             const columnsForLevel = sortColumns(this.allColumnsForLevel(source.level));
@@ -25330,6 +25459,11 @@ class GridComponent {
             const keydownSubscription = this.renderer.listen(wrapper, 'keydown', (args) => {
                 this.domEvents.keydown.emit(args);
             });
+            const shiftKeyupSubscription = this.renderer.listen(wrapper, 'keyup', (args) => {
+                if (args.key === 'Shift') {
+                    this.domEvents.shiftKeyup.emit(args);
+                }
+            });
             // focusIn and focusOut are relative to the element with ARIA role "grid"
             let focused = false;
             const focusInSubscription = this.renderer.listen(ariaRoot, 'focusin', (args) => {
@@ -25344,6 +25478,7 @@ class GridComponent {
                 const outside = !closest(next, (node) => node === ariaRoot);
                 if (outside) {
                     this.domEvents.focusOut.emit(args);
+                    this.domEvents.shiftKeyup.emit(args);
                     focused = false;
                 }
             });
@@ -25354,6 +25489,7 @@ class GridComponent {
                 windowBlurSubscription();
                 clickSubscription();
                 keydownSubscription();
+                shiftKeyupSubscription();
                 focusInSubscription();
                 focusOutSubscription();
             };
@@ -25836,6 +25972,30 @@ class GridComponent {
 
             i18n-groupChipMenuNext="kendo.grid.groupChipMenuNext|The text for the Group pane Chip Menu Move as next item"
             groupChipMenuNext="Move as next"
+
+            i18n-formValidationErrorText="kendo.grid.formValidationErrorText|The default text of a form validation error when using external editing."
+            formValidationErrorText="{{ 'The {fieldName} field has {errorName} validation error' }}"
+
+            i18n-removeConfirmationDialogTitle="kendo.grid.removeConfirmationDialogTitle|The title of the built-in remove item confirmation Dialog"
+            removeConfirmationDialogTitle="Please confirm"
+
+            i18n-removeConfirmationDialogContent="kendo.grid.removeConfirmationDialogContent|The content of the built-in remove item confirmation Dialog"
+            removeConfirmationDialogContent="Are you sure you want to delete this item?"
+
+            i18n-removeConfirmationDialogConfirmText="kendo.grid.removeConfirmationDialogConfirmText|The text of the built-in remove item confirmation Dialog confirm action button"
+            removeConfirmationDialogConfirmText="Yes"
+
+            i18n-removeConfirmationDialogRejectText="kendo.grid.removeConfirmationDialogRejectText|The text of the built-in remove item confirmation Dialog reject action button"
+            removeConfirmationDialogRejectText="No"
+
+            i18n-externalEditingTitle="kendo.grid.externalEditingTitle|The title of the built-in external editing form container"
+            externalEditingTitle="Edit"
+
+            i18n-externalEditingSaveText="kendo.grid.externalEditingSaveText|The text of the external editing form Save button"
+            externalEditingSaveText="Save"
+
+            i18n-externalEditingCancelText="kendo.grid.externalEditingCancelText|The text of the external editing form Cancel button"
+            externalEditingCancelText="Cancel"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -26064,7 +26224,8 @@ class GridComponent {
                                 [columns]="$any(lockedLeafColumns)"
                                 [detailTemplate]="detailTemplate"
                                 [logicalRowIndex]="ariaRowCount"
-                                [totalColumns]="columnsContainer">
+                                [totalColumns]="columnsContainer"
+                                [totalColumnsCount]="leafColumns.length">
                             </tfoot>
                         </table>
                     </div>
@@ -26091,7 +26252,8 @@ class GridComponent {
                                 [columns]="$any(headerColumns)"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
                                 [detailTemplate]="detailTemplate"
-                                [totalColumns]="columnsContainer">
+                                [totalColumns]="columnsContainer"
+                                [totalColumnsCount]="leafColumns.length">
                             </tfoot>
                         </table>
                     </div>
@@ -26112,6 +26274,8 @@ class GridComponent {
                     </colgroup>
                     <thead kendoGridHeader
                         *ngIf="!hideHeader"
+                        class="k-grid-header"
+                        [class.k-grid-draggable-header]="groupable || reorderable"
                         role="rowgroup"
                         [resizable]="resizable"
                         [scrollable]="false"
@@ -26154,7 +26318,8 @@ class GridComponent {
                         [groups]="group"
                         [columns]="$any(leafColumns)"
                         [detailTemplate]="detailTemplate"
-                        [totalColumns]="columnsContainer">
+                        [totalColumns]="columnsContainer"
+                        [totalColumnsCount]="leafColumns.length">
                     </tfoot>
                 </table>
             </ng-container>
@@ -26237,8 +26402,10 @@ class GridComponent {
             <kendo-pager-info *ngIf="normalizedPageableSettings.info">
             </kendo-pager-info>
         </ng-template>
+        <div kendoDialogContainer></div>
+        
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i44.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i44.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i44.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: i44.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i44.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i44.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: i44.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i44.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i44.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i44.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i44.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i44.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: i44.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i44.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i44.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: i44.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i44.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i44.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DialogContainerDirective, selector: "[kendoDialogContainer]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -26547,6 +26714,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-groupChipMenuNext="kendo.grid.groupChipMenuNext|The text for the Group pane Chip Menu Move as next item"
             groupChipMenuNext="Move as next"
+
+            i18n-formValidationErrorText="kendo.grid.formValidationErrorText|The default text of a form validation error when using external editing."
+            formValidationErrorText="{{ 'The {fieldName} field has {errorName} validation error' }}"
+
+            i18n-removeConfirmationDialogTitle="kendo.grid.removeConfirmationDialogTitle|The title of the built-in remove item confirmation Dialog"
+            removeConfirmationDialogTitle="Please confirm"
+
+            i18n-removeConfirmationDialogContent="kendo.grid.removeConfirmationDialogContent|The content of the built-in remove item confirmation Dialog"
+            removeConfirmationDialogContent="Are you sure you want to delete this item?"
+
+            i18n-removeConfirmationDialogConfirmText="kendo.grid.removeConfirmationDialogConfirmText|The text of the built-in remove item confirmation Dialog confirm action button"
+            removeConfirmationDialogConfirmText="Yes"
+
+            i18n-removeConfirmationDialogRejectText="kendo.grid.removeConfirmationDialogRejectText|The text of the built-in remove item confirmation Dialog reject action button"
+            removeConfirmationDialogRejectText="No"
+
+            i18n-externalEditingTitle="kendo.grid.externalEditingTitle|The title of the built-in external editing form container"
+            externalEditingTitle="Edit"
+
+            i18n-externalEditingSaveText="kendo.grid.externalEditingSaveText|The text of the external editing form Save button"
+            externalEditingSaveText="Save"
+
+            i18n-externalEditingCancelText="kendo.grid.externalEditingCancelText|The text of the external editing form Cancel button"
+            externalEditingCancelText="Cancel"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -26775,7 +26966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [columns]="$any(lockedLeafColumns)"
                                 [detailTemplate]="detailTemplate"
                                 [logicalRowIndex]="ariaRowCount"
-                                [totalColumns]="columnsContainer">
+                                [totalColumns]="columnsContainer"
+                                [totalColumnsCount]="leafColumns.length">
                             </tfoot>
                         </table>
                     </div>
@@ -26802,7 +26994,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [columns]="$any(headerColumns)"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
                                 [detailTemplate]="detailTemplate"
-                                [totalColumns]="columnsContainer">
+                                [totalColumns]="columnsContainer"
+                                [totalColumnsCount]="leafColumns.length">
                             </tfoot>
                         </table>
                     </div>
@@ -26823,6 +27016,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </colgroup>
                     <thead kendoGridHeader
                         *ngIf="!hideHeader"
+                        class="k-grid-header"
+                        [class.k-grid-draggable-header]="groupable || reorderable"
                         role="rowgroup"
                         [resizable]="resizable"
                         [scrollable]="false"
@@ -26865,7 +27060,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [groups]="group"
                         [columns]="$any(leafColumns)"
                         [detailTemplate]="detailTemplate"
-                        [totalColumns]="columnsContainer">
+                        [totalColumns]="columnsContainer"
+                        [totalColumnsCount]="leafColumns.length">
                     </tfoot>
                 </table>
             </ng-container>
@@ -26948,6 +27144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-pager-info *ngIf="normalizedPageableSettings.info">
             </kendo-pager-info>
         </ng-template>
+        <div kendoDialogContainer></div>
+        
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `,
                     standalone: true,
@@ -26956,7 +27154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TableDirective, GridTableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective,
                         ListComponent, DragTargetContainerDirective, DropTargetContainerDirective, DraggableDirective,
                         GridMarqueeDirective, FooterComponent, TableBodyComponent, LoadingComponent, StatusBarComponent,
-                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet
+                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet, DialogContainerDirective
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: i1$2.LocalizationService }, { type: ContextService }, { type: SizingOptionsService }, { type: RowReorderService }]; }, propDecorators: { data: [{
@@ -27505,10 +27703,32 @@ class EditingDirectiveBase {
     get editService() {
         return this.userEditService || this.defaultEditService;
     }
+    removeConfirmationSubject = new Subject();
+    dialogService;
+    localization;
+    defaultRemoveConfirmation = (_item) => {
+        const dialog = this.dialogService.open({
+            title: this.localization.get('removeConfirmationDialogTitle'),
+            content: this.localization.get('removeConfirmationDialogContent'),
+            actions: [{
+                    text: this.localization.get('removeConfirmationDialogConfirmText'),
+                    themeColor: 'primary',
+                    svgIcon: checkIcon,
+                    icon: 'check'
+                }, {
+                    text: this.localization.get('removeConfirmationDialogRejectText'),
+                    svgIcon: xIcon,
+                    icon: 'x'
+                }],
+        });
+        dialog.result.pipe(take(1)).subscribe((e) => this.removeConfirmationSubject.next(e.text === this.localization.get('removeConfirmationDialogConfirmText')));
+        return this.removeConfirmationSubject;
+    };
     /**
      * A function that is called to confirm if the `dataItem` will be removed.
+     * Setting to `true` will result in displaying a default confirmation dialog.
      */
-    removeConfirmation;
+    removeConfirmation = false;
     subscriptions = new Subscription();
     defaultEditService;
     userEditService;
@@ -27516,6 +27736,8 @@ class EditingDirectiveBase {
         this.grid = grid;
         this.localDataChangesService = localDataChangesService;
         this.defaultEditService = this.createDefaultService();
+        this.dialogService = inject(DialogService);
+        this.localization = inject(LocalizationService);
     }
     /**
      * @hidden
@@ -27536,7 +27758,7 @@ class EditingDirectiveBase {
     createDefaultService() {
         return new LocalEditService(this.grid, this.localDataChangesService);
     }
-    addHandler() {
+    addHandler(_args) {
         this.grid.addRow(this.createModel({ isNew: true }));
     }
     saveHandler(args) {
@@ -27561,7 +27783,8 @@ class EditingDirectiveBase {
             }
         };
         if (this.removeConfirmation) {
-            const result = this.removeConfirmation(dataItem);
+            const confirmationCallback = typeof this.removeConfirmation === 'boolean' ? this.defaultRemoveConfirmation : this.removeConfirmation;
+            const result = confirmationCallback(dataItem);
             if (result instanceof Promise) {
                 result.then(removeItem);
             }
@@ -27842,6 +28065,495 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['kendoGridInCellEditing']
             }] } });
 
+/**
+ * @hidden
+ */
+class FormFormFieldComponent {
+    localization;
+    cdr;
+    control;
+    floatingLabel;
+    showError;
+    input;
+    constructor(localization, cdr) {
+        this.localization = localization;
+        this.cdr = cdr;
+    }
+    // required to avoid ExpressionChangedAfterItHasBeenCheckedError caused by
+    // binding to the label's 'for' attribute dynamically
+    ngAfterContentInit() {
+        this.cdr.detectChanges();
+    }
+    messageFor(key, errorName, field) {
+        return replaceMessagePlaceholder(replaceMessagePlaceholder(this.localization.get(key), 'fieldName', field), 'errorName', errorName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFormFieldComponent, deps: [{ token: i1$2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFormFieldComponent, isStandalone: true, selector: "kendo-form-formfield", inputs: { control: "control", floatingLabel: "floatingLabel", showError: "showError" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: `
+        <kendo-formfield
+            [orientation]="control.orientation">
+            <kendo-floatinglabel
+                *ngIf="control.label && floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label">
+                <kendo-textbox
+                    *ngIf="$any(control.dataType) === 'text'" 
+                    [formControl]="control.formControl"></kendo-textbox>
+                <kendo-numerictextbox
+                    *ngIf="$any(control.dataType) === 'numeric'" 
+                    [formControl]="control.formControl"></kendo-numerictextbox>
+                <kendo-datepicker
+                    *ngIf="$any(control.dataType) === 'date'" 
+                    [formControl]="control.formControl"></kendo-datepicker>
+            </kendo-floatinglabel>
+            <kendo-label [style.align-items]="'start'"
+                *ngIf="control.label && !floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label"
+                [for]="input">
+            </kendo-label>
+            <kendo-textbox #input
+                *ngIf="!floatingLabel && (control.dataType) === 'text'" 
+                [formControl]="control.formControl"></kendo-textbox>
+            <kendo-numerictextbox #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'numeric'" 
+                [formControl]="control.formControl"></kendo-numerictextbox>
+            <kendo-datepicker #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'date'" 
+                [formControl]="control.formControl"></kendo-datepicker>
+            <div
+                *ngIf="control.label && $any(control.dataType) === 'boolean'"
+                class="k-form-field-checkbox-wrap">
+                <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+                <kendo-label
+                    *ngIf="control.label"
+                    class="k-checkbox-label"
+                    [for]="cb"
+                    [text]="control.label">
+                </kendo-label>
+            </div>
+            
+            <kendo-formhint *ngIf="control?.hint">{{control.hint}}</kendo-formhint>
+            <ng-container *ngIf="showError && control.formControl?.invalid && control.formControl.touched">
+                <kendo-formerror *ngFor="let err of control?.formControl?.errors | keyvalue">{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
+            </ng-container>
+        </kendo-formfield>
+    `, isInline: true, dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i3.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { kind: "component", type: i4$1.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: i4$1.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4$1.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i4$1.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: "component", type: i4$1.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5$1.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-form-formfield',
+                    standalone: true,
+                    imports: [KeyValuePipe, NgFor, NgIf, ReactiveFormsModule,
+                        KENDO_LABELS, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_BUTTON, KENDO_CHECKBOX, KENDO_DATEPICKER],
+                    template: `
+        <kendo-formfield
+            [orientation]="control.orientation">
+            <kendo-floatinglabel
+                *ngIf="control.label && floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label">
+                <kendo-textbox
+                    *ngIf="$any(control.dataType) === 'text'" 
+                    [formControl]="control.formControl"></kendo-textbox>
+                <kendo-numerictextbox
+                    *ngIf="$any(control.dataType) === 'numeric'" 
+                    [formControl]="control.formControl"></kendo-numerictextbox>
+                <kendo-datepicker
+                    *ngIf="$any(control.dataType) === 'date'" 
+                    [formControl]="control.formControl"></kendo-datepicker>
+            </kendo-floatinglabel>
+            <kendo-label [style.align-items]="'start'"
+                *ngIf="control.label && !floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label"
+                [for]="input">
+            </kendo-label>
+            <kendo-textbox #input
+                *ngIf="!floatingLabel && (control.dataType) === 'text'" 
+                [formControl]="control.formControl"></kendo-textbox>
+            <kendo-numerictextbox #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'numeric'" 
+                [formControl]="control.formControl"></kendo-numerictextbox>
+            <kendo-datepicker #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'date'" 
+                [formControl]="control.formControl"></kendo-datepicker>
+            <div
+                *ngIf="control.label && $any(control.dataType) === 'boolean'"
+                class="k-form-field-checkbox-wrap">
+                <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+                <kendo-label
+                    *ngIf="control.label"
+                    class="k-checkbox-label"
+                    [for]="cb"
+                    [text]="control.label">
+                </kendo-label>
+            </div>
+            
+            <kendo-formhint *ngIf="control?.hint">{{control.hint}}</kendo-formhint>
+            <ng-container *ngIf="showError && control.formControl?.invalid && control.formControl.touched">
+                <kendo-formerror *ngFor="let err of control?.formControl?.errors | keyvalue">{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
+            </ng-container>
+        </kendo-formfield>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { control: [{
+                type: Input
+            }], floatingLabel: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+
+let idx = 0;
+/**
+ * @hidden
+ */
+class FormComponent {
+    controls = [];
+    set formSettings(value) {
+        this._formSettings = { ...this._formSettings, ...value };
+    }
+    get formSettings() {
+        return this._formSettings;
+    }
+    formGroup;
+    set actionButtons(value) {
+        if (typeof value === 'boolean') {
+            this.normalizeActionButtonSettings(value);
+        }
+        else {
+            this._actionButtons = value;
+        }
+    }
+    get actionButtons() {
+        return this._actionButtons;
+    }
+    formSubmit = new EventEmitter();
+    get componentIndex() {
+        return idx++;
+    }
+    _formSettings = {
+        orientation: 'vertical',
+        showErrors: true,
+        floatingLabels: false
+    };
+    defaultActionButtons = [{
+            actionType: 'submit',
+            text: 'Submit',
+            svgIcon: saveIcon,
+            icon: 'save',
+            themeColor: 'primary'
+        }, {
+            actionType: 'reset',
+            svgIcon: cancelIcon,
+            text: 'Reset',
+            icon: 'cancel'
+        }];
+    _actionButtons = this.defaultActionButtons;
+    ngOnInit() {
+        idx++;
+    }
+    normalizeActionButtonSettings(value) {
+        this._actionButtons = value ? this.defaultActionButtons : [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "kendo-grid-external-form", inputs: { controls: "controls", formSettings: "formSettings", formGroup: "formGroup", actionButtons: "actionButtons" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: `
+        <div role="form"
+            class="k-form k-form-md"
+            [class.k-form-horizontal]="formSettings.orientation === 'horizontal'"
+            [formGroup]="formGroup"
+            (ngSubmit)="formSubmit.next({originalEvent: $event, formGroup})"
+            (reset)="$event.preventDefault()">
+            <ng-container  *ngFor="let control of controls; let idx = index;">
+                <ng-container *ngIf="!control.template; else template">
+                    <kendo-form-formfield
+                        [control]="control"
+                        [showError]="formSettings.showErrors"
+                        [floatingLabel]="formSettings.floatingLabels"></kendo-form-formfield>
+                </ng-container>
+                <ng-template #template>
+                    <ng-container
+                        [ngTemplateOutlet]="control.template"
+                        [ngTemplateOutletContext]="control.templateContext"></ng-container>
+                </ng-template>
+            </ng-container>
+            <div class="k-form-buttons" *ngIf="$any(actionButtons).length">
+                <button kendoButton *ngFor="let button of $any(actionButtons)" 
+                    [class.k-form-submit]="button.actionType === 'submit'"
+                    [size]="button.size"
+                    [themeColor]="button.themeColor || button.actionType === 'submit' ? 'primary' : undefined"
+                    [rounded]="button.rounded"
+                    [attr.type]="button.actionType"
+                    [svgIcon]="button.svgIcon"
+                    [icon]="button.icon">
+                    {{button.text}}
+                </button>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFormFieldComponent, selector: "kendo-form-formfield", inputs: ["control", "floatingLabel", "showError"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-external-form',
+                    standalone: true,
+                    template: `
+        <div role="form"
+            class="k-form k-form-md"
+            [class.k-form-horizontal]="formSettings.orientation === 'horizontal'"
+            [formGroup]="formGroup"
+            (ngSubmit)="formSubmit.next({originalEvent: $event, formGroup})"
+            (reset)="$event.preventDefault()">
+            <ng-container  *ngFor="let control of controls; let idx = index;">
+                <ng-container *ngIf="!control.template; else template">
+                    <kendo-form-formfield
+                        [control]="control"
+                        [showError]="formSettings.showErrors"
+                        [floatingLabel]="formSettings.floatingLabels"></kendo-form-formfield>
+                </ng-container>
+                <ng-template #template>
+                    <ng-container
+                        [ngTemplateOutlet]="control.template"
+                        [ngTemplateOutletContext]="control.templateContext"></ng-container>
+                </ng-template>
+            </ng-container>
+            <div class="k-form-buttons" *ngIf="$any(actionButtons).length">
+                <button kendoButton *ngFor="let button of $any(actionButtons)" 
+                    [class.k-form-submit]="button.actionType === 'submit'"
+                    [size]="button.size"
+                    [themeColor]="button.themeColor || button.actionType === 'submit' ? 'primary' : undefined"
+                    [rounded]="button.rounded"
+                    [attr.type]="button.actionType"
+                    [svgIcon]="button.svgIcon"
+                    [icon]="button.icon">
+                    {{button.text}}
+                </button>
+            </div>
+        </div>
+    `,
+                    imports: [NgFor, NgIf, NgTemplateOutlet, ReactiveFormsModule, FormFormFieldComponent, KENDO_BUTTON],
+                }]
+        }], propDecorators: { controls: [{
+                type: Input
+            }], formSettings: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], actionButtons: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class DialogFormComponent extends DialogContentBase {
+    localization;
+    controls;
+    formGroup;
+    formSettings;
+    saveIcon = saveIcon;
+    cancelIcon = cancelIcon;
+    constructor(dialogRef, localization) {
+        super(dialogRef);
+        this.localization = localization;
+    }
+    save() {
+        this.dialog.close({ text: this.localization.get('externalEditingSaveText') });
+    }
+    cancel() {
+        this.dialog.close({ text: this.localization.get('externalEditingCancelText') });
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogFormComponent, deps: [{ token: i1$6.DialogRef }, { token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogFormComponent, isStandalone: true, selector: "kendo-grid-dialog-form", inputs: { controls: "controls", formGroup: "formGroup", formSettings: "formSettings" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-grid-external-form
+            [controls]="controls"
+            [formGroup]="formGroup"
+            [formSettings]="formSettings"
+            [actionButtons]="false"></kendo-grid-external-form>
+        <kendo-dialog-actions [layout]="this.dialog?.dialog?.instance?.actionsLayout">
+            <button
+                kendoButton
+                themeColor="primary"
+                [svgIcon]="saveIcon"
+                [disabled]="!formGroup.valid"
+                (click)="save()"
+            >
+                {{messageFor('externalEditingSaveText')}}
+            </button>
+            <button
+                kendoButton
+                [svgIcon]="cancelIcon"
+                (click)="cancel()">
+                {{messageFor('externalEditingCancelText')}}
+            </button>
+        </kendo-dialog-actions>
+    `, isInline: true, dependencies: [{ kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-dialog-form',
+                    standalone: true,
+                    imports: [FormComponent, DialogActionsComponent, KENDO_BUTTON],
+                    template: `
+        <kendo-grid-external-form
+            [controls]="controls"
+            [formGroup]="formGroup"
+            [formSettings]="formSettings"
+            [actionButtons]="false"></kendo-grid-external-form>
+        <kendo-dialog-actions [layout]="this.dialog?.dialog?.instance?.actionsLayout">
+            <button
+                kendoButton
+                themeColor="primary"
+                [svgIcon]="saveIcon"
+                [disabled]="!formGroup.valid"
+                (click)="save()"
+            >
+                {{messageFor('externalEditingSaveText')}}
+            </button>
+            <button
+                kendoButton
+                [svgIcon]="cancelIcon"
+                (click)="cancel()">
+                {{messageFor('externalEditingCancelText')}}
+            </button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$6.DialogRef }, { type: i1$2.LocalizationService }]; }, propDecorators: { controls: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], formSettings: [{
+                type: Input
+            }] } });
+
+/**
+ * A directive which encapsulates the editing operations of the Grid when using the
+ * External Form ([see example](slug:editing_directives_grid#external-editing)).
+ */
+class ExternalEditingDirective extends EditingDirectiveBase {
+    grid;
+    localDataChangesService;
+    /**
+     * The function that creates the `FormGroup` for the edited model.
+     */
+    createFormGroup;
+    /**
+     * Allows you to customize form orientation, hints, labels and error messages.
+     */
+    formSettings;
+    /**
+     * Allows you to customize the Dialog that contains the edit form.
+     */
+    dialogSettings;
+    constructor(grid, localDataChangesService) {
+        super(grid, localDataChangesService);
+        this.grid = grid;
+        this.localDataChangesService = localDataChangesService;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.subscriptions
+            .add(this.grid.edit.subscribe(this.editHandler.bind(this)));
+    }
+    /**
+     * @hidden
+     * Opens a Dialog that contains the edit form.
+     */
+    openEditFormDialog(editEventArgs, formGroup, formSettings) {
+        const settings = { content: DialogFormComponent, title: this.localization.get('externalEditingTitle'), ...this.dialogSettings };
+        const dialog = this.dialogService.open(settings);
+        const formControls = this.normalizeFormSettings(formGroup, editEventArgs);
+        dialog.content.setInput('controls', formControls);
+        formSettings && dialog.content.setInput('formSettings', formSettings);
+        dialog.content.setInput('formGroup', formGroup);
+        dialog.result.subscribe((r) => {
+            const resultType = r['text'];
+            if (resultType === this.localization.get('externalEditingSaveText')) {
+                this.saveHandler({ ...editEventArgs, formGroup });
+            }
+            dialog.close();
+        });
+    }
+    createModel(args) {
+        return this.createFormGroup(args);
+    }
+    editHandler(args) {
+        const formGroup = this.createModel(args);
+        this.openEditFormDialog(args, formGroup, this.formSettings);
+    }
+    saveModel({ dataItem, formGroup, isNew }) {
+        if (!formGroup.dirty && !isNew) {
+            return;
+        }
+        if (formGroup.valid) {
+            const item = dataItem || [];
+            this.editService.assignValues(item, formGroup.value);
+            return item;
+        }
+        markAllAsTouched(formGroup);
+    }
+    addHandler(args) {
+        const formGroup = this.createModel(args);
+        this.openEditFormDialog(args, formGroup, this.formSettings);
+    }
+    normalizeFormSettings(args, editEventArgs) {
+        const editableColumnFields = this.grid.columns.toArray().filter(c => c.field && c.editable && isPresent$1(args.get(c.field))).map(c => c.field);
+        const settings = editableColumnFields.map(k => {
+            const column = this.grid.columns.toArray().find(c => c.field === k);
+            const title = column.title || k;
+            const template = column.editTemplateRef;
+            const templateContext = template ? {
+                $implicit: args,
+                isNew: editEventArgs.isNew,
+                column,
+                dataItem: editEventArgs.dataItem,
+                formGroup: args,
+                rowIndex: editEventArgs.rowIndex
+            } : null;
+            const customSettings = this.formSettings?.fields?.[k];
+            return {
+                name: k,
+                label: customSettings?.label || title,
+                hint: customSettings?.hint,
+                errors: customSettings?.errors,
+                formControl: args.get(k),
+                dataType: column.editor,
+                orientation: this.formSettings?.orientation || 'vertical',
+                template: template,
+                templateContext: templateContext
+            };
+        });
+        return settings.filter(item => isPresent$1(item));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, deps: [{ token: GridComponent }, { token: LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExternalEditingDirective, isStandalone: true, selector: "[kendoGridExternalEditing]", inputs: { createFormGroup: ["kendoGridExternalEditing", "createFormGroup"], formSettings: "formSettings", dialogSettings: "dialogSettings" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridExternalEditing]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: GridComponent }, { type: LocalDataChangesService }]; }, propDecorators: { createFormGroup: [{
+                type: Input,
+                args: ['kendoGridExternalEditing']
+            }], formSettings: [{
+                type: Input
+            }], dialogSettings: [{
+                type: Input
+            }] } });
+
 /**
  * A directive which controls the expanded state of the master detail rows. ([see example](slug:master_detail_expanded_state_grid#toc-built-in-directive))
  */
@@ -29085,6 +29797,7 @@ const KENDO_GRID_DECLARATIONS = [
     TemplateEditingDirective,
     ReactiveEditingDirective,
     InCellEditingDirective,
+    ExternalEditingDirective,
     ExpandDetailsDirective,
     ExpandGroupDirective,
     GroupBindingDirective,
@@ -29093,7 +29806,10 @@ const KENDO_GRID_DECLARATIONS = [
     GridToolbarFocusableDirective,
     StatusBarComponent,
     StatusBarTemplateDirective,
-    GridClipboardDirective
+    GridClipboardDirective,
+    FormComponent,
+    DialogFormComponent,
+    FormFormFieldComponent
 ];
 /**
  * @hidden
@@ -29113,6 +29829,7 @@ const KENDO_GRID_EXPORTS = [
     TemplateEditingDirective,
     ReactiveEditingDirective,
     InCellEditingDirective,
+    ExternalEditingDirective,
     ExpandDetailsDirective,
     ExpandGroupDirective,
     GridToolbarFocusableDirective,
@@ -29187,7 +29904,7 @@ const KENDO_GRID = [
  */
 class GridModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i44.CustomMessagesComponent, i44.PagerFocusableDirective, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerTemplateDirective, i44.PagerComponent, i44.PagerSpacerComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnMenuChooserItemCheckedDirective, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GroupBindingDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, TableDirective], exports: [GridComponent, ToolbarTemplateDirective, ToolbarComponent, GridSpacerComponent, StatusBarTemplateDirective, DataBindingDirective, SelectionDirective, CustomMessagesComponent, GroupBindingDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridClipboardDirective, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, i44.CustomMessagesComponent, i44.PagerFocusableDirective, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerTemplateDirective, i44.PagerComponent, i44.PagerSpacerComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i44.CustomMessagesComponent, i44.PagerFocusableDirective, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerTemplateDirective, i44.PagerComponent, i44.PagerSpacerComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnMenuChooserItemCheckedDirective, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GroupBindingDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, FormComponent, DialogFormComponent, FormFormFieldComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, TableDirective], exports: [GridComponent, ToolbarTemplateDirective, ToolbarComponent, GridSpacerComponent, StatusBarTemplateDirective, DataBindingDirective, SelectionDirective, CustomMessagesComponent, GroupBindingDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridClipboardDirective, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, i44.CustomMessagesComponent, i44.PagerFocusableDirective, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerTemplateDirective, i44.PagerComponent, i44.PagerSpacerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, providers: [
             PopupService,
             ResizeBatchService,
@@ -29202,7 +29919,7 @@ class GridModule {
             MonthViewService,
             YearViewService,
             NavigationService$1
-        ], imports: [GroupHeaderComponent, GroupPanelComponent, TableBodyComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, i44.CustomMessagesComponent, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerComponent, i44.PagerSpacerComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent] });
+        ], imports: [GroupHeaderComponent, GroupPanelComponent, TableBodyComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, i44.CustomMessagesComponent, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerComponent, i44.PagerSpacerComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, FormComponent, DialogFormComponent, FormFormFieldComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, decorators: [{
             type: NgModule,
@@ -29302,8 +30019,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ExcelModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, imports: [i1$1.IconComponent, i1$1.SVGIconComponent, ExcelComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, i5$1.ColumnComponent, i5$1.ColumnGroupComponent, i5$1.FooterTemplateDirective, i5$1.GroupFooterTemplateDirective, i5$1.GroupHeaderColumnTemplateDirective, i5$1.GroupHeaderTemplateDirective], exports: [ExcelComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, i5$1.ColumnComponent, i5$1.ColumnGroupComponent, i5$1.FooterTemplateDirective, i5$1.GroupFooterTemplateDirective, i5$1.GroupHeaderColumnTemplateDirective, i5$1.GroupHeaderTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, providers: [IconsService], imports: [KENDO_ICONS, ExcelCommandDirective, i5$1.ColumnComponent, i5$1.ColumnGroupComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, imports: [i1$1.IconComponent, i1$1.SVGIconComponent, ExcelComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, i5$2.ColumnComponent, i5$2.ColumnGroupComponent, i5$2.FooterTemplateDirective, i5$2.GroupFooterTemplateDirective, i5$2.GroupHeaderColumnTemplateDirective, i5$2.GroupHeaderTemplateDirective], exports: [ExcelComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, i5$2.ColumnComponent, i5$2.ColumnGroupComponent, i5$2.FooterTemplateDirective, i5$2.GroupFooterTemplateDirective, i5$2.GroupHeaderColumnTemplateDirective, i5$2.GroupHeaderTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, providers: [IconsService], imports: [KENDO_ICONS, ExcelCommandDirective, i5$2.ColumnComponent, i5$2.ColumnGroupComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, decorators: [{
             type: NgModule,
@@ -29318,5 +30035,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
+export { AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };