* Add Edit icon

demo-shell/src/app/components/card-view/card-view.component.ts

@@ -152,9 +152,14 @@ export class CardViewComponent implements OnInit, OnDestroy {
             }),
             new CardViewArrayItemModel({
                 label: 'CardView Array of items',
-                value: of(['Zlatan', 'Lionel Messi', 'Mohamed', 'Ronaldo']),
+                value: of([
+                    { icon: 'directions_bike', value: 'Zlatan' },
+                    { icon: 'directions_bike', value: 'Lionel Messi'},
+                    { value: 'Mohamed', directions_bike: 'save'},
+                    { value: 'Ronaldo'}
+                ]),
                 key: 'array',
-                icon: 'directions_bike',
+                icon: 'edit',
                 default: 'Empty',
                 noOfItemsToDisplay: 2
             })

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html

@@ -1,15 +1,14 @@
-
 <div [attr.data-automation-id]="'card-array-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
-<div class="adf-property-value" (click)="clicked()">
+<div class="adf-property-value adf-card-view-array-item-container" (click)="clicked()">
     <ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
         <mat-chip-list *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
             <ng-container *ngIf="displayCount() > 0; else withOutDisplayCount" >
                 <mat-chip
                     *ngFor="let item of items.slice(0, displayCount())"
                     (click)="clicked()"
