[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>

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

@@ -4,7 +4,7 @@
     <mat-card class="app-card-view">
         <adf-card-view
             [properties]="properties"
-            [editable]="true"
+            [editable]="isEditable"
             [displayClearAction]="showClearDateAction"
             [displayNoneOption]="showNoneOption">
         </adf-card-view>

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

@@ -78,8 +78,43 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 value: 'Spock',
                 key: 'name',
                 default: 'default bar',
+                editable: this.isEditable
+            }),
+            new CardViewTextItemModel({
+                label: 'CardView Text Item - Protected value',
+                value: 'Spock',
+                key: 'name',
+                default: 'default bar',
                 multiline: false,
                 icon: 'icon',
+                editable: false
+            }),
+            new CardViewTextItemModel({
+                label: 'CardView Text Item - Multiline',
+                value: 'Spock',
+                key: 'name',
+                default: 'default bar',
+                multiline: true,
+                icon: 'icon',
+                editable: this.isEditable
+            }),
+            new CardViewTextItemModel({
+                label: 'CardView Text Item - Default Value',
+                value: '',
+                key: 'name',
+                default: 'default bar',
+                multiline: false,
+                icon: 'icon',
+                editable: this.isEditable
+            }),
+            new CardViewTextItemModel({
+                label: 'CardView Text Item - Multivalue (chips)',
+                value: [1, 2, 3],
+                key: 'name',
+                default: 'default bar',
+                multiline: true,
+                multivalued: true,
+                icon: 'icon',
                 editable: this.isEditable
             }),
             new CardViewDateItemModel({
@@ -105,6 +140,13 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 default: false,
                 editable: this.isEditable
             }),
+            new CardViewBoolItemModel({
+                label: 'Agree to all terms and conditions',
+                value: true,
+                key: 'boolean',
+                default: false,
+                editable: this.isEditable
+            }),
             new CardViewIntItemModel({
                 label: 'CardView Int Item',
                 value: 213,
@@ -118,14 +160,20 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 key: 'float',
                 default: 0.0,
                 editable: this.isEditable,
-                pipes: [{ pipe: this.decimalNumberPipe}]
+                pipes: [{ pipe: this.decimalNumberPipe }]
             }),
             new CardViewKeyValuePairsItemModel({
                 label: 'CardView Key-Value Pairs Item',
-                value: [],
+                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
                 key: 'key-value-pairs',
                 editable: this.isEditable
             }),
+            new CardViewKeyValuePairsItemModel({
+                label: 'CardView Key-Value Pairs Item',
+                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
+                key: 'key-value-pairs',
+                editable: false
+            }),
             new CardViewSelectItemModel({
                 label: 'CardView Select Item',
                 value: 'one',
@@ -146,6 +194,7 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 default: 'click here',
                 editable: this.isEditable,
                 clickable: true,
+                icon: 'close',
                 clickCallBack: () => {
                     this.respondToCardClick();
                 }
@@ -154,14 +203,15 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 label: 'CardView Array of items',
                 value: of([
                     { icon: 'directions_bike', value: 'Zlatan' },
-                    { icon: 'directions_bike', value: 'Lionel Messi'},
-                    { value: 'Mohamed', directions_bike: 'save'},
-                    { value: 'Ronaldo'}
+                    { icon: 'directions_bike', value: 'Lionel Messi' },
+                    { value: 'Mohamed', directions_bike: 'save' },
+                    { value: 'Ronaldo' }
                 ]),
                 key: 'array',
                 icon: 'edit',
                 default: 'Empty',
-                noOfItemsToDisplay: 2
+                noOfItemsToDisplay: 2,
+                editable: this.isEditable
             })
         ];
     }

demo-shell/src/app/components/file-view/file-view.component.html

@@ -49,7 +49,7 @@
                         [color]="'primary'"
                         (change)="toggleMulti()"
                         [checked]="multi">
-                        multi accordion
+                        Multi accordion
                     </mat-slide-toggle>
                 </p>
 
@@ -59,7 +59,7 @@
                         [color]="'primary'"
                         (change)="toggleReadOnly()"
                         [checked]="isReadOnly">
-                        Editable
+                        Read Only
                     </mat-slide-toggle>
                 </p>