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

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/grid.component.mjs

@@ -6,7 +6,7 @@ import { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Inpu
 import { ZoneAwareEventEmitter } from './common/event-emitter';
 import { FormControl, FormGroup } from '@angular/forms';
 import { merge } from 'rxjs';
-import { map, tap, take, filter, switchMap, takeUntil } from 'rxjs/operators';
+import { map, tap, take, filter, switchMap, takeUntil, flatMap } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { ColumnComponent, isColumnComponent } from './columns/column.component';
@@ -14,7 +14,7 @@ import { isSpanColumnComponent } from './columns/span-column.component';
 import { isColumnGroupComponent, ColumnGroupComponent } from './columns/column-group.component';
 import { DetailTemplateDirective } from './rendering/details/detail-template.directive';
 import { normalize } from './common/pager-settings';
-import { isArray, anyChanged, isChanged, isPresent, isUniversal, observe, isTruthy, createPromise, hasObservers, roundDown } from './utils';
+import { isArray, anyChanged, isChanged, isPresent, isUniversal, observe, isTruthy, createPromise, hasObservers, roundDown, recursiveColumnsFlatMap } from './utils';
 import { BrowserSupportService } from './layout/browser-support.service';
 import { DataResultIterator, DataCollection } from './data/data.collection';
 import { SelectionService } from './selection/selection.service';
@@ -572,6 +572,21 @@ export class GridComponent {
             this.defaultSelection ? this.defaultSelection.stateToArray() : this.selectionDirective.stateToArray() :
             [];
     }
+    /**
+     * The current Grid `GridState` objects. Contains the information about data operations and column state, required
+     * to store and restore the Grid state.
+     */
+    get currentState() {
+        return {
+            filter: this.filter,
+            group: this.group,
+            sort: this.sort,
+            skip: this.skip,
+            take: this.pageSize,
+            columnsState: this.columns.toArray().flatMap(recursiveColumnsFlatMap),
+            currentData: structuredClone(this.data)
+        };
+    }
     /**
      * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells
      * ([see example]({% slug resizing_columns_grid %})).
@@ -610,6 +625,31 @@ export class GridComponent {
      * @default false
      */
     hideHeader = false;
+    /**
+     * Specifies if the currently inactive toolbar tools will be visible. Applicable when the toolbar is configured using the <kendo-toolbar> component. By default, such tools are hidden.
+     *
+     * @default false
+     */
+    showInactiveTools = false;
+    /**
+     * A function which determines if a specific row is expanded.
+     */
+    set isDetailExpanded(callback) {
+        this.detailsService.userCallback = callback;
+    }
+    get isDetailExpanded() {
+        return this.detailsService.userCallback;
+    }
+    /**
+     * A function which determines if a specific group row is expanded.
+     */
+    set isGroupExpanded(callback) {
+        this.groupsService.userCallback = callback;
+        this.groupable = isPresent(callback);
+    }
+    get isGroupExpanded() {
+        return this.groupsService.userCallback;
+    }
     /**
      * Fires when the Grid filter is modified through the UI.
      * You have to handle the event yourself and filter the data.
@@ -642,6 +682,10 @@ export class GridComponent {
      * Fires when the data state of the Grid is changed.
      */
     dataStateChange = new EventEmitter();
+    /**
+     * Fires when the data or columns state of the Grid is changed.
+     */
+    gridStateChange = new EventEmitter();
     /**
      * Fires when the user expands a group header.
      */
@@ -888,6 +932,12 @@ export class GridComponent {
     get navigation() {
         return this.navigationService;
     }
+    /**
+     * @hidden
+     */
+    get flatData() {
+        return isArray(this.data) ? this.data : this.data.data;
+    }
     shouldGenerateColumns = true;
     direction;
     notifyTimeout = null;
@@ -998,6 +1048,7 @@ export class GridComponent {
      * @hidden
      */
     blockArrowSelection = false;
+    undoRedoService;
     selectionSubscription;
     stateChangeSubscription;
     groupExpandCollapseSubscription;
@@ -1169,6 +1220,7 @@ export class GridComponent {
         }
         this.initSelectionService();
         this.updateNavigationMetadata();
+        this.currentState.currentData = this.data;
     }
     ngOnChanges(changes) {
         if (isChanged("data", changes)) {
@@ -1378,6 +1430,12 @@ export class GridComponent {
         const target = isNaN(columnIndex) ? row : `${row} td[data-kendo-grid-column-index="${columnIndex}"]`;
         this.focusEditElement(target);
     }
+    /**
+     * @hidden
+     */
+    handleReorderEvents(ev, evType) {
+        this.rowReorderService[evType](ev);
+    }
     /**
      * Closes the editor for a given row ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
      *
@@ -1471,6 +1529,42 @@ export class GridComponent {
     saveAsExcel() {
         this.excelService.save(this);
     }
+    /**
+     * Applies the provided `GridState` object to the Grid.
+     */
+    loadState(state) {
+        this.traverseColumns(this.columns, (column) => {
+            const columnState = state.columnsState.find((col) => col.id === column.id);
+            if (columnState) {
+                column.width = columnState.width;
+                column.hidden = columnState.hidden;
+                column.locked = columnState.locked;
+                column.sticky = columnState.sticky;
+                column.orderIndex = columnState.orderIndex;
+            }
+        });
+        this.columns.reset(this.columns.toArray());
+        this.columnsContainer.refresh();
+        this.sort = state.sort;
+        this.group = state.group;
+        this.filter = state.filter;
+        this.group = state.group;
+        this.skip = state.skip;
+        this.pageSize = state.take;
+        this.data = state.currentData;
+        this.changeNotification.notify();
+        this.changeDetectorRef.detectChanges();
+    }
+    traverseColumns(columns, callback) {
+        columns.forEach((column) => {
+            if (column.isColumnGroup || column.isSpanColumn) {
+                this.traverseColumns(column.children, callback);
+            }
+            else {
+                callback(column);
+            }
+        });
+    }
     /**
      * Applies the minimum possible width for the specified column,
      * so that the whole text fits without wrapping. This method expects the Grid
@@ -1621,7 +1715,7 @@ export class GridComponent {
             return;
         }
         if (isSpanColumnComponent(target) && !options.before) {
-            target = target.childColumns.last;
+            target = target.children.last;
         }
         this.reorder({
             before: options.before,
@@ -1629,37 +1723,6 @@ export class GridComponent {
             target: target
         });
     }
-    /**
-     * A function which determines if a specific row is expanded.
-     */
-    set isDetailExpanded(callback) {
-        this.detailsService.userCallback = callback;
-    }
-    get isDetailExpanded() {
-        return this.detailsService.userCallback;
-    }
-    /**
-     * A function which determines if a specific group row is expanded.
-     */
-    set isGroupExpanded(callback) {
-        this.groupsService.userCallback = callback;
-        this.groupable = isPresent(callback);
-    }
-    get isGroupExpanded() {
-        return this.groupsService.userCallback;
-    }
-    /**
-     * @hidden
-     */
-    handleReorderEvents(ev, evType) {
-        this.rowReorderService[evType](ev);
-    }
-    /**
-     * @hidden
-     */
-    get flatData() {
-        return isArray(this.data) ? this.data : this.data.data;
-    }
     /**
      * @hidden
      */
@@ -1713,7 +1776,7 @@ export class GridComponent {
         let toSkip = 1;
         // Possible only when called from the API.
         if (source.isSpanColumn) {
-            toSkip += source.childColumns.length;
+            toSkip += source.children.length;
         }
         let i = 0;
         while (i < expandedColumns.length) {
@@ -1909,7 +1972,13 @@ export class GridComponent {
                     this.blockArrowSelection = true;
                 }
                 this.dataStateChange.emit(x);
+                this.gridStateChange.emit({ ...x, columnsState: this.currentState.columnsState, currentData: this.currentState.currentData });
+                if (this.undoRedoService) {
+                    this.undoRedoService.originalEvent = x;
+                }
             });
+        this.stateChangeSubscription.add(merge(this.columnReorder, this.columnResize, this.columnVisibilityChange, this.columnLockedChange, this.columnStickyChange).pipe(flatMap(() => this.ngZone.onStable.pipe(take(1))))
+            .subscribe(() => this.ngZone.run(() => this.gridStateChange.emit(this.currentState))));
     }
     attachEditHandlers() {
         if (!this.editService) {
@@ -2203,7 +2272,7 @@ export class GridComponent {
         this.dropTargetContainer?.notify();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, deps: [{ token: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.ContextService }, { token: i23.SizingOptionsService }, { token: i24.RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", gridResizable: "gridResizable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass", "class.k-grid-resizable": "this.isResizable", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", gridResizable: "gridResizable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", showInactiveTools: "showInactiveTools", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", gridStateChange: "gridStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass", "class.k-grid-resizable": "this.isResizable", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
             BrowserSupportService,
             LocalizationService,
             ColumnInfoService,
@@ -2489,6 +2558,27 @@ export class GridComponent {
             i18n-bottomToolbarLabel="kendo.grid.bottomToolbarLabel|The label for the Grid bottom toolbar"
             bottomToolbarLabel="Bottom toolbar"
 
+            i18n-editToolbarToolText="kendo.grid.editToolbarToolText|The text for the Grid Edit toolbar tool"
+            editToolbarToolText="Edit"
+
+            i18n-saveToolbarToolText="kendo.grid.saveToolbarToolText|The text for the Grid Save toolbar tool"
+            saveToolbarToolText="Save"
+
+            i18n-addToolbarToolText="kendo.grid.addToolbarToolText|The text for the Grid Add toolbar tool"
+            addToolbarToolText="Add"
+
+            i18n-cancelToolbarToolText="kendo.grid.cancelToolbarToolText|The text for the Grid Cancel toolbar tool"
+            cancelToolbarToolText="Cancel"
+
+            i18n-removeToolbarToolText="kendo.grid.removeToolbarToolText|The text for the Grid Remove toolbar tool"
+            removeToolbarToolText="Delete"
+
+            i18n-excelExportToolbarToolText="kendo.grid.excelExportToolbarToolText|The text for the Grid Excel export toolbar tool"
+            excelExportToolbarToolText="Excel Export"
+
+            i18n-pdfExportToolbarToolText="kendo.grid.pdfExportToolbarToolText|The text for the Grid PDF export toolbar tool"
+            pdfExportToolbarToolText="PDF Export"
+
             i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
             groupPanelLabel="Group panel"
 
@@ -3237,6 +3327,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-bottomToolbarLabel="kendo.grid.bottomToolbarLabel|The label for the Grid bottom toolbar"
             bottomToolbarLabel="Bottom toolbar"
 
+            i18n-editToolbarToolText="kendo.grid.editToolbarToolText|The text for the Grid Edit toolbar tool"
+            editToolbarToolText="Edit"
+
+            i18n-saveToolbarToolText="kendo.grid.saveToolbarToolText|The text for the Grid Save toolbar tool"
+            saveToolbarToolText="Save"
+
+            i18n-addToolbarToolText="kendo.grid.addToolbarToolText|The text for the Grid Add toolbar tool"
+            addToolbarToolText="Add"
+
+            i18n-cancelToolbarToolText="kendo.grid.cancelToolbarToolText|The text for the Grid Cancel toolbar tool"
+            cancelToolbarToolText="Cancel"
+
+            i18n-removeToolbarToolText="kendo.grid.removeToolbarToolText|The text for the Grid Remove toolbar tool"
+            removeToolbarToolText="Delete"
+
+            i18n-excelExportToolbarToolText="kendo.grid.excelExportToolbarToolText|The text for the Grid Excel export toolbar tool"
+            excelExportToolbarToolText="Excel Export"
+
+            i18n-pdfExportToolbarToolText="kendo.grid.pdfExportToolbarToolText|The text for the Grid PDF export toolbar tool"
+            pdfExportToolbarToolText="PDF Export"
+
             i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
             groupPanelLabel="Group panel"
 
@@ -3766,6 +3877,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], hideHeader: [{
                 type: Input
+            }], showInactiveTools: [{
+                type: Input
+            }], isDetailExpanded: [{
+                type: Input
+            }], isGroupExpanded: [{
+                type: Input
             }], filterChange: [{
                 type: Output
             }], pageChange: [{
@@ -3780,6 +3897,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], dataStateChange: [{
                 type: Output
+            }], gridStateChange: [{
+                type: Output
             }], groupExpand: [{
                 type: Output
             }], groupCollapse: [{
@@ -3904,8 +4023,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], dialogContainer: [{
                 type: ViewChild,
                 args: ['dialogContainer', { read: ViewContainerRef }]
-            }], isDetailExpanded: [{
-                type: Input
-            }], isGroupExpanded: [{
-                type: Input
             }] } });