feat(suggest): implement custom header slot

Author: alexdudescu

projects/angular/components/ui-suggest/src/ui-suggest.component.html

@@ -231,10 +231,59 @@
             <ng-container *ngTemplateOutlet="customValueTemplate; context: { $implicit: 'down' }">
             </ng-container>
 
+            <ng-container *ngFor="let item of headerItems; let index = index">
+                <mat-list-item *ngLet="drillDown && !!item?.expandable as itemExpandable"
+                               [class.active]="index === activeIndex"
+                               [class.is-loading]="item.loading !== VirtualScrollItemStatus.loaded"
+                               [class.readonly]="item.loading !== VirtualScrollItemStatus.loaded"
+                               [class.selected]="!!item &&
+                                                !multiple &&
+                                                isItemSelected(item)"
+                               [class.is-expandable]="itemExpandable"
+                               [style.height.px]="!!item ? itemSize : 0"
+                               (click)="preventDefault($event);
+                                        updateValue(item, !multiple, true);"
+                               [attr.role]="'option'"
+                               matRipple>
+                    <ng-container *ngIf="!!item">
+                        <ng-container *ngIf="itemTemplate; else defaultItem">
+                            <ng-container *ngTemplateOutlet="itemTemplate; context: {
+                                                                $implicit: item
+                                                            }">
+                            </ng-container>
+                        </ng-container>
+                    </ng-container>
+                    <ng-template #defaultItem>
+                        <div [matTooltip]="disableTooltip ? '' : intl.translateLabel(item.text)"
+                             [attr.data-item-id]="item.id"
+                             matTooltipPosition="right"
+                             class="ui-suggest-item">
+                            <mat-checkbox *ngIf="multiple"
+                                          [checked]="isItemSelected(item)"
+                                          [indeterminate]="false">
+                            </mat-checkbox>
+                            <div [attr.aria-label]="intl.translateLabel(item.text)"
+                                 class="text-label text-ellipsis"
+                                 tabindex="-1">
+                                <mat-icon *ngIf="!!item?.icon?.svgIcon"
+                                          [svgIcon]="item!.icon!.svgIcon!"></mat-icon>
+                                <mat-icon *ngIf="!!item?.icon?.matIcon">{{item?.icon?.matIcon}}</mat-icon>
+                                <span class="text-label-rendered">{{ item?.icon?.iconOnly ? null :
+                                    intl.translateLabel(item.text) }}</span>
+                            </div>
+                            <mat-icon *ngIf="itemExpandable"
+                                      class="expand-icon">chevron_right</mat-icon>
+                        </div>
+                    </ng-template>
+                </mat-list-item>
+            </ng-container>
+
+            <mat-divider *ngIf="headerItems!.length"></mat-divider>
+
             <ng-container
                           *cdkVirtualFor="let item of renderItems; let index = index; trackBy: trackById; templateCacheSize: disableTooltip ? 20 : 0">
                 <mat-list-item *ngLet="drillDown && !!item?.expandable as itemExpandable"
-                               [class.active]="index === activeIndex"
+                               [class.active]="computedItemsOffset(index) === activeIndex"
                                [class.is-loading]="item.loading !== VirtualScrollItemStatus.loaded"
                                [class.readonly]="item.loading !== VirtualScrollItemStatus.loaded"
                                [class.selected]="!!item &&

projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts

@@ -82,6 +82,7 @@ class UiSuggestFixtureDirective {
     readonly?: boolean;
     enableCustomValue?: boolean;
     items?: ISuggestValue[];
+    headerItems?: ISuggestValue[];
     displayTemplateValue?: boolean;
     direction: 'up' | 'down' = 'down';
     displayPriority: 'default' | 'selected' = 'default';
@@ -287,14 +288,14 @@ const sharedSpecifications = (
             expect(itemListEntries.length).toEqual(0);
         });
 
