feat(tree-select): add option to provide custom header

Author: gheorghitahurmuz

projects/angular/components/ui-tree-select/src/ui-tree-select.component.html

@@ -1,30 +1,37 @@
-<cdk-virtual-scroll-viewport (keydown)="onKeydown($event)"
-                             class="virtual-scroll-container"
-                             [itemSize]="itemSize"
-                             tabindex="0">
-    <mat-list *uiContentLoading="loading"
-              role="tree"
-              class="tree-container">
-        <ng-container *ngIf="dataSource.data.length == 0">
-            <ng-content select="[noDataMessage]"></ng-content>
-        </ng-container>
-        <ng-container *cdkVirtualFor="let node of dataSource; let i = index; trackBy: trackById;">
-            <ui-tree-item (selected)="select(node)"
-                          (collapsed)="collapse(node)"
-                          (expanded)="expand(node)"
-                          [node]="node"
-                          [attr.nodekey]="node.key"
-                          [isSelected]="isSelected(node)">
-                <ng-template *ngIf="itemTemplate"
-                             [ngTemplateOutlet]="itemTemplate"
-                             [ngTemplateOutletContext]="{
+<div cdkVirtualScrollingElement
+     class="ui-tree-select-container">
+    <ng-template *ngIf="headerTemplate"
+                 [ngTemplateOutlet]="headerTemplate">
+    </ng-template>
+
+    <cdk-virtual-scroll-viewport (keydown)="onKeydown($event)"
+                                 [itemSize]="itemSize"
+                                 class="virtual-scroll-container"
+                                 tabindex="0">
+        <mat-list *uiContentLoading="loading"
+                  role="tree"
+                  class="tree-container">
+            <ng-container *ngIf="dataSource.data.length == 0">
+                <ng-content select="[noDataMessage]"></ng-content>
+            </ng-container>
+            <ng-container *cdkVirtualFor="let node of dataSource; let i = index; trackBy: trackById;">
+                <ui-tree-item (selected)="select(node)"
+                              (collapsed)="collapse(node)"
+                              (expanded)="expand(node)"
+                              [node]="node"
+                              [attr.nodekey]="node.key"
+                              [isSelected]="isSelected(node)">
+                    <ng-template *ngIf="itemTemplate"
+                                 [ngTemplateOutlet]="itemTemplate"
+                                 [ngTemplateOutletContext]="{
                                     node: node,
                                     expanded: isExpanded(node),
                                     selected: isSelected(node),
                                     toggle: toggle(node)
                                 }">
-                </ng-template>
-            </ui-tree-item>
-        </ng-container>
-    </mat-list>
-</cdk-virtual-scroll-viewport>
+                    </ng-template>
+                </ui-tree-item>
+            </ng-container>
+        </mat-list>
+    </cdk-virtual-scroll-viewport>
+</div>

projects/angular/components/ui-tree-select/src/ui-tree-select.component.spec.ts

@@ -42,6 +42,15 @@ const DATA_STUB = [
     (expanded)="expanded($event)"
     (collapsed)="collapsed($event)">
     <p noDataMessage>no data</p>
+
+    <ng-template #headerTemplate>
+        <ng-container *ngIf="showHeaderTemplate">
+            <div class="header">
+                header template
+            </div>
+        </ng-container>
+    </ng-template>
+
     <ng-template #itemTemplate
                  let-node="node"
                  let-expanded="expanded"
@@ -69,7 +78,7 @@ const DATA_STUB = [
     .test-host-container {
         height: 100%;
     }
-        .virtual-scroll-container {
+        .ui-tree-select-container {
             height: 500px;
         }
     `],
@@ -84,6 +93,7 @@ export class TestHostComponent {
     collapsed = jasmine.createSpy();
     initialSelection: string[] = [];
     expandOnSelect = false;
+    showHeaderTemplate = false;
 }
 
 describe('UiTreeSelectComponent', () => {
@@ -119,6 +129,14 @@ describe('UiTreeSelectComponent', () => {
         expect(fixture.nativeElement.textContent.trim()).toBe('no data');
     });
 
+    it('should correctly render header template', () => {
+        component.showHeaderTemplate = true;
+        fixture.detectChanges();
+        const headerElement = fixture.nativeElement.querySelector('.header');
+        expect(headerElement).toBeTruthy();
+        expect(headerElement.textContent.trim()).toBe('header template');
+    });
+
     it('should correctly emit selected event', () => {
         const nodeWithChildren = fixture.nativeElement.querySelectorAll('.tree-item-container')[0];
         nodeWithChildren.click();

projects/angular/components/ui-tree-select/src/ui-tree-select.component.ts

@@ -62,6 +62,9 @@ export class UiTreeSelectComponent implements AfterViewInit, OnDestroy {
     @ViewChildren(UiTreeItemComponent)
     items!: QueryList<UiTreeItemComponent>;
 
+    @ContentChild('headerTemplate')
+    headerTemplate?: any;
+
     @ContentChild('itemTemplate')
     itemTemplate?: any;
 

projects/playground/src/app/pages/tree-select/tree-select.page.html

@@ -3,6 +3,14 @@
                 (selected)="selected($event)"
                 (expanded)="expanded($event)">
     <p noDataMessage>no data</p>
+
+    <ng-template #headerTemplate>
+        <div class="header">
+            <mat-icon>folder</mat-icon>
+            <span>Header</span>
+        </div>
+    </ng-template>
+
     <ng-template #itemTemplate
                  let-node="node"
                  let-expanded="expanded"

projects/playground/src/app/pages/tree-select/tree-select.page.scss

@@ -5,9 +5,14 @@
     margin-bottom: $margin;
 }
 
-.virtual-scroll-container {
+.ui-tree-select-container {
     border: 2px solid cyan;
     height: 500px;
+
+    .header {
+        display: flex;
+        align-items: center;
+    }
 }
 
 .tree-item-container {