[ADF-4900] Card View and Metadata Components refactoring (#5592)

* [ADF-4900] Card View and Metadata Components refactoring

* CSS linting

* Unit test excluded

* Rebase branch

* Fix unit tests

* Fix linting

* Fix e2e tests

* Fix 2e2 tests

* Fix process-services e2e tests

* More fixes

* Fix more e2e tests

* Fix unit test

* Improve flaky unit test

* Fix process services e2e tests

* Update Process Header Cloud Page

* Fix linting

* Fix timing issue

* Lintintg

* Fix selectors

* Fix e2e tests

* Fix timing issue

* Fix C260328

* Fix spellcheck

* save screenshot

* performance issue

* Fix unit tests and e2e tests

* fix e2e

* refactoring

* fix lint

* fix e2e

* Fix C309698

* fix other e2e

* fix lint

* increase timeout

Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>

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

@@ -1,16 +1,21 @@
-<div [attr.data-automation-id]="'card-mapitem-label-' + property.key" class="adf-property-label" *ngIf="showProperty()">{{ property.label | translate }}</div>
-<div class="adf-property-value">
+<div [attr.data-automation-id]="'card-mapitem-label-' + property.key"
+     class="adf-property-label"
+     *ngIf="showProperty()">{{ property.label | translate }}</div>
+<div class="adf-property-value adf-map-item-padding">
     <div>
-        <span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-mapitem-value-' + property.key">
+        <span *ngIf="!isClickable(); else clickableTemplate"
+              [attr.data-automation-id]="'card-mapitem-value-' + property.key">
             <span *ngIf="showProperty();">{{ property.displayValue }}</span>
         </span>
-        <ng-template #elseBlock>
-            <span class="adf-mapitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-mapitem-value-' + property.key">
-                <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
-            </span>
-        </ng-template>
     </div>
-    <ng-template #elseEmptyValueBlock>
+    <ng-template #clickableTemplate>
+        <span class="adf-mapitem-clickable-value"
+              (click)="clicked()"
+              [attr.data-automation-id]="'card-mapitem-value-' + property.key">
+            <span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
+        </span>
+    </ng-template>
+    <ng-template #emptyValueTemplate>
         {{ property.default | translate }}
     </ng-template>
 </div>

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

@@ -2,4 +2,8 @@
     &-mapitem-clickable-value {
         cursor: pointer !important;
     }
+
+    &-map-item-padding {
+        padding-top: 6px;
+    }
 }