-        it('should render the list open and not close on selection if alwaysExpanded is true', (async () => {
+        it('should render the list open and not close on selection if alwaysExpanded is true', (fakeAsync(() => {
             const items = generateSuggetionItemList(10);
 
             component.alwaysExpanded = true;
             component.items = items;
 
             fixture.detectChanges();
-            await fixture.whenStable();
+            tick(400);
 
             const itemListEntries = fixture.debugElement.queryAll(By.css('.mat-list-item'));
 
@@ -308,10 +309,11 @@ const sharedSpecifications = (
 
             currentListItem.nativeElement.dispatchEvent(EventGenerator.click);
             fixture.detectChanges();
+            tick(400);
 
             expect(itemListEntries).not.toBeNull();
             expect(itemListEntries.length).toEqual(items.length);
-        }));
+        })));
 
         it('should filter items if typed into', (done) => {
             let items = generateSuggetionItemList(40);
@@ -1321,6 +1323,66 @@ const sharedSpecifications = (
         });
     });
 
+    describe('Behavior: headerItems', () => {
+        it('should not work with custom value enabled', () => {
+            const error = new Error('enableCustomValue and headerItems are mutually exclusive options');
+            component.enableCustomValue = true;
+
+            expect(() => {
+                component.headerItems = generateSuggetionItemList(5);
+                fixture.detectChanges();
+            }).toThrow(error);
+        });
+
+        it('should display header items & fetched data in list', fakeAsync(() => {
+            const items = generateSuggetionItemList(10);
+            const headerItems = items.slice(0, 5);
+            const regularItems = items.slice(5, 10);
+
+            component.alwaysExpanded = true;
+            component.items = regularItems;
+            component.headerItems = headerItems;
+
+            fixture.detectChanges();
+            tick(1000);
+
+            const itemListEntries = fixture.debugElement.queryAll(By.css('.mat-list-item'));
+
+            expect(itemListEntries).not.toBeNull();
+            expect(itemListEntries.length).toEqual(items.length);
+            itemListEntries.forEach((entry, idx) => {
+                expect(entry.nativeElement.innerText).toBe(items[idx].text);
+            });
+        }));
+
+        it('should hide elements on search', fakeAsync(() => {
+            const items = generateSuggetionItemList(10, 'Item');
+            const headerItems = items.slice(0, 5);
+            const regularItems = items.slice(5, 10);
+
+            component.alwaysExpanded = true;
+            component.items = regularItems;
+            component.headerItems = headerItems;
+            component.searchable = true;
+
+            fixture.detectChanges();
+            tick(1000);
+
+            searchFor('Item', fixture);
+
+            fixture.detectChanges();
+            tick(1000);
+
+            const itemListEntries = fixture.debugElement.queryAll(By.css('.mat-list-item'));
+
+            expect(itemListEntries).not.toBeNull();
+            expect(itemListEntries.length).toEqual(regularItems.length);
+            itemListEntries.forEach((entry, idx) => {
+                expect(entry.nativeElement.innerText).toBe(regularItems[idx].text);
+            });
+        }));
+    });
+
     describe('Selection: single value', () => {
         it('should have one list item entry for each item provided', waitForAsync(async () => {
             fixture.detectChanges();
@@ -2324,6 +2386,7 @@ describe('Component: UiSuggest', () => {
                         [searchable]="searchable"
                         [enableCustomValue]="enableCustomValue"
                         [alwaysExpanded]="alwaysExpanded"
+                        [headerItems]="headerItems"
                         [items]="items"
                         [value]="value"
                         [direction]="direction"
@@ -2403,6 +2466,7 @@ describe('Component: UiSuggest', () => {
                             [clearable]="clearable"
                             [searchable]="searchable"
                             [enableCustomValue]="enableCustomValue"
+                            [headerItems]="headerItems"
                             [alwaysExpanded]="alwaysExpanded"
                             [items]="items"
                             [direction]="direction"
@@ -2592,6 +2656,7 @@ describe('Component: UiSuggest', () => {
                             [searchable]="searchable"
                             [enableCustomValue]="enableCustomValue"
                             [alwaysExpanded]="alwaysExpanded"
+                            [headerItems]="headerItems"
                             [items]="items"
                             [value]="value"
                             [direction]="direction"