-                    [attr.data-automation-id]="'card-arrayitem-chip-' + item">
+                    [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
-                    <mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
+                    <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
-                    <span>{{item}}</span>
+                    <span>{{item.value}}</span>
                 </mat-chip>
                 <mat-chip
                     *ngIf="items.length > displayCount()"
@@ -22,9 +21,9 @@
                 <mat-chip
                     *ngFor="let item of items"
                     (click)="clicked()"
-                    [attr.data-automation-id]="'card-arrayitem-chip-' + item">
+                    [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
-                    <mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
+                    <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
-                    <span>{{item}}</span>
+                    <span>{{item.value}}</span>
                 </mat-chip>
             </ng-template>
         </mat-chip-list>
@@ -34,9 +33,9 @@
                     <mat-chip-list>
                         <mat-chip (click)="clicked()"
                             *ngFor="let item of items.slice(displayCount(), items.length)"
-                            [attr.data-automation-id]="'card-arrayitem-chip-' + item">
+                            [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
-                        <mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
+                        <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
-                        <span>{{item}}</span>
+                        <span>{{item.value}}</span>
                         </mat-chip>
                     </mat-chip-list>
                 </mat-card-content>
@@ -44,6 +43,13 @@
         </mat-menu>
     </ng-container>
     <ng-template #elseEmptyValueBlock>
-        <span  data-automation-id="card-arrayitem-default">{{ property.default | translate }}</span>
+        <span class="adf-card-array-item-default" data-automation-id="card-arrayitem-default">{{ property?.default | translate }}</span>
     </ng-template>
+    <button mat-icon-button *ngIf="showClickableIcon()"
+        class="adf-array-item-action"
+        [attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+        [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+        [attr.data-automation-id]="'card-array-item-clickable-icon-' + property.key">
+        <mat-icon class="adf-array-item-icon">{{property.icon}}</mat-icon>
+    </button>
 </div>

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -1,4 +1,5 @@
 @mixin adf-card-view-array-item-theme($theme) {
+    $foreground: map-get($theme, foreground);
 
     .adf {
         &-array-item-icon {
@@ -6,6 +7,21 @@
             padding-top: 8px;
         }
 
+        &-array-item-action {
+            color: mat-color($foreground, text, 0.25);
+        }
+
+        &-array-item-action:hover, &-array-item-action:focus {
+            color: mat-color($foreground, text);
+        }
+
+        &-card-array-item-default {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: block;
+        }
+
         &-array-item-more-chip-container {
             &.mat-card {
                 box-shadow: none;
@@ -29,5 +45,13 @@
                 cursor: pointer;
             }
         }
+
+        &-card-view-array-item-container {
+            flex-direction: row;
+            box-sizing: border-box;
+            display: flex;
+            place-content: center space-between;
+            align-items: center;
+        }
     }
 }

lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts

@@ -33,8 +33,14 @@ export class CardViewArrayItemComponent {
     constructor(private cardViewUpdateService: CardViewUpdateService) {}
 
     clicked(): void {
+        if (this.isClickable()) {
             this.cardViewUpdateService.clicked(this.property);
         }
+    }
+
+    showClickableIcon(): boolean {
+        return this.hasIcon() && this.isClickable();
+    }
 
     hasIcon(): boolean {
         return !!this.property.icon;
@@ -43,4 +49,8 @@ export class CardViewArrayItemComponent {
     displayCount(): number {
         return this.property.noOfItemsToDisplay ? this.property.noOfItemsToDisplay : 0;
     }
+
+    isClickable(): boolean {
+        return !!this.property.clickable;
+    }
 }

lib/core/card-view/models/card-view-arrayitem.model.ts

@@ -21,10 +21,15 @@ import { CardViewBaseItemModel } from './card-view-baseitem.model';
 import { Observable } from 'rxjs';
 import { CardViewArrayItemProperties } from '../interfaces/card-view-arrayitem-properties.interface';
 
+export interface CardViewArrayItem {
+    icon: string;
+    value: string;
+}
+
 export class CardViewArrayItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
 
     type: string = 'array';
-    value: Observable<string[]>;
+    value: Observable<CardViewArrayItem[]>;
     noOfItemsToDisplay: number;
 
     constructor(cardViewArrayItemProperties: CardViewArrayItemProperties) {
@@ -32,7 +37,7 @@ export class CardViewArrayItemModel extends CardViewBaseItemModel implements Car
         this.noOfItemsToDisplay = cardViewArrayItemProperties.noOfItemsToDisplay;
     }
 
-    get displayValue(): Observable<string[]> {
+    get displayValue(): Observable<CardViewArrayItem[]> {
         return this.value;
     }
 }

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts

@@ -28,7 +28,8 @@ import {
     AppConfigService,
     UpdateNotification,
     CardViewUpdateService,
-    CardViewDatetimeItemModel
+    CardViewDatetimeItemModel,
+    CardViewArrayItem
 } from '@alfresco/adf-core';
 import { TaskDetailsCloudModel, TaskStatus } from '../../start-task/models/task-details-cloud.model';
 import { Router } from '@angular/router';
@@ -63,8 +64,8 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
     error: EventEmitter<any> = new EventEmitter<any>();
 
     taskDetails: TaskDetailsCloudModel = {};
-    candidateUsers: string[] = [];
+    candidateUsers: CardViewArrayItem[] = [];
-    candidateGroups: string[] = [];
+    candidateGroups: CardViewArrayItem[] = [];
     properties: CardViewItem[];
     inEdit: boolean = false;
     parentTaskName: string;
@@ -120,8 +121,8 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
             )
         ).subscribe(([taskDetails, candidateUsers, candidateGroups]) => {
                 this.taskDetails = taskDetails;
-                this.candidateGroups = candidateGroups;
+                this.candidateGroups = candidateGroups.map((user) => <CardViewArrayItem> { icon: 'group', value: user });
-                this.candidateUsers = candidateUsers;
+                this.candidateUsers = candidateUsers.map((group) => <CardViewArrayItem> { icon: 'person', value: group });
                 if (this.taskDetails.parentTaskId) {
                     this.loadParentName(`${this.taskDetails.parentTaskId}`);
                 } else {
@@ -235,7 +236,8 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
                     label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS',
                     value: of(this.candidateUsers),
                     key: 'candidateUsers',
-                    icon: 'person',
+                    icon: 'edit',
+                    clickable: false,
                     default: this.translationService.instant('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS_DEFAULT'),
                     noOfItemsToDisplay: 2
                 }
@@ -245,7 +247,8 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
                     label: 'ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS',
                     value: of(this.candidateGroups),
                     key: 'candidateGroups',
-                    icon: 'group',
+                    icon: 'edit',
+                    clickable: false,
                     default: this.translationService.instant('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS_DEFAULT'),
                     noOfItemsToDisplay: 2
                 }