[ADF-4219] Multivalue Metadata Card View (#4600)

* [ADF-4219] Multivalue Metadata  Card View

* [ADF-4219] Add documentation

* [ADF-4219] Improve code, docs and tests

* [ADF-4219] Fix e2e tests

docs/README.md

@@ -162,6 +162,7 @@ for more information about installing and using the source code.
 | [Text Highlight pipe](core/pipes/text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/pipes/text-highlight.pipe.ts) |
 | [Time Ago pipe](core/pipes/time-ago.pipe.md) | Converts a recent past date into a number of days ago. | [Source](../lib/core/pipes/time-ago.pipe.ts) |
 | [User Initial pipe](core/pipes/user-initial.pipe.md) | Takes the name fields of a UserProcessModel object and extracts and formats the initials. | [Source](../lib/core/pipes/user-initial.pipe.ts) |
+| [Multi value pipe](core/pipes/multi-value.pipe.md) | Takes a list of values to stringify them with a custom separator. | [Source](../lib/core/pipes/multi-value.pipe.ts) |
 
 ### Services
 

docs/content-services/components/content-metadata-card.component.md

@@ -274,3 +274,21 @@ example below shows this with an aspect-oriented config:
 
 Nothing - since this aspect is not related to the node, it will simply be ignored and not
 displayed. The aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
+
+## Multi value card properties
+Multi value properties are displayed one after another separated by a comma. This card makes use of the [Multi Value Pipe](../../core/pipes/multi-value.pipe.ts).
+
+To customize the separator used by this card you can set it in your `app.config.json` inside your content-metadata configuration:
+
+```json
+"content-metadata": {
+    "presets": {
+        "default": {
+            "includeAll": true,
+            "exclude": "exif:exif",
+            "exif:exif": [ "exif:pixelXDimension", "exif:pixelYDimension"]
+        }
+    },
+    "multi-value-pipe-separator" : " - "
+},
+```

docs/core/pipes/multi-value.pipe.md

@@ -0,0 +1,39 @@
+# [Multi Value Pipe](../../../lib/core/pipes/multi-value.pipe.ts "Defined in multi-value.pipe.ts")
+
+Takes an array of strings and turns it into one string where items are separated by a separator. The default separator applied to the list is `', '`, however, you can set your own separator in the params of the pipe. 
+
+## Basic Usage
+
+<!-- {% raw %} -->
+
+### Default separator
+
+```HTML
+<div>
+    List {{ values | multiValue }}
+</div>
+```
+
+#### Result
+
+![multi-value-pipe](../../docassets/images/multi-value-default.pipe.png)
+
+### Custom separator
+
+```HTML
+<div>
+    List {{ values | multiValue: ' :) ' }}
+</div>
+```
+
+<!-- {% endraw %} -->
+
+#### Result
+
+![multi-value-pipe](../../docassets/images/multi-value.pipe.png)
+
+## Details
+
+The pipe gets every one of the items passed to the pipe and stringifies it adding the separator set in the configuration.
+
+You will need to specify the separator you want to use for it to work.