@progress/kendo-angular-grid 19.0.0-develop.10 → 19.0.0-develop.12

package/esm2022/columns/span-column.component.mjs

@@ -48,7 +48,7 @@ export class SpanColumnComponent extends ColumnBase {
     /**
      * @hidden
      */
-    childColumns = new QueryList();
+    children = new QueryList();
     /**
      * @hidden
      */
@@ -91,13 +91,13 @@ export class SpanColumnComponent extends ColumnBase {
     set width(_value) {
     }
     get width() {
-        return this.childColumns.reduce((total, column) => total + column.width, 0);
+        return this.children.reduce((total, column) => total + column.width, 0);
     }
     /**
      * @hidden
      */
     get leafIndex() {
-        return this.childColumns.first.leafIndex;
+        return this.children.first.leafIndex;
     }
     _editable = true;
     constructor(parent, idService) {
@@ -124,7 +124,7 @@ export class SpanColumnComponent extends ColumnBase {
      * @hidden
      */
     get colspan() {
-        return this.childColumns.filter(c => c.isVisible).length;
+        return this.children.filter(c => c.isVisible).length;
     }
     /**
      * Toggles the locked (frozen) state of the columns ([see example](slug:locked_columns_grid)).
@@ -134,13 +134,13 @@ export class SpanColumnComponent extends ColumnBase {
         this._locked = value;
     }
     get locked() {
-        return this._locked || this.childColumns.some(c => c.locked);
+        return this._locked || this.children.some(c => c.locked);
     }
     get childrenArray() {
-        return this.childColumns.toArray();
+        return this.children.toArray();
     }
     get hasChildren() {
-        return this.childColumns.length > 0;
+        return this.children.length > 0;
     }
     /**
      * @hidden
@@ -156,7 +156,7 @@ export class SpanColumnComponent extends ColumnBase {
                 provide: ColumnBase,
                 useExisting: forwardRef(() => SpanColumnComponent)
             }
-        ], queries: [{ propertyName: "template", predicate: CellTemplateDirective }, { propertyName: "editTemplate", predicate: EditTemplateDirective }, { propertyName: "childColumns", predicate: ColumnComponent }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+        ], queries: [{ propertyName: "template", predicate: CellTemplateDirective }, { propertyName: "editTemplate", predicate: EditTemplateDirective }, { propertyName: "children", predicate: ColumnComponent }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpanColumnComponent, decorators: [{
             type: Component,
@@ -185,7 +185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], editTemplate: [{
                 type: ContentChildren,
                 args: [EditTemplateDirective, { descendants: false }]
-            }], childColumns: [{
+            }], children: [{
                 type: ContentChildren,
                 args: [ColumnComponent]
             }], editable: [{

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

@@ -0,0 +1,81 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { Subscription } from 'rxjs';
+import { cancelIcon, columnsIcon, fileExcelIcon, filePdfIcon, pencilIcon, plusIcon, saveIcon, trashIcon } from '@progress/kendo-svg-icons';
+import { isPresent } from '@progress/kendo-angular-common';
+import { ContextService } from './provider.service';
+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 "./provider.service";
+const ICONS_MAP = {
+    edit: { svgIcon: pencilIcon, icon: 'pencil' },
+    save: { svgIcon: saveIcon, icon: 'save' },
+    cancel: { svgIcon: cancelIcon, icon: 'cancel' },
+    remove: { svgIcon: trashIcon, icon: 'trash' },
+    add: { svgIcon: plusIcon, icon: 'plus' },
+    excelExport: { svgIcon: fileExcelIcon, icon: 'file-excel' },
+    pdfExport: { svgIcon: filePdfIcon, icon: 'file-pdf' },
+    columns: { svgIcon: columnsIcon, icon: 'columns' }
+};
+/**
+ * @hidden
+ */
+export class ToolbarToolBase {
+    host;
+    commandName;
+    ctx;
+    zone;
+    cdr;
+    clickSub = new Subscription();
+    constructor(host, commandName, ctx, zone, cdr) {
+        this.host = host;
+        this.commandName = commandName;
+        this.ctx = ctx;
+        this.zone = zone;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.clickSub = this.host.click.subscribe(e => this.onClick(e));
+        const hasIcon = (isPresent(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '') &&
+            (isPresent(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '');
+        const hasSvgIcon = isPresent(this.host.toolbarOptions.svgIcon) && isPresent(this.host.overflowOptions.svgIcon);
+        if (!hasIcon) {
+            this.host.icon = ICONS_MAP[this.commandName].icon;
+        }
+        if (!hasSvgIcon) {
+            this.host.svgIcon = ICONS_MAP[this.commandName].svgIcon;
+        }
+    }
+    ngAfterViewInit() {
+        const hasText = isPresent(this.host.text);
+        if (!hasText) {
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    const messageKey = this.commandName === ToolbarToolName.columns ? 'columns' : `${this.commandName}ToolbarToolText`;
+                    this.host.text = this.ctx.localization.get(messageKey);
+                    this.zone.run(() => {
+                        this.cdr.markForCheck();
+                    });
+                });
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.clickSub.unsubscribe();
+    }
+    onClick(_e) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolBase, deps: [{ token: i1.ToolBarButtonComponent }, { token: 'command' }, { token: i2.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarToolBase, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolBase, 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 }]; } });

package/esm2022/directives.mjs

@@ -148,8 +148,15 @@ import { AddCommandToolbarDirective } from "./editing/add-command-tool.directive
 import { RowDragHandleTemplateDirective } from "./row-reordering/drag-handle-template.directive";
 import { RowDragHintTemplateDirective } from "./row-reordering/drag-hint-template.directive";
 import { DialogFormComponent, FormComponent, FormFormFieldComponent } from "./editing/form";
+import { UndoRedoDirective } from "./state-management/undo-redo.directive";
+import { UndoCommandToolbarDirective } from "./state-management/undo-command-tool";
+import { RedoCommandToolbarDirective } from "./state-management/redo-command-tool";
 import { SortCommandToolbarDirective } from "./rendering/toolbar/tools/sort-command-tool.directive";
 import { FilterCommandToolbarDirective } from "./rendering/toolbar/tools/filter-command-tool.directive";
+import { EditCommandToolbarDirective } from "./editing/edit-command-tool.directive";
+import { SaveCommandToolbarDirective } from "./editing/save-command-tool.directive";
+import { RemoveCommandToolbarDirective } from "./editing/remove-command-tool.directive";
+import { CancelCommandToolbarDirective } from "./editing/cancel-command-tool.directive";
 /**
  * @hidden
  *
@@ -369,6 +376,10 @@ export const KENDO_GRID_BODY_EXPORTS = [
     RemoveCommandDirective,
     AddCommandDirective,
     AddCommandToolbarDirective,
+    EditCommandToolbarDirective,
+    SaveCommandToolbarDirective,
+    RemoveCommandToolbarDirective,
+    CancelCommandToolbarDirective,
     CellLoadingTemplateDirective,
     LoadingTemplateDirective,
     RowReorderColumnComponent,
@@ -404,7 +415,8 @@ export const KENDO_GRID_DECLARATIONS = [
     GridClipboardDirective,
     FormComponent,
     DialogFormComponent,
-    FormFormFieldComponent
+    FormFormFieldComponent,
+    UndoRedoDirective,
 ];
 /**
  * @hidden
@@ -436,7 +448,10 @@ export const KENDO_GRID_EXPORTS = [
     ...KENDO_GRID_FILTER_OPERATORS,
     ...KENDO_GRID_FILTER_MENU_EXPORTS,
     ...KENDO_GRID_COLUMN_MENU_EXPORTS,
-    GridClipboardDirective
+    GridClipboardDirective,
+    UndoRedoDirective,
+    UndoCommandToolbarDirective,
+    RedoCommandToolbarDirective,
 ];
 /**
  * @hidden

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/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 }]; } });