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

package/common/clipboard-types.d.ts

@@ -5,7 +5,7 @@
 /**
  * Represents the starting point (Grid cell) of the Grid clipboard operations.
  */
-export declare type GridClipboardTargetType = 'selectionStart' | 'activeCell';
+export declare type GridClipboardTargetType = 'selection' | 'activeCell';
 /**
  * The possible values of the Grid [`GridClipboardEvent`]({% slug api_grid_gridclipboardevent %}) `type` property.
  */

package/common/clipboard.directive.d.ts

@@ -2,7 +2,7 @@
 * 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 { AfterViewInit, EventEmitter, NgZone, OnDestroy, Renderer2 } from '@angular/core';
 import { ClipboardService } from './clipboard.service';
 import { GridComponent } from '../grid.component';
 import { GridClipboardTargetType, GridClipboardEvent, GridClipboardSettings } from './clipboard-types';
@@ -11,20 +11,17 @@ 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 {
+export declare class GridClipboardDirective implements 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.
+     * 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: GridClipboardTargetType);
     get clipboardTarget(): GridClipboardTargetType;
@@ -44,7 +41,6 @@ export declare class GridClipboardDirective implements OnChanges, AfterViewInit,
     private subs;
     constructor(host: GridComponent, clipboardService: ClipboardService, renderer: Renderer2, zone: NgZone);
     ngAfterViewInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     private onClipboard;
     private inGrid;

package/esm2020/common/clipboard.directive.mjs

@@ -9,7 +9,7 @@ import { hasObservers, isDocumentAvailable } from '@progress/kendo-angular-commo
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { closest, contains } from '../rendering/common/dom-queries';
-import { isPresent, recursiveFlatMap } from '../utils';
+import { recursiveFlatMap } from '../utils';
 import { ClipboardErrorMessages } from './error-messages';
 import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
@@ -28,6 +28,7 @@ export 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,
@@ -37,7 +38,7 @@ export class GridClipboardDirective {
         };
         this.subs = new Subscription();
         this.onClipboard = (operationType, args) => {
-            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;
@@ -51,10 +52,10 @@ export class GridClipboardDirective {
                 case 'activeCell':
                     {
                         const targetCell = { ...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) => {
@@ -77,28 +78,31 @@ export 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, clipboardData[0]?.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: clipboardData.find(item => item.dataRowIndex === this.clipboardService.targetRowIndex)?.dataItem
-                    }
+                this.zone.run(() => {
+                    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;
@@ -111,14 +115,11 @@ export 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()) {
@@ -126,11 +127,8 @@ export 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);
                 }
             });
         }
@@ -154,26 +152,23 @@ export 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: 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 });
+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: [{

package/esm2020/common/clipboard.service.mjs

@@ -27,12 +27,12 @@ export class ClipboardService {
             gridItems: [],
             dataString: ''
         };
+        const fieldCols = columns.flatMap(c => c instanceof ColumnComponent && isPresent(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(c.field) ? [c] : []);
             this.targetColField = fieldCols[0]?.field;
             this.targetRowIndex = data[0].dataRowIndex;
-            const clipboardData = { items: [], dataStrings: [] };
-            const colFields = fieldCols.map(c => c.field);
             data.forEach(item => {
                 clipboardData.items.push({ dataItem: { ...item.dataItem }, fields: colFields });
                 clipboardData.dataStrings.push(this.itemToString(item.dataItem, fieldCols));
@@ -46,56 +46,83 @@ export 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(itemString);
-                    if (!isPresent(this.targetRowIndex) && isPresent(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(itemString);
-                    if (!isPresent(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(itemString);
+                        if (!isPresent(this.targetRowIndex) && isPresent(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(itemString);
+                        if (!isPresent(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;

package/esm2020/common/error-messages.mjs

@@ -14,9 +14,8 @@ export const ColumnMenuErrorMessages = {
  * @hidden
  */
 export 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

package/esm2020/filtering/cell/autocomplete-filter-cell.component.mjs

@@ -75,7 +75,7 @@ AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [value]="currentFilter?.value">
             </kendo-autocomplete>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i5.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i6.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: i5.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i6.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteFilterCellComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/cell/numeric-filter-cell.component.mjs

@@ -101,7 +101,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-numerictextbox-messages>
             </kendo-numerictextbox>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.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"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterCellComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/menu/numeric-filter-menu-input.component.mjs

@@ -75,7 +75,7 @@ NumericFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 </kendo-numerictextbox-messages>
             </kendo-numerictextbox>
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: i2.FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i3.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i3.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: i4.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: i2.FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i3.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"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { type: i3.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: i4.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1706192885,
-    version: '14.4.0-develop.17',
+    publishDate: 1706287616,
+    version: '14.4.0-develop.19',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager-input.component.mjs

@@ -105,7 +105,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </kendo-numerictextbox>
         {{textFor('pagerOf')}} {{totalPages}}
      </span>
-    `, isInline: true, components: [{ 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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i5.PagerInputDirective, selector: "[kendoGridPagerInput]" }, { type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ 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"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i5.PagerInputDirective, selector: "[kendoGridPagerInput]" }, { type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/rendering/cell.component.mjs

@@ -235,7 +235,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i5.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "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"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i9.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": i11.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i5.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"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { type: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "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"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i9.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": i11.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/selection/marquee.directive.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { DomEventsService } from './../common/dom-events.service';
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
 import { DraggableDirective, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
 import { SelectionService } from './selection.service';
 import { CellSelectionService } from './cell-selection.service';
@@ -37,19 +37,15 @@ const offsets = {
  * @hidden
  */
 export 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)));
@@ -80,6 +76,8 @@ export class GridMarqueeDirective {
             const distance = Math.sqrt((args.pageX - press.pageX) ** 2 + (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));
             }
@@ -124,6 +122,8 @@ export 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;
@@ -160,17 +160,11 @@ export class GridMarqueeDirective {
         return null;
     }
 }
-GridMarqueeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMarqueeDirective, deps: [{ token: i1.DraggableDirective }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i4.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.DraggableDirective }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i4.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.DraggableDirective }, { type: i2.SelectionService }, { type: i3.CellSelectionService }, { type: i4.DomEventsService }]; }, propDecorators: { webkitUserSelection: [{
-                type: HostBinding,
-                args: ['style.-webkit-user-select']
-            }], userSelection: [{
-                type: HostBinding,
-                args: ['class.user-select-none']
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1.DraggableDirective }, { type: i2.SelectionService }, { type: i3.CellSelectionService }, { type: i4.DomEventsService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; } });

package/esm2020/utils.mjs

@@ -132,7 +132,7 @@ export const replaceMessagePlaceholder = (message, name, value) => message.repla
 /**
  * @hidden
  */
-export const recursiveFlatMap = (item) => isGroupResult(item) ? item.items.flatMap(recursiveFlatMap) : [item];
+export const recursiveFlatMap = (item) => isGroupResult(item) ? item.items.flatMap(recursiveFlatMap) : [{ ...item }];
 /**
  * @hidden
  */