Merge pull request #5386 from IgniteUI/rkaraivanov/grid-clipboard-master

feat(igx-grid): Copy into clipboard behavior

Author: zdrawku

projects/igniteui-angular/src/lib/core/grid-selection.ts

@@ -371,11 +371,14 @@ export class IgxGridSelectionService {
         }
     }
 
-    keyboardStateOnFocus(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>): void {
+    keyboardStateOnFocus(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>, dom): void {
         const kbState = this.keyboardState;
 
         // Focus triggered by keyboard navigation
         if (kbState.active) {
+            if (isChromium()) {
+                this._moveSelectionChrome(dom);
+            }
             // Start generating a range if shift is hold
             if (kbState.shift) {
                 this.dragSelect(node, kbState);
@@ -525,6 +528,11 @@ export class IgxGridSelectionService {
         }
     }
 
+    /**
+     * (╯°□°）╯︵ ┻━┻
+     * Chrome and Chromium don't care about the active
+     * range after keyboard navigation, thus this.
+     */
     _moveSelectionChrome(node: Node) {
         const selection = window.getSelection();
         selection.removeAllRanges();
@@ -534,3 +542,7 @@ export class IgxGridSelectionService {
         selection.addRange(range);
     }
 }
+
+export function isChromium(): boolean {
+    return (/Chrom|e?ium/g.test(navigator.userAgent) || /Google Inc/g.test(navigator.vendor)) && !/Edge/g.test(navigator.userAgent);
+}

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -1,5 +1,5 @@
 <ng-template #defaultCell>
-    <div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
+    <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
         [row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
         class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -520,8 +520,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     protected isInCompositionMode = false;
     protected compositionStartHandler;
     protected compositionEndHandler;
-    protected focusHandlerIE;
-    protected focusOut;
     private _highlight: IgxTextHighlightDirective;
 
 
@@ -552,12 +550,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
                 // Hitting Enter with IME submits and exits from edit mode instead of first closing the IME dialog
                 this.nativeElement.addEventListener('compositionstart', this.compositionStartHandler);
                 this.nativeElement.addEventListener('compositionend', this.compositionEndHandler);
-
-                // https://stackoverflow.com/q/51404782
-                this.focusHandlerIE = (e: FocusEvent) => this.onFocus(e);
-                this.focusOut = () => this.onBlur();
-                this.nativeElement.addEventListener('focusin', this.focusHandlerIE);
-                this.nativeElement.addEventListener('focusout', this.focusOut);
             }
         });
     }
@@ -575,8 +567,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             if (isIE()) {
                 this.nativeElement.removeEventListener('compositionstart', this.compositionStartHandler);
                 this.nativeElement.removeEventListener('compositionend', this.compositionEndHandler);
-                this.nativeElement.removeEventListener('focusin', this.focusHandlerIE);
-                this.nativeElement.removeEventListener('focusout', this.focusOut);
             }
         });
     }
@@ -792,7 +782,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         }
 
         this.selectionService.primaryButton = true;
