@progress/kendo-angular-grid 14.4.0-develop.14 → 14.4.0-develop.15

package/common/clipboard-types.d.ts

@@ -0,0 +1,102 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the starting point (Grid cell) of the Grid clipboard operations.
+ */
+export declare type GridClipboardTargetType = 'selectionStart' | 'activeCell';
+/**
+ * The possible values of the Grid [`GridClipboardEvent`]({% slug api_grid_gridclipboardevent %}) `type` property.
+ */
+export declare type GridClipboardEventType = 'copy' | 'cut' | 'paste';
+/**
+ * The Grid data items and their respective fields, affected by the current clipboard operation.
+ */
+export interface GridClipboardItem {
+    dataItem: any;
+    fields: string[];
+}
+/**
+ * The event data, exposed in the `GridClipboardDirective` `clipboard` event.
+ */
+export interface GridClipboardEvent {
+    /**
+     * The type of the original clipboard event.
+     */
+    type: GridClipboardEventType;
+    /**
+     * The data of the original DOM event.
+     */
+    originalEvent: ClipboardEvent;
+    /**
+     * When the action is `copy` or `cut` - the Grid data, copied to the clipboard, in Excel-compatible format.
+     * When the action is `paste` - the current clipboard data, available in the original DOM event.
+     */
+    clipboardData: string;
+    /**
+     * The Grid data items and their respective fields, affected by the clipboard action.
+     */
+    gridData: GridClipboardItem[];
+    /**
+     * The Grid cell used as a target of the current clipboard operation.
+     */
+    target: GridClipboardTargetCell;
+}
+/**
+ *
+ */
+export interface GridClipboardTargetCell {
+    /**
+     * The data index of the clipboard target cell parent row.
+     */
+    dataRowIndex: number;
+    /**
+     * The field of the Grid column the clipboard target cell is in.
+     */
+    colField: string;
+    /**
+     * The Grid data item corresponding to the clipboard target cell.
+     */
+    dataItem: any;
+}
+/**
+ * The `GridClipboardDirective` settings.
+ */
+export interface GridClipboardSettings {
+    /**
+     * Determines whether the clipboard actions will affect the whole data row
+     * when it is either partially selected, or contains the active cell.
+     *
+     * Defaults to `false`.
+     */
+    wholeRow?: boolean;
+    /**
+     * Determines whether column titles or field names will be included in the generated data
+     * during the `copy` and `cut` actions.
+     *
+     * Defaults to `false`.
+     */
+    copyHeaders?: boolean;
+    /**
+     * Determines whether the `copy` operation will modify the Clipboard content
+     * and trigger the `clipboard` event.
+     *
+     * Defaults to `true`.
+     */
+    copy?: boolean;
+    /**
+     * Determines whether the `cut` operation will modify the Clipboard content
+     * and trigger the `clipboard` event.
+     *
+     * Defaults to `true`.
+     */
+    cut?: boolean;
+    /**
+     * Determines whether the `paste` operation will modify the Clipboard content
+     * and trigger the `clipboard` event.
+     *
+     * Defaults to `true`.
+     */
+    paste?: boolean;
+}

