[ACA-3266] Improve version upload component (#5750)

* added new component to compare current and new file version of a node.

* update doc

* added more tests

* updated docs

* small fixes

* changed with typography

* Update version-comparison.component.md

* handle hiding the comparison component on demo shell if cancelled/uploaded a new file version

* small fixes

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>

docs/README.md

@@ -289,6 +289,7 @@ for more information about installing and using the source code.
 | [Upload Button Component](content-services/components/upload-button.component.md) | Activates a file upload. | [Source](../lib/content-services/src/lib/upload/components/upload-button.component.ts) |
 | [Upload Drag Area Component](content-services/components/upload-drag-area.component.md) | Adds a drag and drop area to upload files to ACS. | [Source](../lib/content-services/src/lib/upload/components/upload-drag-area.component.ts) |
 | [Upload Version Button Component (Workaround)](content-services/components/upload-version-button.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Activates a file version upload. | [Source](../lib/content-services/src/lib/upload/components/upload-version-button.component.ts) |
+| [Version Comparison Component](content-services/components/version-comparison.component.md) | Displays the side by side comparison between the current target node (type, name, icon) and the new file that should update it's version. | [Source](../lib/content-services/src/lib/version-manager/version-comparison.component.ts) |
 | [Version List component](content-services/components/version-list.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Displays the version history of a node in a Version Manager component. | [Source](../lib/content-services/src/lib/version-manager/version-list.component.ts) |
 | [Version Manager Component](content-services/components/version-manager.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/src/lib/version-manager/version-manager.component.ts) |
 | [Webscript component](content-services/components/webscript.component.md) | Provides access to Webscript features. | [Source](../lib/content-services/src/lib/webscript/webscript.component.ts) |

docs/content-services/components/version-comparison.component.md

@@ -0,0 +1,30 @@
+---
+Title: Version Comparison Component
+Added: v3.9.0
+Status: Active
+Last reviewed: 2020-06-04
+---
+
+# [Version Comparison Component](../../../lib/content-services/src/lib/version-manager/version-comparison.component.ts "Defined in version-comparison.component.ts")
+
+Displays the side by side comparison between the current target node (type, name, icon) and the new file that should update it's version.
+
+![Version Manager](../../docassets/images/version-comparison.png)
+
+## Basic Usage
+
+```html
+<adf-version-comparison 
+    [node]="aNode"
+    [newFileVersion]="aNewFileVersion">
+</adf-version-comparison>
+```
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| newFileVersion | `File` |  | New file for updating current version. |
+| node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) |  | Target node. |

docs/content-services/components/version-manager.component.md

@@ -33,11 +33,13 @@ Displays the version history of a node with the ability to upload a new version.
 | newFileVersion | `File` |  | New file for updating current version. |
 | node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) |  | Target node to manage version history. |
 | showComments | `boolean` | true | Toggles showing/hiding of comments. |
+| showVersionComparison | `boolean` | false | Toggles showing/hiding the [version comparison component](../../content-services/components/version-comparison.component.md). |
 
 ### Events
 
 | Name | Type | Description |
 | ---- | ---- | ----------- |
+| uploadCancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when an cancelling during upload. |
 | uploadError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when an error occurs during upload. |
 | uploadSuccess | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when a file is uploaded successfully. |