@progress/kendo-angular-grid 19.0.0-develop.1 → 19.0.0-develop.11

package/esm2022/editing/add-command-tool.directive.mjs

@@ -2,14 +2,16 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive } from '@angular/core';
+import { ChangeDetectorRef, Directive, NgZone } from '@angular/core';
 import { EditService } from './edit.service';
 import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
-import { Subscription } from 'rxjs';
-import { plusIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../common/provider.service';
+import { ToolbarEditingToolBase } from './toolbar-editing-tool-base.directive';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
 import * as i0 from "@angular/core";
 import * as i1 from "./edit.service";
 import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../common/provider.service";
 /**
  * Represents the command for adding a new item to the Grid.
  * You can apply this directive to any `kendo-toolbar-button` element inside a
@@ -28,22 +30,17 @@ import * as i2 from "@progress/kendo-angular-toolbar";
  * </kendo-grid>
  * ```
  */
-export class AddCommandToolbarDirective {
+export class AddCommandToolbarDirective extends ToolbarEditingToolBase {
     editService;
     host;
-    clickSub = new Subscription();
-    constructor(editService, host) {
+    constructor(editService, host, ctx, zone, cdr) {
+        super(host, ToolbarToolName.add, ctx, zone, cdr, editService);
         this.editService = editService;
         this.host = host;
     }
     ngOnInit() {
-        this.clickSub = this.host.click.subscribe(e => this.onClick(e));
+        super.ngOnInit();
         this.host.className = 'k-grid-add-command';
-        this.host.svgIcon = plusIcon;
-        this.host.icon = 'plus';
-    }
-    ngOnDestroy() {
-        this.clickSub.unsubscribe();
     }
     /**
      * @hidden
@@ -52,8 +49,8 @@ export class AddCommandToolbarDirective {
         e.preventDefault();
         this.editService.beginAdd();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandToolbarDirective, deps: [{ token: i1.EditService }, { token: i2.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AddCommandToolbarDirective, isStandalone: true, selector: "[kendoGridAddTool]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandToolbarDirective, deps: [{ token: i1.EditService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AddCommandToolbarDirective, isStandalone: true, selector: "[kendoGridAddTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandToolbarDirective, decorators: [{
             type: Directive,
@@ -61,4 +58,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridAddTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.ToolBarButtonComponent }]; } });
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.ToolBarButtonComponent }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/editing/cancel-command-tool.directive.mjs

@@ -0,0 +1,64 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive, NgZone } from '@angular/core';
+import { EditService } from './edit.service';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SelectionService } from '../selection/selection.service';
+import { ContextService } from '../common/provider.service';
+import { ToolbarEditingToolBase } from './toolbar-editing-tool-base.directive';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
+import * as i0 from "@angular/core";
+import * as i1 from "./edit.service";
+import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../selection/selection.service";
+import * as i4 from "../common/provider.service";
+/**
+ * Represents the `cancel` command in the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * When the user clicks the toolbar button that is associated with the directive, the
+ * [cancel]({% slug api_grid_gridcomponent %}#toc-cancel) event is triggered.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button text="Cancel" kendoGridCancelTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class CancelCommandToolbarDirective extends ToolbarEditingToolBase {
+    editService;
+    constructor(editService, host, selection, ctx, zone, cdr) {
+        super(host, ToolbarToolName.cancel, ctx, zone, cdr, editService, selection);
+        this.editService = editService;
+    }
+    /**
+     * @hidden
+     */
+    onClick(e) {
+        e.preventDefault();
+        if (this.editService.hasNewItem) {
+            this.editService.endEdit();
+        }
+        else if (this.isSelectionPresent && this.editService.isEdited(this.lastSelectionIndex)) {
+            this.editService.endEdit(this.lastSelectionIndex);
+        }
+        else {
+            this.editService.editedIndices.forEach(i => this.editService.endEdit(i.index));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandToolbarDirective, deps: [{ token: i1.EditService }, { token: i2.ToolBarButtonComponent }, { token: i3.SelectionService }, { token: i4.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CancelCommandToolbarDirective, isStandalone: true, selector: "[kendoGridCancelTool]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridCancelTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.ToolBarButtonComponent }, { type: i3.SelectionService }, { type: i4.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/editing/edit-command-tool.directive.mjs

@@ -0,0 +1,59 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive, NgZone } from '@angular/core';
+import { EditService } from './edit.service';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SelectionService } from '../selection/selection.service';
+import { ContextService } from '../common/provider.service';
+import { ToolbarEditingToolBase } from './toolbar-editing-tool-base.directive';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
+import * as i0 from "@angular/core";
+import * as i1 from "./edit.service";
+import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../selection/selection.service";
+import * as i4 from "../common/provider.service";
+/**
+ * Represents the `edit` command in the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * When the user clicks the toolbar button that is associated with the directive, the
+ * [edit]({% slug api_grid_gridcomponent %}#toc-edit) event is triggered.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button text="Edit" kendoGridEditTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class EditCommandToolbarDirective extends ToolbarEditingToolBase {
+    editService;
+    constructor(editService, host, selection, ctx, zone, cdr) {
+        super(host, ToolbarToolName.edit, ctx, zone, cdr, editService, selection);
+        this.editService = editService;
+    }
+    /**
+     * @hidden
+     */
+    onClick(e) {
+        e.preventDefault();
+        if (!this.isSelectionPresent) {
+            return;
+        }
+        this.editService.beginEdit(this.lastSelectionIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCommandToolbarDirective, deps: [{ token: i1.EditService }, { token: i2.ToolBarButtonComponent }, { token: i3.SelectionService }, { token: i4.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditCommandToolbarDirective, isStandalone: true, selector: "[kendoGridEditTool]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCommandToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridEditTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.ToolBarButtonComponent }, { type: i3.SelectionService }, { type: i4.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/editing/form/form-formfield.component.mjs

@@ -89,7 +89,7 @@ export class FormFormFieldComponent {
                 <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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: i4.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4.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.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.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5.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"] }] });
+    `, 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: i4.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4.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.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.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5.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", "adaptiveTitle", "adaptiveSubtitle", "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,

package/esm2022/editing/remove-command-tool.directive.mjs

@@ -0,0 +1,60 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive, NgZone } from '@angular/core';
+import { EditService } from './edit.service';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SelectionService } from '../selection/selection.service';
+import { ContextService } from '../common/provider.service';
+import { ToolbarEditingToolBase } from './toolbar-editing-tool-base.directive';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
+import * as i0 from "@angular/core";
+import * as i1 from "./edit.service";
+import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../selection/selection.service";
+import * as i4 from "../common/provider.service";
+/**
+ * Represents the `remove` command in the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * When the user clicks the toolbar button that is associated with the directive, the
+ * [remove]({% slug api_grid_gridcomponent %}#toc-remove) event is triggered.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button text="Remove row" kendoGridRemoveTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class RemoveCommandToolbarDirective extends ToolbarEditingToolBase {
+    editService;
+    selection;
+    constructor(editService, host, selection, ctx, zone, cdr) {
+        super(host, ToolbarToolName.remove, ctx, zone, cdr, editService, selection);
+        this.editService = editService;
+        this.selection = selection;
+    }
+    /**
+     * @hidden
+     */
+    onClick(e) {
+        e.preventDefault();
+        if (this.isSelectionPresent) {
+            this.editService.remove(this.lastSelectionIndex);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RemoveCommandToolbarDirective, deps: [{ token: i1.EditService }, { token: i2.ToolBarButtonComponent }, { token: i3.SelectionService }, { token: i4.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RemoveCommandToolbarDirective, isStandalone: true, selector: "[kendoGridRemoveTool]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RemoveCommandToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridRemoveTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.ToolBarButtonComponent }, { type: i3.SelectionService }, { type: i4.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/editing/remove-command.directive.mjs

@@ -52,6 +52,7 @@ export class RemoveCommandDirective extends Button {
      */
     onClick(e) {
         e.preventDefault();
+        e.stopImmediatePropagation();
         this.editService.remove(this.rowIndex);
     }
     constructor(editService, cellContext, element, renderer, ctx, ngZone) {

package/esm2022/editing/save-command-tool.directive.mjs

@@ -0,0 +1,64 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive, NgZone } from '@angular/core';
+import { EditService } from './edit.service';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SelectionService } from '../selection/selection.service';
+import { ContextService } from '../common/provider.service';
+import { ToolbarEditingToolBase } from './toolbar-editing-tool-base.directive';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
+import * as i0 from "@angular/core";
+import * as i1 from "./edit.service";
+import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../selection/selection.service";
+import * as i4 from "../common/provider.service";
+/**
+ * Represents the `save` command in the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * When the user clicks the toolbar button that is associated with the directive, the
+ * [save]({% slug api_grid_gridcomponent %}#toc-save) event is triggered.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button text="Save" kendoGridSaveTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class SaveCommandToolbarDirective extends ToolbarEditingToolBase {
+    editService;
+    constructor(editService, host, selection, ctx, zone, cdr) {
+        super(host, ToolbarToolName.save, ctx, zone, cdr, editService, selection);
+        this.editService = editService;
+    }
+    /**
+     * @hidden
+     */
+    onClick(e) {
+        e.preventDefault();
+        if (this.editService.hasNewItem) {
+            this.editService.save();
+        }
+        else if (this.isSelectionPresent && this.editService.isEdited(this.lastSelectionIndex)) {
+            this.editService.save(this.lastSelectionIndex);
+        }
+        else {
+            this.editService.editedIndices.forEach(i => this.editService.save(i.index));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveCommandToolbarDirective, deps: [{ token: i1.EditService }, { token: i2.ToolBarButtonComponent }, { token: i3.SelectionService }, { token: i4.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SaveCommandToolbarDirective, isStandalone: true, selector: "[kendoGridSaveTool]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveCommandToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridSaveTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.ToolBarButtonComponent }, { type: i3.SelectionService }, { type: i4.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/editing/toolbar-editing-tool-base.directive.mjs

@@ -0,0 +1,91 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive, Inject, NgZone } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { isPresent } from '@progress/kendo-angular-common';
+import { SelectionService } from '../selection/selection.service';
+import { EditService } from '../editing/edit.service';
+import { ContextService } from '../common/provider.service';
+import { ToolbarToolBase } from '../common/toolbar-tool-base.directive';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../common/provider.service";
+import * as i3 from "../editing/edit.service";
+import * as i4 from "../selection/selection.service";
+/**
+ * @hidden
+ */
+export class ToolbarEditingToolBase extends ToolbarToolBase {
+    host;
+    commandName;
+    ctx;
+    editService;
+    selection;
+    isEdited = false;
+    lastToolState = null;
+    constructor(host, commandName, ctx, zone, cdr, editService, selection) {
+        super(host, commandName, ctx, zone, cdr);
+        this.host = host;
+        this.commandName = commandName;
+        this.ctx = ctx;
+        this.editService = editService;
+        this.selection = selection;
+    }
+    ngDoCheck() {
+        if (!isPresent(this.editService)) {
+            return;
+        }
+        this.isEdited = this.editService.isEditing();
+        let isToolInactive = false;
+        const selectionPresent = isPresent(this.lastSelectionIndex);
+        switch (this.commandName) {
+            case ToolbarToolName.edit:
+                isToolInactive = this.isEdited || !selectionPresent;
+                break;
+            case ToolbarToolName.save:
+                isToolInactive = !(this.isEdited || this.editService.hasNewItem);
+                break;
+            case ToolbarToolName.remove:
+                isToolInactive = this.isEdited || !selectionPresent;
+                break;
+            case ToolbarToolName.cancel:
+                isToolInactive = !(this.isEdited || this.editService.hasNewItem);
+                break;
+        }
+        if (this.lastToolState !== isToolInactive) {
+            this.lastToolState = isToolInactive;
+            if (this.ctx.grid.showInactiveTools) {
+                this.host.disabled = isToolInactive;
+            }
+            else {
+                this.host.isHidden = isToolInactive;
+                const toolbar = this.host.host;
+                toolbar.refreshService.refresh(this.host);
+                if (toolbar.resizable) {
+                    this.zone.onStable.pipe(take(1)).subscribe(() => {
+                        toolbar.onResize();
+                    });
+                }
+            }
+        }
+    }
+    get lastSelectionIndex() {
+        return this.selection?.selected[this.selection?.selected.length - 1];
+    }
+    get isSelectionPresent() {
+        return isPresent(this.lastSelectionIndex) && this.lastSelectionIndex > -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarEditingToolBase, deps: [{ token: i1.ToolBarButtonComponent }, { token: 'command' }, { token: i2.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.EditService }, { token: i4.SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarEditingToolBase, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarEditingToolBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['command']
+                }] }, { type: i2.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.EditService }, { type: i4.SelectionService }]; } });

package/esm2022/excel/excel-command-tool.directive.mjs

@@ -2,14 +2,16 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive } from '@angular/core';
+import { ChangeDetectorRef, Directive, NgZone } from '@angular/core';
 import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
-import { Subscription } from 'rxjs';
-import { fileExcelIcon } from '@progress/kendo-svg-icons';
 import { ExcelService } from './excel.service';
+import { ContextService } from '../common/provider.service';
+import { ToolbarToolBase } from '../common/toolbar-tool-base.directive';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
 import * as i0 from "@angular/core";
 import * as i1 from "./excel.service";
 import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../common/provider.service";
 /**
  * Represents the `export-to-Excel` toolbar tool of the Grid.
  * You can apply this directive to any `kendo-toolbar-button` element inside a
@@ -30,22 +32,15 @@ import * as i2 from "@progress/kendo-angular-toolbar";
  * </kendo-grid>
  * ```
  */
-export class ExcelCommandToolbarDirective {
+export class ExcelCommandToolbarDirective extends ToolbarToolBase {
     excelService;
-    host;
-    clickSub = new Subscription();
-    constructor(excelService, host) {
+    constructor(excelService, host, ctx, zone, cdr) {
+        super(host, ToolbarToolName.excelExport, ctx, zone, cdr);
         this.excelService = excelService;
-        this.host = host;
     }
     ngOnInit() {
-        this.clickSub = this.host.click.subscribe(e => this.onClick(e));
+        super.ngOnInit();
         this.host.className = 'k-grid-excel';
-        this.host.svgIcon = fileExcelIcon;
-        this.host.icon = 'file-excel';
-    }
-    ngOnDestroy() {
-        this.clickSub.unsubscribe();
     }
     /**
      * @hidden
@@ -54,8 +49,8 @@ export class ExcelCommandToolbarDirective {
         e.preventDefault();
         this.excelService.exportClick.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, deps: [{ token: i1.ExcelService }, { token: i2.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExcelCommandToolbarDirective, isStandalone: true, selector: "[kendoGridExcelTool]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, deps: [{ token: i1.ExcelService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExcelCommandToolbarDirective, isStandalone: true, selector: "[kendoGridExcelTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, decorators: [{
             type: Directive,
@@ -63,4 +58,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridExcelTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ExcelService }, { type: i2.ToolBarButtonComponent }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ExcelService }, { type: i2.ToolBarButtonComponent }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/filtering/cell/autocomplete-filter-cell.component.mjs

@@ -79,7 +79,7 @@ export class AutoCompleteFilterCellComponent extends BaseFilterCellComponent {
                 [value]="currentFilter?.value">
             </kendo-autocomplete>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoAutoComplete"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoAutoComplete"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteFilterCellComponent, decorators: [{
             type: Component,

package/esm2022/filtering/cell/boolean-filter-cell.component.mjs

@@ -81,7 +81,7 @@ export class BooleanFilterCellComponent extends BooleanFilterComponent {
                 [value]="currentFilter?.value">
             </kendo-dropdownlist>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterCellComponent, decorators: [{
             type: Component,

package/esm2022/filtering/cell/date-filter-cell.component.mjs

@@ -94,7 +94,7 @@ export class DateFilterCellComponent extends DateFilterComponent {
                 ></kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: 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"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: 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", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterCellComponent, decorators: [{
             type: Component,

package/esm2022/filtering/cell/filter-cell-operators.component.mjs

@@ -175,7 +175,7 @@ export class FilterCellOperatorsComponent {
             [size]="size"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)"></button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { 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"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,

package/esm2022/filtering/filter-input.directive.mjs

@@ -13,6 +13,7 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class FilterInputDirective {
+    ngZone;
     element;
     renderer;
     change = new EventEmitter();
@@ -31,12 +32,19 @@ export class FilterInputDirective {
     changeRequestsSubscription;
     unsubscribeEvents;
     constructor(valueAccessors, ngZone, element, renderer) {
+        this.ngZone = ngZone;
         this.element = element;
         this.renderer = renderer;
         this.accessor = valueAccessors[0];
         ngZone.runOutsideAngular(() => {
             const unsubscribeStart = renderer.listen(element.nativeElement, 'compositionstart', () => this.composing = true);
-            const unsubscribeEnd = renderer.listen(element.nativeElement, 'compositionend', () => this.composing = false);
+            const unsubscribeEnd = renderer.listen(element.nativeElement, 'compositionend', (event) => {
+                this.composing = false;
+                const value = event.target?.value;
+                this.filterDelay > 0 ?
+                    this.changeRequests.next(value) :
+                    this.change.emit(value);
+            });
             this.unsubscribeEvents = () => {
                 unsubscribeStart();
                 unsubscribeEnd();
@@ -63,7 +71,11 @@ export class FilterInputDirective {
     subscribeChanges() {
         this.changeRequestsSubscription = this.changeRequests
             .pipe(debounceTime(this.filterDelay), filter(() => !this.composing))
-            .subscribe(x => this.change.emit(x));
+            .subscribe((x) => {
+            this.ngZone.run(() => {
+                this.change.emit(x);
+            });
+        });
     }
     unsubscribeChanges() {
         if (this.changeRequestsSubscription) {