[ADF-4272] TaskListCloud - improvements on CopyClipboardDirective (#4547)

* [ADF-4272] DocumentList -  add Copy content tooltip directive

* [ADF-4272] - fix build issue

* [ADF-4272] - change directive name and add requested changes

* [ADF-4272] - reset task-list-cloud html content

* [ADF-4272] - fix build

* [AFG-4272] - change name to CopyClipboard

* [ADF-4272] - PR changes

* [ADF-4272] - fix tests

* [ADF-4272[] - lint

* [ADF-4272] - merge clipboard directive with copy-content directive

* [ADF-4272] - PR changes

* [ADF-4272] - change docs

lib/core/clipboard/clipboard.directive.ts

@@ -15,33 +15,78 @@
  * limitations under the License.
  */
 
-import { Directive, Input, HostListener } from '@angular/core';
+import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, AfterContentInit } from '@angular/core';
 import { ClipboardService } from './clipboard.service';
 
 @Directive({
     selector: '[adf-clipboard]',
     exportAs: 'adfClipboard'
 })
-export class ClipboardDirective {
+export class ClipboardDirective implements AfterContentInit {
     // tslint:disable-next-line:no-input-rename
-    @Input('adf-clipboard') target: HTMLInputElement | HTMLTextAreaElement;
+    @Input('adf-clipboard')
+    placeholder: string;
+
+    @Input()
+    target: HTMLInputElement | HTMLTextAreaElement;
 
     // tslint:disable-next-line:no-input-rename
     @Input('clipboard-notification') message: string;
 
+    private value: string;
+
+    constructor(private clipboardService: ClipboardService,
+                public viewContainerRef: ViewContainerRef,
+                private resolver: ComponentFactoryResolver) {}
+
     @HostListener('click', ['$event'])
     handleClickEvent(event: MouseEvent) {
         event.preventDefault();
+        event.stopPropagation();
         this.copyToClipboard();
     }
 
-    constructor(private clipboardService: ClipboardService) {}
+    @HostListener('mouseenter')
+    showTooltip() {
+        const componentFactory = this.resolver.resolveComponentFactory(ClipboardComponent);
+        const componentRef = this.viewContainerRef.createComponent(componentFactory).instance;
+        componentRef.copyText = this.value;
+        componentRef.placeholder = this.placeholder;
+    }
+
+    @HostListener('mouseleave')
+    closeTooltip() {
+        this.viewContainerRef.remove();
+    }
 
     private copyToClipboard() {
         const isValidTarget = this.clipboardService.isTargetValid(this.target);
 
         if (isValidTarget) {
             this.clipboardService.copyToClipboard(this.target, this.message);
+        } else {
+            this.copyContentToClipboard(this.viewContainerRef.element.nativeElement.innerHTML);
         }
     }
+
+    private copyContentToClipboard(content) {
+        this.clipboardService.copyContentToClipboard(content, this.message);
+    }
+
+    ngAfterContentInit() {
+        setTimeout( () => {
+            this.value = this.viewContainerRef.element.nativeElement.innerHTML;
+        });
+    }
+}
+
+@Component({
+    selector: 'adf-datatable-highlight-tooltip',
+    template: `
+        <span class='adf-datatable-copy-tooltip'>{{ placeholder | translate }} <b> {{ copyText }} </b></span>
+        `
+})
+export class ClipboardComponent {
+    copyText: string;
+    placeholder: string;
 }