[ADF-5305] - Added aspect list component (#6549)

* [ADF-5305] - Creation of aspect list and aspect list dialog components

* [ADF-5305] - unit test for aspect list

* [ADF-5305] - added filtering for aspects

* [ADF-5305] - enabling tests

* [ADF-5305] - added filtering and unit test

* [ADF-5305] - added context action to demo shell

* [ADF-5305] - added button on metadata card for opening aspects

* [ADF-5305] - fixed unit test for filtering aspects

* [ADF-5305] - added documentation

* [ADF-5305] - fixed lint

* [ADF-5305] - Updated the js-api calls

* [ADF-5305] - Removed circle dependency

* [ADF-5305] - Simplified code

* [ADF-5305] - revert changes on package.json

* [ADF-5305] - removed extra cspell word

* [ADF-5305] - added filtering on aspect list service

* [ADF-5305] - fix unit test for aspect service

* [ADF-5305] - reverted changes to package-loc

* [ADF-5305] - removed unused changes

* [ADF-5305] - attempt to fix PR #§

* [ADF-5305] - attempt to fix PR #2

* [ADF-5305] - attempt to fix PR #3

* [ADF-5305] - attempt to fix PR #4

* [ADF-5305] - attempt to fix PR #5

Co-authored-by: Vito Albano <vitoalbano@vitoalbano-mbp-0120.local>

docs/content-services/components/aspect-list-dialog.component.md

@@ -0,0 +1,94 @@
+---
+Title: Aspect List Dialog component
+Added: v2.0.0
+Status: Active
+Last reviewed: 2021-01-20
+---
+
+# [Aspect List Dialog component](../../../lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.ts "Defined in aspect-list-dialog.component.ts")
+
+Allows a user to choose aspects for a node.
+
+## Details
+
+The [Aspect List Dialog component](aspect-list-dialog.component.md) works as a dialog showing the list of aspects available.
+It is possible to filter the aspect showed via the app.config.json.
+### Showing the dialog
+
+Unlike most components, the [Aspect List Dialog component](aspect-list-dialog.component.md) is typically shown in a dialog box
+rather than the main page and you are responsible for opening the dialog yourself. You can use the
+[Angular Material Dialog](https://material.angular.io/components/dialog/overview) for this,
+as shown in the usage example. ADF provides the [`AspectListDialogComponentData`](../../../lib/content-services/src/lib/aspect-list/aspect-list-dialog-data.interface.ts) interface
+to work with the Dialog's
+[data option](https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-):
+
+```ts
+export interface AspectListDialogComponentData {
+    title: string;
+    description: string;
+    overTableMessage: string;
+    select: Subject<string[]>;
+    nodeId?: string;
+}
+```
+
+The properties are described in the table below:
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| title | `string` | "" | Dialog title |
+| description | `string` | "" | Text to appear as description under the dialog title |
+| overTableMessage | `string` | "" | Text that will be showed on the top of the aspect list table |
+| select | [`Subject<Node>`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) |  | Event emitted with the current node selection when the dialog closes |
+| nodeId | `string` | "" | Identifier of a node to apply aspects to. |
+
+If you don't want to manage the dialog yourself then it is easier to use the
+[Aspect List component](aspect-list.component.md), or the
+methods of the [Aspect List service](../services/aspect-list.service.md), which create
+the dialog for you.
+
+### Usage example
+
+```ts
+import { MatDialog } from '@angular/material/dialog';
+import { AspectListDialogComponentData, AspectListDialogComponent} from '@adf/content-services'
+import { Subject } from 'rxjs/Subject';
+ ...
+
+constructor(dialog: MatDialog ... ) {}
+
+openSelectorDialog() {
+    data: AspectListDialogComponentData = {
+        title: "Choose an item",
+        description: "Choose",
+        overTableMessage: "Over Table Message",
+        nodeId: currentNodeID,
+        select: new Subject<Node[]>()
+    };
+
+    this.dialog.open(
+        AspectListDialogComponent,
+        {
+            data, panelClass: 'adf-aspect-list-dialog',
+            width: '630px'
+        }
+    );
+
+    data.select.subscribe((selections: Node[]) => {
+        // Use or store selection...
+    }, 
+    (error)=>{
+        //your error handling
+    }, 
+    ()=>{
+        //action called when an action or cancel is clicked on the dialog
+        this.dialog.closeAll();
+    });
+}
+```
+
+All the results will be streamed to the select [subject](http://reactivex.io/rxjs/manual/overview.html#subject) present in the [`AspectListDialogComponentData`](../../../lib/content-services/src/lib/aspect-list/aspect-list-dialog-data.interface.ts) object passed to the dialog.
+When the dialog action is selected by clicking, the `data.select` stream will be completed.
+## See also
+
+-   [Aspect list component](aspect-list.component.md)