@progress/kendo-angular-grid 19.0.0-develop.3 → 19.0.0-develop.31

package/esm2022/directives.mjs

@@ -73,7 +73,7 @@ import { FilterRowComponent } from "./filtering/filter-row.component";
 // COLUMN MENU
 import { ColumnMenuChooserItemCheckedDirective } from "./column-menu/column-chooser-item-checked.directive";
 import { ColumnChooserComponent } from "./column-menu/column-chooser.component";
-import { ColumnChooserToolbarDirective } from "./column-menu/column-chooser-tool.directive";
+import { ColumnChooserToolbarDirective } from "./rendering/toolbar/tools/column-chooser-tool.directive";
 import { ColumnListComponent } from "./column-menu/column-list.component";
 import { ColumnMenuAutoSizeAllColumnsComponent } from "./column-menu/column-menu-autosize-all.component";
 import { ColumnMenuAutoSizeColumnComponent } from "./column-menu/column-menu-autosize.component";
@@ -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/dragdrop/drag-hint.service.mjs

@@ -65,21 +65,24 @@ const fontIconsMarkup = (safeTitle) => `
  * @hidden
  */
 export class DragHintService {
-    santizer;
+    sanitizer;
     iconsService;
     dom;
     cancelIcon = cancelIcon;
-    constructor(santizer, iconsService) {
-        this.santizer = santizer;
+    constructor(sanitizer, iconsService) {
+        this.sanitizer = sanitizer;
         this.iconsService = iconsService;
     }
+    ngOnDestroy() {
+        this.remove();
+    }
     create(title) {
         if (!isDocumentAvailable()) {
             return;
         }
         this.dom = document.createElement("div");
         decorate(this.dom);
-        const safeTitle = this.santizer.sanitize(SecurityContext.HTML, title);
+        const safeTitle = this.sanitizer.sanitize(SecurityContext.HTML, title);
         const innerHtml = this.isSVG ?
             svgIconsMarkup(this.cancelIcon.viewBox, this.cancelIcon.content, safeTitle) :
             fontIconsMarkup(safeTitle);

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,94 @@
+/**-----------------------------------------------------------------------------------------
+* 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;
+        let formGroup;
+        const selectionPresent = isPresent(this.lastSelectionIndex);
+        const editServiceCtx = this.editService.context(this.lastSelectionIndex);
+        if (this.isEdited && isPresent(editServiceCtx)) {
+            formGroup = this.editService.context(this.lastSelectionIndex).group;
+        }
+        switch (this.commandName) {
+            case ToolbarToolName.edit:
+                isToolInactive = this.isEdited || !selectionPresent;
+                break;
+            case ToolbarToolName.save:
+                isToolInactive = !(this.isEdited || this.editService.hasNewItem) || !formGroup?.valid;
+                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 if (this.host.isHidden !== isToolInactive) {
+                this.host.isHidden = isToolInactive;
+                const toolbar = this.host.host;
+                toolbar.refreshService.refresh(this.host);
+                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/editing-directives/editing-directive-base.mjs

@@ -55,9 +55,12 @@ export class EditingDirectiveBase {
     };
     /**
      * A function that is called to confirm if the `dataItem` will be removed.
-     * Setting to `true` will result in displaying a default confirmation dialog.
+     * By default, the Grid displays its built-in confirmation dialog. To use a custom dialog, provide a `RemoveConfirmationCallback` function.
+     * To prevent showing a confirmation dialog, set the `removeConfirmation` property to `false`.
+     *
+     * @default true
      */
-    removeConfirmation = false;
+    removeConfirmation = true;
     subscriptions = new Subscription();
     defaultEditService;
     userEditService;

package/esm2022/editing-directives/external-editing.directive.mjs

@@ -9,9 +9,11 @@ import { markAllAsTouched } from './utils';
 import { EditingDirectiveBase } from './editing-directive-base';
 import { DialogFormComponent } from '../editing/form';
 import { isPresent } from '@progress/kendo-angular-common';
+import { AdaptiveGridService } from '../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
+import * as i3 from "../common/adaptiveness.service";
 /**
  * A directive which encapsulates the editing operations of the Grid when using the
  * External Form ([see example](slug:editing_directives_grid#external-editing)).
@@ -19,6 +21,7 @@ import * as i2 from "../editing/local-data-changes.service";
 export class ExternalEditingDirective extends EditingDirectiveBase {
     grid;
     localDataChangesService;
+    adaptiveGridService;
     /**
      * The function that creates the `FormGroup` for the edited model.
      */
@@ -31,10 +34,11 @@ export class ExternalEditingDirective extends EditingDirectiveBase {
      * Allows you to customize the Dialog that contains the edit form.
      */
     dialogSettings;
-    constructor(grid, localDataChangesService) {
+    constructor(grid, localDataChangesService, adaptiveGridService) {
         super(grid, localDataChangesService);
         this.grid = grid;
         this.localDataChangesService = localDataChangesService;
+        this.adaptiveGridService = adaptiveGridService;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -46,19 +50,29 @@ export class ExternalEditingDirective extends EditingDirectiveBase {
      * Opens a Dialog that contains the edit form.
      */
     openEditFormDialog(editEventArgs, formGroup, formSettings) {
-        const settings = { appendTo: this.grid.dialogContainer, 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 });
+        if (this.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            if (!this.grid.isActionSheetExpanded) {
+                this.adaptiveGridService.viewType = 'externalEditing';
+                this.grid.adaptiveRenderer.externalEditingSettings = { formControls, formGroup, formSettings, event: editEventArgs, externalEditingDirective: this };
+                this.grid.adaptiveRenderer.actionSheet.toggle(true);
             }
-            dialog.close();
-        });
+        }
+        else {
+            const settings = { appendTo: this.grid.dialogContainer, content: DialogFormComponent, title: this.localization.get('externalEditingTitle'), ...this.dialogSettings };
+            const dialog = this.dialogService.open(settings);
+            this.adaptiveGridService.popupRef = dialog;
+            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);
@@ -111,7 +125,7 @@ export class ExternalEditingDirective extends EditingDirectiveBase {
         });
         return settings.filter(item => isPresent(item));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, deps: [{ token: i1.GridComponent }, { token: i2.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, deps: [{ token: i1.GridComponent }, { token: i2.LocalDataChangesService }, { token: i3.AdaptiveGridService }], 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: [{
@@ -120,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridExternalEditing]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.LocalDataChangesService }]; }, propDecorators: { createFormGroup: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.LocalDataChangesService }, { type: i3.AdaptiveGridService }]; }, propDecorators: { createFormGroup: [{
                 type: Input,
                 args: ['kendoGridExternalEditing']
             }], formSettings: [{