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

package/fesm2020/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) : [{ ...item }];
 /**
  * @hidden
  */
@@ -2262,9 +2262,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
@@ -4328,19 +4327,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)));
@@ -4371,6 +4366,8 @@ 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));
             }
@@ -4415,6 +4412,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;
@@ -4451,20 +4450,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
@@ -4507,8 +4500,8 @@ 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/'
 };
 
@@ -6836,12 +6829,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 = 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));
@@ -6855,56 +6848,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;
@@ -7981,7 +8001,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </kendo-numerictextbox>
         {{textFor('pagerOf')}} {{totalPages}}
      </span>
-    `, isInline: true, components: [{ type: i3$1.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: PagerInputDirective, selector: "[kendoGridPagerInput]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: i3$1.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: PagerInputDirective, selector: "[kendoGridPagerInput]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -10421,7 +10441,7 @@ NumericFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 </kendo-numerictextbox-messages>
             </kendo-numerictextbox>
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i3$1.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$1.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i3$1.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$1.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: 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: [{
@@ -14545,7 +14565,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-numerictextbox-messages>
             </kendo-numerictextbox>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i3$1.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$1.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i3$1.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$1.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: 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: [{
@@ -17166,7 +17186,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i3$1.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: i4$3.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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.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": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i3$1.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: i4$3.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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.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": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -23798,7 +23818,7 @@ AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [value]="currentFilter?.value">
             </kendo-autocomplete>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i1$4.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: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i1$4.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: 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: [{
@@ -26595,6 +26615,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,
@@ -26604,7 +26625,7 @@ 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;
@@ -26618,10 +26639,10 @@ 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) => {
@@ -26644,28 +26665,31 @@ 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;
@@ -26678,14 +26702,11 @@ class GridClipboardDirective {
         };
     }
     /**
-     * Determines the target of the clipboard operation. The possible options are:
-     * - `activeCell`&mdash;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`&mdash;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()) {
@@ -26693,11 +26714,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);
                 }
             });
         }
@@ -26721,26 +26739,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: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "14.4.0-develop.17",
+  "version": "14.4.0-develop.19",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -33,25 +33,25 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.19.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "14.4.0-develop.17",
-    "@progress/kendo-angular-common": "14.4.0-develop.17",
-    "@progress/kendo-angular-dateinputs": "14.4.0-develop.17",
-    "@progress/kendo-angular-layout": "14.4.0-develop.17",
-    "@progress/kendo-angular-dropdowns": "14.4.0-develop.17",
-    "@progress/kendo-angular-excel-export": "14.4.0-develop.17",
-    "@progress/kendo-angular-icons": "14.4.0-develop.17",
-    "@progress/kendo-angular-inputs": "14.4.0-develop.17",
-    "@progress/kendo-angular-intl": "14.4.0-develop.17",
-    "@progress/kendo-angular-l10n": "14.4.0-develop.17",
-    "@progress/kendo-angular-label": "14.4.0-develop.17",
-    "@progress/kendo-angular-pdf-export": "14.4.0-develop.17",
-    "@progress/kendo-angular-popup": "14.4.0-develop.17",
-    "@progress/kendo-angular-utils": "14.4.0-develop.17",
+    "@progress/kendo-angular-buttons": "14.4.0-develop.19",
+    "@progress/kendo-angular-common": "14.4.0-develop.19",
+    "@progress/kendo-angular-dateinputs": "14.4.0-develop.19",
+    "@progress/kendo-angular-layout": "14.4.0-develop.19",
+    "@progress/kendo-angular-dropdowns": "14.4.0-develop.19",
+    "@progress/kendo-angular-excel-export": "14.4.0-develop.19",
+    "@progress/kendo-angular-icons": "14.4.0-develop.19",
+    "@progress/kendo-angular-inputs": "14.4.0-develop.19",
+    "@progress/kendo-angular-intl": "14.4.0-develop.19",
+    "@progress/kendo-angular-l10n": "14.4.0-develop.19",
+    "@progress/kendo-angular-label": "14.4.0-develop.19",
+    "@progress/kendo-angular-pdf-export": "14.4.0-develop.19",
+    "@progress/kendo-angular-popup": "14.4.0-develop.19",
+    "@progress/kendo-angular-utils": "14.4.0-develop.19",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "14.4.0-develop.17",
+    "@progress/kendo-angular-schematics": "14.4.0-develop.19",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/schematics/ngAdd/index.js

@@ -4,13 +4,13 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'GridModule', package: 'grid', peerDependencies: {
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '14.4.0-develop.17',
+            '@progress/kendo-angular-treeview': '14.4.0-develop.19',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '14.4.0-develop.17',
+            '@progress/kendo-angular-dialog': '14.4.0-develop.19',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^2.0.0',
             // peer dependency of kendo-angular-layout
-            '@progress/kendo-angular-progressbar': '14.4.0-develop.17'
+            '@progress/kendo-angular-progressbar': '14.4.0-develop.19'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/selection/marquee.directive.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { DomEventsService } from './../common/dom-events.service';
+import { ElementRef, Renderer2 } from '@angular/core';
 import { DraggableDirective } from '@progress/kendo-angular-common';
 import { SelectionService } from './selection.service';
 import { CellSelectionService } from './cell-selection.service';
@@ -15,15 +16,15 @@ export declare class GridMarqueeDirective {
     private selection;
     private cellSelection;
     private domEvents;
-    get webkitUserSelection(): string;
-    get userSelection(): boolean;
+    private host;
+    private renderer;
     private pressArgs;
     private marqueeElement;
     private pressTarget;
     private subscriptions;
     private selectionStarted;
     private dragEndSubscription;
-    constructor(draggable: DraggableDirective, selection: SelectionService, cellSelection: CellSelectionService, domEvents: DomEventsService);
+    constructor(draggable: DraggableDirective, selection: SelectionService, cellSelection: CellSelectionService, domEvents: DomEventsService, host: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
     ngOnDestroy(): void;
     private start;