[ADF-3723] Tree view component (#3939)

* [ADF-3723] added first step to adf tree view component

* [ADF-3723] start adding tests for the new component

* [ADF-3723] fixed style and start adding tests

* [ADF-3723] working on unit test

* [ADF-3723] added test for the new tree view component

* [ADF-3723] added event when clicked on a tree node

* [ADF-3723] refactored code

* [ADF-3723 added peer review changes

* [ADF-3723] fixed extra space

* [ADF-3723] fixed unit test

* [ADF-3723] fixed failing unit test

lib/content-services/tree-view/components/tree-view.component.html

@@ -0,0 +1,21 @@
+<mat-tree class="adf-tree-view-main" [dataSource]="dataSource" [treeControl]="treeControl" *ngIf="nodeId; else missingNodeId">
+    <mat-tree-node class="adf-tree-view-node" *matTreeNodeDef="let treeNode" id="{{treeNode.name + '-tree-node'}}"
+        matTreeNodePadding [matTreeNodePaddingIndent]="15">
+        {{treeNode.name}}
+    </mat-tree-node>
+    <mat-tree-node class="adf-tree-view-node" id="{{treeNode.name + '-tree-child-node'}}" *matTreeNodeDef="let treeNode; when: hasChild"
+        matTreeNodePadding [matTreeNodePaddingIndent]="15">
+        <button id="{{'button-'+treeNode.name}}" (click)="onNodeClicked(treeNode.node)"
+                mat-icon-button [attr.aria-label]="'toggle ' + treeNode.filename" matTreeNodeToggle>
+            <mat-icon class="adf-tree-view-icon">
+                {{treeControl.isExpanded(treeNode) ? 'folder_open' : 'folder'}}
+            </mat-icon>
+        </button>
+        {{treeNode.name}}
+    </mat-tree-node>
+</mat-tree>
+<ng-template #missingNodeId>
+    <div id="adf-tree-view-missing-node">
+        {{'ADF-TREE-VIEW.MISSING-ID' | translate}}
+    </div>
+</ng-template>