[ACS-8468] Add copy functionality to date and selection label

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -1,12 +1,16 @@
 <div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty || !editable }">
     @if (!property.multivalued) {
-        <mat-form-field class="adf-property-field adf-dateitem-editable" [floatLabel]="property.default ? 'always' : null">
+        <mat-form-field 
+            class="adf-property-field adf-dateitem-editable" 
+            [floatLabel]="property.default ? 'always' : null"
+            (dblclick)="copyToClipboard(property.displayValue)"
+            [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+            [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+        >
             <mat-label
                 class="adf-property-label"
-                [attr.data-automation-id]="'card-dateitem-label-' + property.key"
                 [attr.for]="'card-view-dateitem-' + property.key"
                 [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }"
-                [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
             >
                 {{ property.label | translate }}
             </mat-label>

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -219,7 +219,7 @@ describe('CardViewDateItemComponent', () => {
         component.editable = false;
         fixture.detectChanges();
 
-        testingUtils.doubleClickByDataAutomationId('datepicker-label-toggle-' + component.property.key);
+        testingUtils.doubleClickByDataAutomationId('card-dateitem-label-' + component.property.key);
 
         fixture.detectChanges();
         expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Jul 10, 2017', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html

@@ -2,9 +2,13 @@
     <div [ngSwitch]="templateType">
         <div *ngSwitchDefault>
             <div class="adf-property-field">
-                <mat-form-field class="adf-property-value">
+                <mat-form-field 
+                    class="adf-property-value"
+                    (dblclick)="copyToClipboard(property.displayValue)"
+                    [attr.data-automation-id]="'card-select-label-' + property.key"
+                    [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                >
                     <mat-label
-                        [attr.data-automation-id]="'card-select-label-' + property.key"
                         class="adf-property-label"
                         [ngClass]="{
                             'adf-property-value-editable': isEditable,

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts

@@ -29,6 +29,7 @@ import { DebugElement, SimpleChange, SimpleChanges } from '@angular/core';
 import { CardViewPropertyValidatorDirective } from '../../directives/card-view-property-validator.directive';
 import { MatError } from '@angular/material/form-field';
 import { FormControl, NgModel } from '@angular/forms';
+import { ClipboardService } from '../../../clipboard/clipboard.service';
 
 describe('CardViewSelectItemComponent', () => {
     let loader: HarnessLoader;
@@ -192,6 +193,28 @@ describe('CardViewSelectItemComponent', () => {
         });
     });
 
+    describe('Clickable', () => {
+        it('should copy value to clipboard on double click', async () => {
+            const clipboardService = TestBed.inject(ClipboardService);
+            spyOn(clipboardService, 'copyContentToClipboard');
+
+            component.property = new CardViewSelectItemModel({
+                ...mockDefaultProps,
+                editable: true
+            });
+
+            component.editable = true;
+            component.copyToClipboardAction = true;
+            component.ngOnChanges({});
+            fixture.detectChanges();
+
+            testingUtils.doubleClickByDataAutomationId(`card-select-label-${component.property.key}`);
+            fixture.detectChanges();
+
+            expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Two', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
+        });
+    });
+
     describe('Filter', () => {
         it('should render a list of filtered options', async () => {
             appConfig.config['content-metadata'] = {

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.ts

@@ -17,7 +17,7 @@
 
 import { Component, Input, OnChanges, OnInit, inject, ViewEncapsulation, SimpleChanges, DestroyRef } from '@angular/core';
 import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, isObservable, Observable } from 'rxjs';
 import { CardViewSelectItemOption } from '../../interfaces/card-view.interfaces';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { BaseCardView } from '../base-card-view';
@@ -35,6 +35,8 @@ import { CardViewPropertyValidatorDirective } from '../../directives/card-view-p
 import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
 import { ENTER } from '@angular/cdk/keycodes';
 import { IconModule } from '../../../icon/icon.module';
+import { ClipboardService } from '../../../clipboard/clipboard.service';
+import { TranslationService } from '../../../translation/translation.service';
 
 @Component({
     selector: 'adf-card-view-selectitem',
@@ -61,6 +63,9 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
     static HIDE_FILTER_LIMIT = 5;
     readonly separatorKeysCodes = [ENTER] as const;
 
+    private readonly clipboardService = inject(ClipboardService);
+    private readonly translateService = inject(TranslationService);
+
     @Input() options$: Observable<CardViewSelectItemOption<string | number>[]>;
 
     @Input()
@@ -69,6 +74,9 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
     @Input()
     displayEmpty: boolean = true;
 
+    @Input()
+    copyToClipboardAction = true;
+
     filter$ = new BehaviorSubject<string>('');
     showInputFilter: boolean = false;
     list$: Observable<CardViewSelectItemOption<string | number>[]> = null;
@@ -186,6 +194,18 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
         }
     }
 
+    copyToClipboard(valueToCopy: string | string[] | Observable<string>) {
+        if (isObservable(valueToCopy)) {
+            valueToCopy.pipe(take(1)).subscribe((value) => {
+                const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
+                this.clipboardService.copyContentToClipboard(value, clipboardMessage);
+            });
+        } else if (typeof valueToCopy === 'string') {
+            const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
+            this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
+        }
+    }
+
     get showProperty(): boolean {
         return this.displayEmpty || !this.property.isEmpty();
     }