package/common/clipboard.directive.d.ts

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { AfterViewInit, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
+import { ClipboardService } from './clipboard.service';
+import { GridComponent } from '../grid.component';
+import { GridClipboardTargetType, GridClipboardEvent, GridClipboardSettings } from './clipboard-types';
+import * as i0 from "@angular/core";
+/**
+ * The directive that enables the Grid built-in clipboard support. Allows copy, cut, and paste interactions
+ * with the Grid.
+ */
+export declare class GridClipboardDirective implements OnChanges, AfterViewInit, OnDestroy {
+    private host;
+    private clipboardService;
+    private renderer;
+    private zone;
+    /**
+     * Determines the target of the clipboard operation. The possible options are:
+     * - `activeCell`—Only the content of the current active cell or the row it is in will be copied to the clipboard.
+     * When pasting, the active cell will be the pivotal point for pasted content.
+     * - `selectionStart`—The content of all selected cells or rows from the current page will be copied to the clipboard.
+     * When pasting the first selected cell will be the pivotal point for pasted content.
+     *
+     * This option must be set, and the Grid keyboard navigation and/or selection functionalities must be enabled
+     * for the Clipboard directive to function as designed.
+     */
+    set clipboardTarget(value: GridClipboardTargetType);
+    get clipboardTarget(): GridClipboardTargetType;
+    /**
+     * The `GridClipboardDirective` settings.
+     *
+     * @default { wholeRow: false, copyHeaders: false copy: true, cut: true, paste: true }
+     */
+    set clipboardSettings(value: GridClipboardSettings);
+    get clipboardSettings(): GridClipboardSettings;
+    /**
+     * Fires when the user performs `cut`, `copy` or `paste` action within the Grid content area.
+     */
+    clipboard: EventEmitter<GridClipboardEvent>;
+    private _target;
+    private _clipboardSettings;
+    private subs;
+    constructor(host: GridComponent, clipboardService: ClipboardService, renderer: Renderer2, zone: NgZone);
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private onClipboard;
+    private inGrid;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridClipboardDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GridClipboardDirective, "[kendoGridClipboard]", ["kendoGridClipboard"], { "clipboardTarget": "clipboardTarget"; "clipboardSettings": "clipboardSettings"; }, { "clipboard": "clipboard"; }, never>;
+}

package/common/clipboard.service.d.ts

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ColumnBase } from '../columns/column-base';
+import { ContextService } from './provider.service';
+import { GridClipboardTargetType, GridClipboardItem } from './clipboard-types';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class ClipboardService {
+    private contextService;
+    targetColField: string;
+    targetRowIndex: number;
+    constructor(contextService: ContextService);
+    createClipboardData(data: any[], columns: ColumnBase[], options: any): {
+        dataString: string;
+        gridItems: GridClipboardItem[];
+    };
+    getGridData(data: string, columns: ColumnBase[], targetType: GridClipboardTargetType, targetRowIndex: number, options: any): GridClipboardItem[];
+    private itemToString;
+    private groupSelection;
+    private areEqual;
+    private addHeaders;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClipboardService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ClipboardService>;
+}

package/common/dom-events.service.d.ts

@@ -17,6 +17,7 @@ export declare class DomEventsService {
     focusIn: EventEmitter<any>;
     focusOut: EventEmitter<any>;
     windowBlur: EventEmitter<any>;
+    paste: EventEmitter<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DomEventsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DomEventsService>;
 }

package/common/error-messages.d.ts

@@ -6,3 +6,15 @@
  * @hidden
  */
 export declare const ColumnMenuErrorMessages: any;
+/**
+ * @hidden
+ */
+export declare const ClipboardErrorMessages: any;
+/**
+ * @hidden
+ */
+export declare const ColumnConfigurationErrorMessages: any;
+/**
+ * @hidden
+ */
+export declare const GridConfigurationErrorMessages: any;

package/databinding.directive.d.ts

@@ -93,5 +93,5 @@ export declare class DataBindingDirective implements OnInit, OnDestroy, DoCheck,
     protected applyState({ skip, take, sort, group, filter }: State): void;
     protected updateGridData(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataBindingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoGridBinding]", never, { "skip": "skip"; "sort": "sort"; "filter": "filter"; "pageSize": "pageSize"; "group": "group"; "data": "kendoGridBinding"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoGridBinding]", ["kendoGridBinding"], { "skip": "skip"; "sort": "sort"; "filter": "filter"; "pageSize": "pageSize"; "group": "group"; "data": "kendoGridBinding"; }, {}, never>;
 }

package/esm2020/column-menu/column-menu-item-base.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Input, isDevMode, HostBinding, Component } from '@angular/core';
 import { ColumnMenuService } from './column-menu.service';
