add click callback and remove icon if is not editable (#4516)

.travis.yml

@@ -65,7 +65,6 @@ jobs:
             then
                 ng test core --watch=false || exit 1;
             fi;
-          script:
             AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
             if [[ $AFFECTED_LIBS =~ "extensions$" || $TRAVIS_PULL_REQUEST == "false"  ]];
             then
@@ -79,7 +78,6 @@ jobs:
             then
                 ng test process-services --watch=false || exit 1;
             fi;
-          script:
             AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
             if [[ $AFFECTED_LIBS =~ "insights$" || $TRAVIS_PULL_REQUEST == "false"  ]];
             then

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

@@ -48,6 +48,10 @@ export class CardViewComponent implements OnInit {
         this.createCard();
     }
 
+    respondToCardClick() {
+        this.logs.push(`clickable field`);
+    }
+
     ngOnInit() {
         this.cardViewUpdateService.itemUpdated$.subscribe(this.onItemChange.bind(this));
     }
@@ -118,6 +122,16 @@ export class CardViewComponent implements OnInit {
                 value: new Map([['999', 'My Value']]),
                 key: 'map',
                 default: 'default map value'
+            }),
+            new CardViewTextItemModel({
+                label: 'This is clickable ',
+                value: 'click here',
+                key: 'click',
+                default: 'click here',
+                clickable: true,
+                clickCallBack: () => {
+                    this.respondToCardClick();
+                }
             })
         ];
     }

docs/core/components/card-view.component.md

@@ -32,14 +32,15 @@ Defining properties from Typescript:
         key: 'name',
         default: 'default bar' ,
         multiline: false,
-        icon: 'icon';
+        icon: 'icon',
+        clickCallBack : ()=>{ myClickImplementation()} 
     }),
     new CardViewMapItemModel({
         label: 'My map',
         value: new Map([['999', 'My Value']]),
         key: 'map',
         default: 'default map value' ,
-        clickable: true
+        clickable: true,
     }),
     new CardViewDateItemModel({
         label: 'Date of birth',
@@ -173,6 +174,7 @@ const textItemProperty = new CardViewTextItemModel(options);
 | displayValue\* | string |  | The value to display |
 | editable | boolean | false | Toggles whether the item is editable |
 | clickable | boolean | false | Toggles whether the property responds to clicks |
+| clickableCallBack | function | null | Function to execute when click the element |
 | icon | string |  | The material icon to show beside the item if it is clickable |
 | multiline | boolean | false | Single or multiline text |
 | pipes | [`CardViewTextItemPipeProperty`](../../../lib/core/card-view/interfaces/card-view-textitem-pipe-property.interface.ts)\[] | \[] | Pipes to be applied to the text before display |

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

@@ -1,5 +1,5 @@
 .adf {
     &-mapitem-clickable-value {
-        cursor: pointer;
+        cursor: pointer !important;
     }
 }

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

@@ -9,7 +9,6 @@
                 <span class="adf-textitem-clickable-value" [attr.data-automation-id]="'card-textitem-value-' + property.key">
                     <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
                 </span>
-            <mat-icon *ngIf="hasIcon()" fxFlex="0 0 auto" [attr.data-automation-id]="'card-textitem-edit-icon-' + property.icon" class="adf-textitem-icon">{{ property.icon }}</mat-icon>
             </div>
         </ng-template>
     </span>

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

@@ -17,7 +17,7 @@
         }
 
         &-textitem-readonly {
-            cursor: pointer;
+            cursor: pointer !important;
 
             &:hover mat-icon {
                 opacity: 1;
@@ -31,7 +31,7 @@
         }
 
         &-textitem-clickable-value {
-            cursor: pointer;
+            cursor: pointer !important;
             color: mat-color($primary);
         }
 
@@ -42,7 +42,7 @@
 
                 mat-icon:not(.adf-button-disabled):hover {
                     opacity: 1;
-                    cursor: pointer;
+                    cursor: pointer !important;;
                 }
 
                 mat-form-field {

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -307,6 +307,28 @@ describe('CardViewTextItemComponent', () => {
             });
         }));
 
+        it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', (done) => {
+            let functionTestClick = () => {
+                done();
+            };
+
+            component.property = new CardViewTextItemModel({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                clickable: true,
+                clickCallBack: () => {
+                    functionTestClick();
+                }
+            });
+            component.displayEmpty = true;
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            value.nativeElement.click();
+        });
+
         it('should trigger an update event on the CardViewUpdateService [integration]', (done) => {
             component.inEdit = false;
             component.property.isValid = () => true;

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

@@ -57,7 +57,7 @@ export class CardViewTextItemComponent implements OnChanges {
     }
 
     isClickable(): boolean {
-        return this.property.clickable;
+        return !!this.property.clickable;
     }
 
     hasIcon(): boolean {
@@ -97,6 +97,10 @@ export class CardViewTextItemComponent implements OnChanges {
     }
 
     clicked(): void {
+        if (typeof this.property.clickCallBack === 'function') {
+            this.property.clickCallBack();
+        } else {
             this.cardViewUpdateService.clicked(this.property);
         }
     }
+}

lib/core/card-view/interfaces/card-view-item-properties.interface.ts

@@ -23,7 +23,7 @@ export interface CardViewItemProperties {
     key: any;
     default?: any;
     editable?: boolean;
-    clickable?: boolean;
+    clickable?: any;
     icon?: string;
     validators?: CardViewItemValidator[];
     data?: any;

lib/core/card-view/interfaces/card-view-textitem-properties.interface.ts

@@ -21,4 +21,5 @@ import { CardViewTextItemPipeProperty } from './card-view-textitem-pipe-property
 export interface CardViewTextItemProperties extends CardViewItemProperties {
     multiline?: boolean;
     pipes?: CardViewTextItemPipeProperty[];
+    clickCallBack?: any;
 }

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

@@ -24,11 +24,13 @@ export class CardViewTextItemModel extends CardViewBaseItemModel implements Card
     type: string = 'text';
     multiline?: boolean;
     pipes?: CardViewTextItemPipeProperty[];
+    clickCallBack?: any;
 
     constructor(cardViewTextItemProperties: CardViewTextItemProperties) {
         super(cardViewTextItemProperties);
         this.multiline = !!cardViewTextItemProperties.multiline;
         this.pipes = cardViewTextItemProperties.pipes || [];
+        this.clickCallBack = cardViewTextItemProperties.clickCallBack ? cardViewTextItemProperties.clickCallBack : null;
     }
 
     get displayValue() {