[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/datatable/components/datatable/datatable-cell.component.ts

@@ -35,13 +35,21 @@ import { Node } from '@alfresco/js-api';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container>
+            <span *ngIf="copyContent; else defaultCell"
+                adf-clipboard="DATATABLE.CLICK_TO_COPY"
+                [clipboard-notification]="'DATATABLE.SUCCESS_COPY'"
+                [attr.aria-label]="value$ | async"
+                [title]="tooltip"
+                class="adf-datatable-cell-value"
+                >{{ value$ | async }}</span>
+        </ng-container>
+        <ng-template #defaultCell>
             <span
                 [attr.aria-label]="value$ | async"
                 [title]="tooltip"
                 class="adf-datatable-cell-value"
-                >{{ value$ | async }}</span
-            >
-        </ng-container>
+            >{{ value$ | async }}</span>
+        </ng-template>
     `,
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-datatable-cell' }
@@ -58,6 +66,9 @@ export class DataTableCellComponent implements OnInit, OnDestroy {
 
     value$ = new BehaviorSubject<any>('');
 
+    @Input()
+    copyContent: boolean;
+
     @Input()
     tooltip: string;
 
@@ -67,7 +78,6 @@ export class DataTableCellComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         this.updateValue();
-
         this.sub = this.alfrescoApiService.nodeUpdated.subscribe((node: Node) => {
             if (this.row) {
                 const { entry } = this.row['node'];

lib/core/datatable/components/datatable/datatable.component.html

@@ -148,6 +148,7 @@
                             <div *ngSwitchCase="'text'" class="adf-cell-value"
                                  [attr.data-automation-id]="'text_' + data.getValue(row, col)">
                                 <adf-datatable-cell
+                                    [copyContent]="col.copyContent"
                                     [data]="data"
                                     [column]="col"
                                     [row]="row"

lib/core/datatable/components/datatable/datatable.component.scss

@@ -216,6 +216,7 @@
 
             &--text {
                 text-align: left;
+                position: relative;
             }
 
             &--date {

lib/core/datatable/data/data-column.model.ts

@@ -27,4 +27,5 @@ export interface DataColumn {
     cssClass?: string;
     template?: TemplateRef<any>;
     formatTooltip?: Function;
+    copyContent?: boolean;
 }

lib/core/datatable/data/object-datacolumn.model.ts

@@ -29,6 +29,7 @@ export class ObjectDataColumn implements DataColumn {
     srTitle: string;
     cssClass: string;
     template?: TemplateRef<any>;
+    copyContent?: boolean;
 
     constructor(input: any) {
         this.key = input.key;
@@ -39,5 +40,6 @@ export class ObjectDataColumn implements DataColumn {
         this.srTitle = input.srTitle;
         this.cssClass = input.cssClass;
         this.template = input.template;
+        this.copyContent = input.copyContent;
     }
 }

lib/core/datatable/datatable.module.ts

@@ -41,6 +41,7 @@ import { CustomEmptyContentTemplateDirective } from './directives/custom-empty-c
 import { CustomLoadingContentTemplateDirective } from './directives/custom-loading-template.directive';
 import { CustomNoPermissionTemplateDirective } from './directives/custom-no-permission-template.directive';
 import { JsonCellComponent } from './components/datatable/json-cell.component';
+import { ClipboardModule } from '../clipboard/clipboard.module';
 
 @NgModule({
     imports: [
@@ -50,7 +51,8 @@ import { JsonCellComponent } from './components/datatable/json-cell.component';
         TranslateModule.forChild(),
         ContextMenuModule,
         PipeModule,
-        DirectiveModule
+        DirectiveModule,
+        ClipboardModule
     ],
     declarations: [
         DataTableComponent,
@@ -88,5 +90,6 @@ import { JsonCellComponent } from './components/datatable/json-cell.component';
         CustomLoadingContentTemplateDirective,
         CustomNoPermissionTemplateDirective
     ]
+
 })
 export class DataTableModule {}