+import { ColumnMenuErrorMessages } from '../common/error-messages';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -14,7 +15,7 @@ export class ColumnMenuItemBase {
     }
     ngOnInit() {
         if (isDevMode() && !this.service) {
-            throw new Error('The service input of the predefined column menu components is mandatory.');
+            throw new Error(ColumnMenuErrorMessages.serviceInput);
         }
     }
     /**

package/esm2020/columns/column-base.mjs

@@ -7,6 +7,7 @@ import { HeaderTemplateDirective } from '../rendering/header/header-template.dir
 import { FooterTemplateDirective } from '../rendering/footer/footer-template.directive';
 import { ColumnMenuTemplateDirective } from '../column-menu/column-menu-template.directive';
 import { IdService } from '../common/id.service';
+import { ColumnConfigurationErrorMessages } from '../common/error-messages';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/id.service";
 /**
@@ -102,7 +103,7 @@ export class ColumnBase {
         this.columnMenuTemplates = new QueryList();
         this.idService = idService;
         if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
-            throw new Error('Columns can be nested only inside ColumnGroupComponent');
+            throw new Error(ColumnConfigurationErrorMessages.columnNested);
         }
     }
     /**
@@ -124,7 +125,7 @@ export class ColumnBase {
         if (typeof value === 'string') {
             const parsedValue = this._width = parseInt(value, 10);
             if (isDevMode()) {
-                console.warn(`Expected numeric value for column width, but got a string "${value}". Treating as ${parsedValue}px.`);
+                console.warn(ColumnConfigurationErrorMessages.width(value, parsedValue));
             }
         }
         else {

package/esm2020/columns/column-group.component.mjs

@@ -6,6 +6,7 @@ import { Component, forwardRef, SkipSelf, Host, Optional, QueryList, ContentChil
 import { IdService } from '../common/id.service';
 import { ColumnBase } from './column-base';
 import { columnsSpan } from './column-common';
+import { ColumnConfigurationErrorMessages } from '../common/error-messages';
 import * as i0 from "@angular/core";
 import * as i1 from "./column-base";
 import * as i2 from "../common/id.service";
@@ -47,7 +48,7 @@ export class ColumnGroupComponent extends ColumnBase {
          */
         this.minResizableWidth = 10;
         if (parent && parent.isSpanColumn) {
-            throw new Error('ColumnGroupComponent cannot be nested inside SpanColumnComponent');
+            throw new Error(ColumnConfigurationErrorMessages.nestedInside('ColumnGroupComponent', 'SpanColumnComponent'));
         }
     }
     /**

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

@@ -9,6 +9,7 @@ import { ColumnBase } from './column-base';
 import { ColumnComponent } from "./column.component";
 import { isPresent } from "../utils";
 import { IdService } from '../common/id.service';
+import { ColumnConfigurationErrorMessages } from '../common/error-messages';
 import * as i0 from "@angular/core";
 import * as i1 from "./column-base";
 import * as i2 from "../common/id.service";
@@ -56,7 +57,7 @@ export class SpanColumnComponent extends ColumnBase {
         this.includeInChooser = false;
         this._editable = true;
         if (parent && parent.isSpanColumn) {
-            throw new Error('SpanColumn cannot be nested inside another SpanColumn');
+            throw new Error(ColumnConfigurationErrorMessages.nestedInside('SpanColumnComponent', 'SpanColumnComponent'));
         }
     }
     /**

package/esm2020/common/clipboard-types.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/common/clipboard.directive.mjs

@@ -0,0 +1,190 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, EventEmitter, Input, NgZone, Output, Renderer2, isDevMode } from '@angular/core';
+import { ClipboardService } from './clipboard.service';
+import { GridComponent } from '../grid.component';
+import { hasObservers, isDocumentAvailable } from '@progress/kendo-angular-common';
+import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { closest, contains } from '../rendering/common/dom-queries';
+import { isPresent, recursiveFlatMap } from '../utils';
+import { ClipboardErrorMessages } from './error-messages';
+import * as i0 from "@angular/core";
+import * as i1 from "../grid.component";
+import * as i2 from "./clipboard.service";
+/**
+ * The directive that enables the Grid built-in clipboard support. Allows copy, cut, and paste interactions
+ * with the Grid.
+ */
+export class GridClipboardDirective {
+    constructor(host, clipboardService, renderer, zone) {
+        this.host = host;
+        this.clipboardService = clipboardService;
+        this.renderer = renderer;
+        this.zone = zone;
+        /**
+         * Fires when the user performs `cut`, `copy` or `paste` action within the Grid content area.
+         */
+        this.clipboard = new EventEmitter();
+        this._clipboardSettings = {
+            wholeRow: false,
+            copyHeaders: false,
+            copy: true,
+            cut: true,
+            paste: true
+        };
+        this.subs = new Subscription();
+        this.onClipboard = (operationType, args) => {
+            if (!this.inGrid(args) || !this.clipboardSettings[operationType]) {
+                return;
+            }
+            const gridData = Array.isArray(this.host.data) ? this.host.data : this.host.data.data;
+            const gridDataItems = gridData.flatMap(recursiveFlatMap);
+            const selection = this.host.selection;
+            const selectionDirective = this.host.selectionDirective;
+            const targetType = this.clipboardTarget;
+            const isCellSelection = (this.host.selectable?.cell || selectionDirective.isCellSelectionMode);
+            let clipboardData = [];
+            switch (targetType) {
+                case 'activeCell':
+                    {
+                        const targetCell = { ...this.host.activeCell };
+                        clipboardData = targetCell && [{ dataItem: targetCell.dataItem, dataRowIndex: targetCell.dataRowIndex }];
+                    }
+                    break;
+                case 'selectionStart':
+                    {
+                        const identifier = selectionDirective.selectionKey;
+                        clipboardData = gridDataItems.flatMap((item, index) => {
+                            if (identifier) {
+                                const key = typeof identifier === 'string' ? item[identifier] : identifier({ index: index + this.host.skip, dataItem: item });
+                                return isCellSelection ?
+                                    selection.some(s => s.itemKey === key) ? [{ dataItem: item, dataRowIndex: index + this.host.skip }] : [] :
+                                    selection.indexOf(key) > -1 ? [{ dataItem: item, dataRowIndex: index + this.host.skip }] : [];
+                            }
+                            return isCellSelection ?
+                                selection.some(s => s.itemKey === index + this.host.skip) ? [{ dataItem: item, dataRowIndex: index + this.host.skip }] : [] :
+                                selection.indexOf(index + this.host.skip) > -1 ? [{ dataItem: item, dataRowIndex: index + this.host.skip }] : [];
+                        });
+                    }
+                    break;
+            }
+            const isPaste = operationType === 'paste';
+            const pastedData = args.clipboardData.getData('text').trim();
+            const visibleCols = this.host.columns.toArray().filter(c => c.isVisible);
+            const data = isPaste ?
+                {
+                    dataString: pastedData,
+                    gridItems: this.clipboardService.getGridData(pastedData, visibleCols, this.clipboardTarget, clipboardData[0].dataRowIndex, {
+                        wholeRow: this.clipboardSettings.wholeRow,
+                        isCellSelection
+                    })
+                } :
+                this.clipboardService.createClipboardData(clipboardData || [], visibleCols, {
+                    wholeRow: this.clipboardSettings.wholeRow || !isCellSelection,
+                    copyHeaders: this.clipboardSettings.copyHeaders,
+                    operationType
+                });
+            !isPaste && navigator.clipboard.writeText(data.dataString);
+            if (hasObservers(this.clipboard)) {
+                this.clipboard.emit({
+                    type: operationType,
+                    originalEvent: args,
+                    clipboardData: data.dataString,
+                    gridData: data.gridItems,
+                    target: {
+                        dataRowIndex: this.clipboardService.targetRowIndex,
+                        colField: this.clipboardService.targetColField,
+                        dataItem: clipboardData.find(item => item.dataRowIndex === this.clipboardService.targetRowIndex)?.dataItem
+                    }
+                });
+            }
+            this.clipboardService.targetColField = this.clipboardService.targetRowIndex = null;
+        };
+        this.inGrid = (args) => {
+            const target = document.activeElement.matches('.k-table-td') ? document.activeElement : args.target;
+            const inContentArea = closest(target, node => node.parentElement?.classList.contains('k-grid-container'));
+            const inHost = contains(this.host.wrapper.nativeElement, target);
+            return target && inHost && inContentArea;
+        };
+    }
+    /**
+     * Determines the target of the clipboard operation. The possible options are:
+     * - `activeCell`—Only the content of the current active cell or the row it is in will be copied to the clipboard.
+     * When pasting, the active cell will be the pivotal point for pasted content.
+     * - `selectionStart`—The content of all selected cells or rows from the current page will be copied to the clipboard.
+     * When pasting the first selected cell will be the pivotal point for pasted content.
+     *
+     * This option must be set, and the Grid keyboard navigation and/or selection functionalities must be enabled
+     * for the Clipboard directive to function as designed.
+     */
+    set clipboardTarget(value) {
+        if (isDevMode()) {
+            this.zone.onStable.pipe(take(1)).subscribe(() => {
+                if (value === 'activeCell' && !(this.host.navigable.length)) {
+                    console.warn(ClipboardErrorMessages.clipboardTarget.activeCellNavigable);
+                }
+                else if (value === 'selectionStart' && !(this.host.selectable || this.host.selectionDirective)) {
+                    console.warn(ClipboardErrorMessages.selectionStartSelectable);
+                }
+                else if (!isPresent(value)) {
+                    console.warn(ClipboardErrorMessages.clipboardTarget);
+                }
+            });
+        }
+        this._target = value;
+    }
+    get clipboardTarget() {
+        return this._target;
+    }
+    /**
+     * The `GridClipboardDirective` settings.
+     *
+     * @default { wholeRow: false, copyHeaders: false copy: true, cut: true, paste: true }
+     */
+    set clipboardSettings(value) {
+        this._clipboardSettings = Object.assign({}, this._clipboardSettings, value);
+    }
+    get clipboardSettings() {
+        return this._clipboardSettings;
+    }
+    ngAfterViewInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        if (isDevMode() && !isPresent(this.clipboardTarget)) {
+            console.warn(ClipboardErrorMessages.clipboardTarget);
+        }
+        // needed due to the following issue in Chrome
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1156117&q=focus%20programmatically%20paste&can=2
+        this.subs.add(this.renderer.listen(document, 'copy', (args) => this.onClipboard('copy', args)));
+        this.subs.add(this.renderer.listen(document, 'cut', (args) => this.onClipboard('cut', args)));
+        this.subs.add(this.renderer.listen(document, 'paste', (args) => this.onClipboard('paste', args)));
+    }
+    ngOnChanges(changes) {
+        if (changes['clipboardTarget'] && isDevMode() && !isPresent(changes['clipboardTarget'].currentValue)) {
+            console.warn(ClipboardErrorMessages.clipboardTarget);
+        }
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+}
+GridClipboardDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridClipboardDirective, deps: [{ token: i1.GridComponent }, { token: i2.ClipboardService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+GridClipboardDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridClipboardDirective, selector: "[kendoGridClipboard]", inputs: { clipboardTarget: "clipboardTarget", clipboardSettings: "clipboardSettings" }, outputs: { clipboard: "clipboard" }, providers: [ClipboardService], exportAs: ["kendoGridClipboard"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridClipboardDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridClipboard]',
+                    exportAs: 'kendoGridClipboard',
+                    providers: [ClipboardService]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.ClipboardService }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { clipboardTarget: [{
+                type: Input
+            }], clipboardSettings: [{
+                type: Input
+            }], clipboard: [{
+                type: Output
+            }] } });