-        this.selectionService.keyboardStateOnFocus(node, this.grid.onRangeSelection);
+        this.selectionService.keyboardStateOnFocus(node, this.grid.onRangeSelection, this.nativeElement);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -30,7 +30,7 @@ import {
 import { Subject } from 'rxjs';
 import { takeUntil, first, filter } from 'rxjs/operators';
 import { IgxSelectionAPIService } from '../core/selection';
-import { cloneArray, isEdge, isNavigationKey, CancelableEventArgs, flatten, mergeObjects } from '../core/utils';
+import { cloneArray, isEdge, isNavigationKey, CancelableEventArgs, flatten, mergeObjects, isIE } from '../core/utils';
 import { DataType } from '../data-operations/data-util';
 import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
@@ -91,6 +91,7 @@ import { IgxGridFilteringRowComponent } from './filtering/grid-filtering-row.com
 import { IgxDragIndicatorIconDirective } from './row-drag.directive';
 import { IgxDragDirective } from '../directives/dragdrop/dragdrop.directive';
 import { DeprecateProperty } from '../core/deprecateDecorators';
+import { CharSeparatedValueData } from '../services/csv/char-separated-value-data';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -104,6 +105,11 @@ const MIN_ROW_EDITING_COUNT_THRESHOLD = 2;
 
 export const IgxGridTransaction = new InjectionToken<string>('IgxGridTransaction');
 
+export interface IGridClipboardEvent {
+    data: any[];
+    cancel: boolean;
+}
+
 export interface IGridCellEventArgs {
     cell: IgxGridCellComponent;
     event: Event;
@@ -1519,6 +1525,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @Output()
     public onRowDragEnd = new EventEmitter<IRowDragEndEventArgs>();
 
+    /**
+     * Emitted when a copy operation is executed.
+     * Fired only if copy behavior is enabled through the [`clipboardOptions`]{@link IgxGridBaseComponent#clipboardOptions}.
+     */
+    @Output()
+    onGridCopy = new EventEmitter<IGridClipboardEvent>();
+
     /**
      * @hidden
      */
@@ -2297,6 +2310,29 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Controls the copy behavior of the grid.
+     */
+    @Input()
+    clipboardOptions = {
+        /**
+         * Enables/disables the copy behavior
+         */
+        enabled: true,
+        /**
+         * Include the columns headers in the clipboard output.
+         */
+        copyHeaders: true,
+        /**
+         * Apply the columns formatters (if any) on the data in the clipboard output.
+         */
+        copyFormatters: true,
+        /**
+         * The separator used for formatting the copy output. Defaults to `\t`.
+         */
+        separator: '\t'
+    };
+
     /**
      * @hidden
      */
@@ -2316,7 +2352,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
     /* End of toolbar related definitions */
 
-    // TODO: Document
+    /**
+     * Emitted when making a range selection either through
+     * drag selection or through keyboard selection.
+     */
     @Output()
     onRangeSelection = new EventEmitter<GridSelectionRange>();
 
@@ -2561,6 +2600,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
     private keydownHandler(event) {
         const key = event.key.toLowerCase();
+        // TODO: Move in a separate handler on the `grid body`.
+        // if (event.ctrlKey && key === 'c' && isIE()) {
+        //     this.copyHandler(null, true);
+        // }
         if ((isNavigationKey(key) && event.keyCode !== 32) || key === 'tab' || key === 'pagedown' || key === 'pageup') {
             event.preventDefault();
             if (key === 'pagedown') {
@@ -4783,7 +4826,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this.selectionService.ranges;
     }
 
-    extractDataFromSelection(source: any[]): any[] {
+
+    protected extractDataFromSelection(source: any[], formatters = false, headers = false): any[] {
         let columnsArray: IgxColumnComponent[];
         let record = {};
         const selectedData = [];
@@ -4801,7 +4845,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                 columnsArray = this.getSelectableColumnsAt(each);
                 columnsArray.forEach((col) => {
                     if (col) {
-                        record[col.field] = source[row][col.field];
+                        const key = headers ? col.header || col.field : col.field;
+                        record[key] = formatters && col.formatter ? col.formatter(source[row][col.field])
+                        : source[row][col.field];
                     }
                 });
             }
@@ -4828,10 +4874,15 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
-    getSelectedData() {
+    /**
+     *
+     * Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`.
+     * If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any).
+     * If `headers` is enabled, it will use the column header (if any) instead of the column field.
+     */
+    getSelectedData(formatters = false, headers = false) {
         const source = this.verticalScrollContainer.igxForOf;
-
-        return this.extractDataFromSelection(source);
+        return this.extractDataFromSelection(source, formatters, headers);
     }
 
     /**
@@ -4855,14 +4906,57 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    // @HostListener('scroll', ['$event'])
     public scrollHandler(event) {
         this.parentVirtDir.getHorizontalScroll().scrollLeft += event.target.scrollLeft;
         this.verticalScrollContainer.getVerticalScroll().scrollTop += event.target.scrollTop;
         event.target.scrollLeft = 0;
         event.target.scrollTop = 0;
     }
 
+    copyHandlerIE() {
+        if (isIE()) {
+            this.copyHandler(null, true);
+        }
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public copyHandler(event, ie11 = false) {
+        if (!this.clipboardOptions.enabled || this.crudService.inEditMode) {
+            return;
+        }
+
+        const data = this.getSelectedData(this.clipboardOptions.copyFormatters, this.clipboardOptions.copyHeaders);
+        const ev = { data, cancel: false } as IGridClipboardEvent;
+        this.onGridCopy.emit(ev);
+
+        if (ev.cancel) {
+             return;
+        }
+
+        const transformer = new CharSeparatedValueData(ev.data, this.clipboardOptions.separator);
+        let result = transformer.prepareData();
+
+        if (!this.clipboardOptions.copyHeaders) {
+            result = result.substring(result.indexOf('\n') + 1);
+        }
+
+        if (ie11) {
+            (window as any).clipboardData.setData('Text', result);
+            return;
+        }
+
+        event.preventDefault();
+
+        /* Necessary for the hiearachical case but will probably have to
+           change how getSelectedData is propagated in the hiearachical grid
+        */
+        event.stopPropagation();
+        event.clipboardData.setData('text/plain', result);
+    }
+
     /**
      * This method allows you to navigate to a position
      * in the grid based on provided `rowindex` and `visibleColumnIndex`,