@progress/kendo-angular-grid 14.4.0-develop.18 → 14.4.0-develop.19

package/fesm2015/progress-kendo-angular-grid.mjs

@@ -169,7 +169,7 @@ const replaceMessagePlaceholder = (message, name, value) => message.replace(new
 /**
  * @hidden
  */
-const recursiveFlatMap = (item) => isGroupResult(item) ? item.items.flatMap(recursiveFlatMap) : [item];
+const recursiveFlatMap = (item) => isGroupResult(item) ? item.items.flatMap(recursiveFlatMap) : [Object.assign({}, item)];
 /**
  * @hidden
  */
@@ -463,9 +463,8 @@ const ColumnMenuErrorMessages = {
  * @hidden
  */
 const ClipboardErrorMessages = {
-    clipboardTarget: 'The "clipboardTarget" option must be set for the ClipboardDirective to function as designed.',
     activeCellNavigable: 'Grid must be navigable to use "activeCell" as clipboard target type.',
-    selectionStartSelectable: 'Grid must be selectable to use "selectionStart" as clipboard target type.'
+    selectionSelectable: 'Grid must be selectable to use "selection" as clipboard target type.'
 };
 /**
  * @hidden
@@ -4360,19 +4359,15 @@ const offsets = {
  * @hidden
  */
 class GridMarqueeDirective {
-    constructor(draggable, selection, cellSelection, domEvents) {
+    constructor(draggable, selection, cellSelection, domEvents, host, renderer) {
         this.draggable = draggable;
         this.selection = selection;
         this.cellSelection = cellSelection;
         this.domEvents = domEvents;
+        this.host = host;
+        this.renderer = renderer;
         this.selectionStarted = false;
     }
-    get webkitUserSelection() {
-        return (this.cellSelection.enableMarquee || this.selection.enableMarquee) ? 'none' : null;
-    }
-    get userSelection() {
-        return (this.cellSelection.enableMarquee || this.selection.enableMarquee);
-    }
     ngOnInit() {
         this.subscriptions = (this.draggable.kendoPress.subscribe(this.start.bind(this)));
         this.subscriptions.add(this.draggable.kendoDrag.subscribe(this.moveMarquee.bind(this)));
@@ -4403,6 +4398,8 @@ class GridMarqueeDirective {
             const distance = Math.sqrt(Math.pow((args.pageX - press.pageX), 2) + Math.pow((args.pageY - press.pageY), 2));
             if (distance > MINIMAL_DRAG_DISTANCE) {
                 this.selectionStarted = true;
+                this.renderer.addClass(this.host.nativeElement, 'user-select-none');
+                this.renderer.setStyle(this.host.nativeElement, 'user-select', 'none');
                 this.dragEndSubscription = merge(this.domEvents.cellMouseup.pipe(take(1)), this.draggable.kendoRelease.pipe(delay(1), take(1)))
                     .subscribe(this.endSelection.bind(this));
             }
@@ -4447,6 +4444,8 @@ class GridMarqueeDirective {
         if (this.dragEndSubscription) {
             this.dragEndSubscription.unsubscribe();
         }
+        this.renderer.removeClass(this.host.nativeElement, 'user-select-none');
+        this.renderer.removeStyle(this.host.nativeElement, 'user-select');
         this.dragEndSubscription = null;
         this.pressTarget = null;
         this.pressArgs = null;
@@ -4483,20 +4482,14 @@ class GridMarqueeDirective {
         return null;
     }
 }
-GridMarqueeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMarqueeDirective, deps: [{ token: i1$1.DraggableDirective }, { token: SelectionService }, { token: CellSelectionService }, { token: DomEventsService }], target: i0.ɵɵFactoryTarget.Directive });
-GridMarqueeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]", host: { properties: { "style.-webkit-user-select": "this.webkitUserSelection", "class.user-select-none": "this.userSelection" } }, ngImport: i0 });
+GridMarqueeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMarqueeDirective, deps: [{ token: i1$1.DraggableDirective }, { token: SelectionService }, { token: CellSelectionService }, { token: DomEventsService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+GridMarqueeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMarqueeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridSelectionMarquee]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective }, { type: SelectionService }, { type: CellSelectionService }, { type: DomEventsService }]; }, propDecorators: { webkitUserSelection: [{
-                type: HostBinding,
-                args: ['style.-webkit-user-select']
-            }], userSelection: [{
-                type: HostBinding,
-                args: ['class.user-select-none']
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective }, { type: SelectionService }, { type: CellSelectionService }, { type: DomEventsService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
 
 /**
  * @hidden
@@ -4539,8 +4532,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1706281568,
-    version: '14.4.0-develop.18',
+    publishDate: 1706287616,
+    version: '14.4.0-develop.19',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -6883,12 +6876,12 @@ class ClipboardService {
             gridItems: [],
             dataString: ''
         };
+        const fieldCols = columns.flatMap(c => c instanceof ColumnComponent && isPresent$1(c.field) ? [c] : []);
+        const clipboardData = { items: [], dataStrings: [] };
+        const colFields = fieldCols.map(c => c.field);
         if (options.wholeRow) {
-            const fieldCols = columns.flatMap(c => c instanceof ColumnComponent && isPresent$1(c.field) ? [c] : []);
             this.targetColField = (_a = fieldCols[0]) === null || _a === void 0 ? void 0 : _a.field;
             this.targetRowIndex = data[0].dataRowIndex;
-            const clipboardData = { items: [], dataStrings: [] };
-            const colFields = fieldCols.map(c => c.field);
             data.forEach(item => {
                 clipboardData.items.push({ dataItem: Object.assign({}, item.dataItem), fields: colFields });
                 clipboardData.dataStrings.push(this.itemToString(item.dataItem, fieldCols));
@@ -6902,56 +6895,83 @@ class ClipboardService {
             };
         }
         else {
-            const { tabular, groups } = this.groupSelection();
-            const selectionDirective = this.contextService.grid.selectionDirective;
-            const colIdentifier = selectionDirective.columnKey;
-            if (tabular) {
-                const selectionKeys = groups[0].items.map(item => item.columnKey);
-                const selectedFieldCols = columns.flatMap((c, i) => (c instanceof ColumnComponent && c.field) && selectionKeys.find(k => typeof colIdentifier === 'function' ? k === colIdentifier(c, i) : k === i) ? [c] : []);
-                const selectedColFields = selectedFieldCols.map(c => c.field);
-                this.targetColField = selectedColFields[0];
-                result.dataString = data.flatMap(item => {
-                    const itemString = this.itemToString(item.dataItem, selectedFieldCols);
-                    const existingItem = isPresent$1(itemString);
-                    if (!isPresent$1(this.targetRowIndex) && isPresent$1(itemString)) {
-                        this.targetRowIndex = item.dataRowIndex;
-                    }
-                    result.gridItems.push({
-                        dataItem: item.dataItem,
-                        fields: selectedColFields
-                    });
-                    return existingItem ? [itemString] : [];
-                }).join(`\r\n`);
-                if (options.copyHeaders) {
-                    result.dataString = this.addHeaders(result.dataString, selectedFieldCols);
-                }
-            }
-            else { // split per row (uneven rows)
-                const rowIdentifier = selectionDirective.selectionKey;
-                result.dataString = data.flatMap(item => {
-                    // determine cols per item
-                    const key = rowIdentifier ?
-                        typeof rowIdentifier === 'string' ? item.dataItem[rowIdentifier] : rowIdentifier({ index: item.dataRowIndex, dataItem: item.dataItem }) :
-                        item.dataRowIndex;
-                    const selectionKeys = groups.find(gr => gr.value === key).items.map(item => item.columnKey);
+            if (options.target === 'selection') {
+                const { tabular, groups } = this.groupSelection();
+                const selectionDirective = this.contextService.grid.selectionDirective;
+                const colIdentifier = selectionDirective.columnKey;
+                if (tabular) {
+                    const selectionKeys = groups[0].items.map(item => item.columnKey);
                     const selectedFieldCols = columns.flatMap((c, i) => (c instanceof ColumnComponent && c.field) && selectionKeys.find(k => typeof colIdentifier === 'function' ? k === colIdentifier(c, i) : k === i) ? [c] : []);
                     const selectedColFields = selectedFieldCols.map(c => c.field);
-                    if (!this.targetColField) {
-                        this.targetColField = selectedColFields[0];
-                    }
-                    const itemString = this.itemToString(item.dataItem, selectedFieldCols);
-                    const existingItem = isPresent$1(itemString);
-                    if (!isPresent$1(this.targetRowIndex) && existingItem) {
-                        this.targetRowIndex = item.dataRowIndex;
-                    }
-                    if (existingItem) {
+                    this.targetColField = selectedColFields[0];
+                    result.dataString = data.flatMap(item => {
+                        const itemString = this.itemToString(item.dataItem, selectedFieldCols);
+                        const existingItem = isPresent$1(itemString);
+                        if (!isPresent$1(this.targetRowIndex) && isPresent$1(itemString)) {
+                            this.targetRowIndex = item.dataRowIndex;
+                        }
+                        if (options.operationType === 'cut') {
+                            selectedColFields.forEach(f => item.dataItem[f] = null);
+                        }
                         result.gridItems.push({
                             dataItem: item.dataItem,
                             fields: selectedColFields
                         });
+                        return existingItem ? [itemString] : [];
+                    }).join(`\r\n`);
+                    if (options.copyHeaders) {
+                        result.dataString = this.addHeaders(result.dataString, selectedFieldCols);
                     }
-                    return existingItem ? options.copyHeaders ? [this.addHeaders(itemString, selectedFieldCols)] : [itemString] : [];
-                }).join(`\r\n`);
+                }
+                else { // split per row (uneven rows)
+                    const rowIdentifier = selectionDirective.selectionKey;
+                    result.dataString = data.flatMap(item => {
+                        // determine cols per item
+                        const key = rowIdentifier ?
+                            typeof rowIdentifier === 'string' ? item.dataItem[rowIdentifier] : rowIdentifier({ index: item.dataRowIndex, dataItem: item.dataItem }) :
+                            item.dataRowIndex;
+                        const selectionKeys = groups.find(gr => gr.value === key).items.map(item => item.columnKey);
+                        const selectedFieldCols = columns.flatMap((c, i) => (c instanceof ColumnComponent && c.field) && selectionKeys.find(k => typeof colIdentifier === 'function' ? k === colIdentifier(c, i) : k === i) ? [c] : []);
+                        const selectedColFields = selectedFieldCols.map(c => c.field);
+                        if (!this.targetColField) {
+                            this.targetColField = selectedColFields[0];
+                        }
+                        const itemString = this.itemToString(item.dataItem, selectedFieldCols);
+                        const existingItem = isPresent$1(itemString);
+                        if (!isPresent$1(this.targetRowIndex) && existingItem) {
+                            this.targetRowIndex = item.dataRowIndex;
+                        }
+                        if (existingItem) {
+                            if (options.operationType === 'cut') {
+                                selectedColFields.forEach(f => item.dataItem[f] = null);
+                            }
+                            result.gridItems.push({
+                                dataItem: item.dataItem,
+                                fields: selectedColFields
+                            });
+                        }
+                        return existingItem ? options.copyHeaders ? [this.addHeaders(itemString, selectedFieldCols)] : [itemString] : [];
+                    }).join(`\r\n`);
+                }
+            }
+            else {
+                const item = data[0];
+                const col = columns[item.colIndex];
+                const colField = col.field;
+                const title = col.title;
+                const copiedData = item.dataItem[colField];
+                this.targetRowIndex = item.dataRowIndex;
+                this.targetColField = colField;
+                if (options.operationType === 'cut' && colField) {
+                    item.dataItem[colField] = null;
+                }
+                result = {
+                    gridItems: [{
+                            dataItem: item.dataItem,
+                            fields: colField ? [colField] : []
+                        }],
+                    dataString: options.copyHeaders ? [title || colField, copiedData].join(`\r\n`) : colField ? copiedData : ``
+                };
             }
         }
         return result;
@@ -26700,6 +26720,7 @@ class GridClipboardDirective {
          * Fires when the user performs `cut`, `copy` or `paste` action within the Grid content area.
          */
         this.clipboard = new EventEmitter();
+        this._target = 'selection';
         this._clipboardSettings = {
             wholeRow: false,
             copyHeaders: false,
@@ -26710,7 +26731,7 @@ class GridClipboardDirective {
         this.subs = new Subscription();
         this.onClipboard = (operationType, args) => {
             var _a, _b;
-            if (!this.inGrid(args) || !this.clipboardSettings[operationType]) {
+            if (!this.clipboardSettings[operationType] || !this.inGrid(args)) {
                 return;
             }
             const gridData = Array.isArray(this.host.data) ? this.host.data : this.host.data.data;
@@ -26724,10 +26745,10 @@ class GridClipboardDirective {
                 case 'activeCell':
                     {
                         const targetCell = Object.assign({}, this.host.activeCell);
-                        clipboardData = targetCell && [{ dataItem: targetCell.dataItem, dataRowIndex: targetCell.dataRowIndex }];
+                        clipboardData = targetCell && [{ dataItem: targetCell.dataItem, dataRowIndex: targetCell.dataRowIndex, colIndex: targetCell.colIndex }];
                     }
                     break;
-                case 'selectionStart':
+                case 'selection':
                     {
                         const identifier = selectionDirective.selectionKey;
                         clipboardData = gridDataItems.flatMap((item, index) => {
@@ -26750,28 +26771,32 @@ class GridClipboardDirective {
             const data = isPaste ?
                 {
                     dataString: pastedData,
-                    gridItems: this.clipboardService.getGridData(pastedData, visibleCols, this.clipboardTarget, clipboardData[0].dataRowIndex, {
+                    gridItems: this.clipboardService.getGridData(pastedData, visibleCols, this.clipboardTarget, (_b = clipboardData[0]) === null || _b === void 0 ? void 0 : _b.dataRowIndex, {
                         wholeRow: this.clipboardSettings.wholeRow,
                         isCellSelection
                     })
                 } :
                 this.clipboardService.createClipboardData(clipboardData || [], visibleCols, {
-                    wholeRow: this.clipboardSettings.wholeRow || !isCellSelection,
+                    wholeRow: this.clipboardSettings.wholeRow || (this.clipboardTarget === 'selection' && !isCellSelection),
+                    target: this.clipboardTarget,
                     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: (_b = clipboardData.find(item => item.dataRowIndex === this.clipboardService.targetRowIndex)) === null || _b === void 0 ? void 0 : _b.dataItem
-                    }
+                this.zone.run(() => {
+                    var _a;
+                    this.clipboard.emit({
+                        type: operationType,
+                        originalEvent: args,
+                        clipboardData: data.dataString,
+                        gridData: data.gridItems,
+                        target: {
+                            dataRowIndex: this.clipboardService.targetRowIndex,
+                            colField: this.clipboardService.targetColField,
+                            dataItem: (_a = clipboardData.find(item => item.dataRowIndex === this.clipboardService.targetRowIndex)) === null || _a === void 0 ? void 0 : _a.dataItem
+                        }
+                    });
                 });
             }
             this.clipboardService.targetColField = this.clipboardService.targetRowIndex = null;
@@ -26784,14 +26809,11 @@ class GridClipboardDirective {
         };
     }
     /**
-     * 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.
+     * Determines the target of the clipboard operation ([see example]({% slug clipboard_grid %}#toc-clipboard-target)). The possible options are:
+     * - `activeCell`
+     * - `selection`
      *
-     * 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.
+     * @default 'selection'
      */
     set clipboardTarget(value) {
         if (isDevMode()) {
@@ -26799,11 +26821,8 @@ class GridClipboardDirective {
                 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);
+                else if (value === 'selection' && !(this.host.selectable || this.host.selectionDirective)) {
+                    console.warn(ClipboardErrorMessages.selectionSelectable);
                 }
             });
         }
@@ -26827,26 +26846,23 @@ class GridClipboardDirective {
         if (!isDocumentAvailable()) {
             return;
         }
-        if (isDevMode() && !isPresent(this.clipboardTarget)) {
-            console.warn(ClipboardErrorMessages.clipboardTarget);
+        if (this.clipboardTarget === 'selection' && !(this.host.selectable || this.host.selectionDirective)) {
+            console.warn(ClipboardErrorMessages.selectionSelectable);
         }
         // 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);
-        }
+        this.zone.runOutsideAngular(() => {
+            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)));
+        });
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
 }
 GridClipboardDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridClipboardDirective, deps: [{ token: GridComponent }, { token: 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 });
+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"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridClipboardDirective, decorators: [{
             type: Directive,
             args: [{