Merge branch 'select-placeholder' of https://github.com/ni/nimble int…

…o select-placeholder

.vscode/settings.json

@@ -6,7 +6,6 @@
       "mode": "auto"
     }
   ],
-  "xd.globalEditor": true,
   "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
   "omnisharp.useModernNet": true
 }

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html

@@ -42,7 +42,6 @@
             <nimble-anchor-button nimbleRouterLink="/customapp" appearance="block">Block Anchor Button</nimble-anchor-button>
             <nimble-anchor-button nimbleRouterLink="/customapp" appearance="ghost">Ghost Anchor Button</nimble-anchor-button>
         </div>
-        <!-- Disabled as it breaks accessibility tooling, see: https://github.com/ni/nimble/issues/1650
         <div class="sub-container">
             <div class="container-label">Card</div>
             <nimble-card>
@@ -56,7 +55,6 @@
                 </nimble-select>
             </nimble-card>
         </div>
-        -->
         <div class="sub-container">
             <div class="container-label">Card Button</div>
             <nimble-card-button>
@@ -290,6 +288,28 @@
             </nimble-table>
             <nimble-button class="add-table-row-button" (click)="addTableRows(10)">Add rows</nimble-button>
         </div>
+        <div class="sub-container">
+            <div class="container-label">Table with delayed hierarchy</div>
+            <nimble-table #delayedHierarchyTable id-field-name="id" parent-id-field-name="parentId" selection-mode="multiple" (row-expand-toggle)="onRowExpandToggle($event)">
+                <nimble-table-column-text
+                    field-name="firstName"
+                >
+                    First name
+                </nimble-table-column-text>
+                <nimble-table-column-text
+                    field-name="lastName"
+                >
+                    Last name
+                </nimble-table-column-text>
+                <nimble-table-column-number-text
+                    field-name="age"
+                    format="decimal"
+                    decimal-digits="0"
+                >
+                    Age
+                </nimble-table-column-number-text>
+            </nimble-table>
+        </div>
         <div class="sub-container">
             <div class="container-label">Tabs</div>
             <nimble-tabs [(activeid)]="activeTabId">

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.ts

@@ -1,8 +1,8 @@
 /* eslint-disable no-alert */
-import { Component, Inject, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, Inject, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { DrawerLocation, MenuItem, NimbleDialogDirective, NimbleDrawerDirective, OptionNotFound, OPTION_NOT_FOUND, UserDismissed } from '@ni/nimble-angular';
-import type { TableRecord } from '@ni/nimble-angular/table';
+import { NimbleTableDirective, TableRecordDelayedHierarchyState, TableRecord, TableRowExpansionToggleEventDetail, TableSetRecordHierarchyOptions } from '@ni/nimble-angular/table';
 import { NimbleRichTextEditorDirective } from '@ni/nimble-angular/rich-text/editor';
 import { BehaviorSubject, Observable } from 'rxjs';
 
@@ -25,12 +25,21 @@ interface SimpleTableRecord extends TableRecord {
     duration: number;
 }
 
+interface PersonTableRecord extends TableRecord {
+    id: string;
+    parentId?: string;
+    firstName: string;
+    lastName: string;
+    age: number;
+    hasChildren?: boolean;
+}
+
 @Component({
     selector: 'example-customapp',
     templateUrl: './customapp.component.html',
     styleUrls: ['./customapp.component.scss']
 })
-export class CustomAppComponent {
+export class CustomAppComponent implements AfterViewInit {
     public bannerOpen = false;
     public dialogCloseReason: string;
     public drawerCloseReason: string;
@@ -63,10 +72,40 @@ export class CustomAppComponent {
 
     public readonly tableData$: Observable<SimpleTableRecord[]>;
     private readonly tableDataSubject = new BehaviorSubject<SimpleTableRecord[]>([]);
+    private delayedHierarchyTableData: PersonTableRecord[] = [
+        {
+            firstName: 'Jacqueline',
+            lastName: 'Bouvier',
+            age: 80,
+            id: 'jacqueline-bouvier',
+            parentId: undefined,
+            hasChildren: true
+        },
+        {
+            firstName: 'Mona',
+            lastName: 'Simpson',
+            age: 77,
+            id: 'mona-simpson',
+            parentId: undefined,
+            hasChildren: true
+        },
+        {
+            firstName: 'Agnes',
+            lastName: 'Skinner',
+            age: 88,
+            id: 'agnes-skinner',
+            parentId: undefined,
+            hasChildren: true
+        },
+    ];
+
+    private readonly recordsLoadingChildren = new Set<string>();
+    private readonly recordsWithLoadedChildren = new Set<string>();
 
     @ViewChild('dialog', { read: NimbleDialogDirective }) private readonly dialog: NimbleDialogDirective<string>;
     @ViewChild('drawer', { read: NimbleDrawerDirective }) private readonly drawer: NimbleDrawerDirective<string>;
     @ViewChild('editor', { read: NimbleRichTextEditorDirective }) private readonly editor: NimbleRichTextEditorDirective;
+    @ViewChild('delayedHierarchyTable', { read: NimbleTableDirective }) private readonly delayedHierarchyTable: NimbleTableDirective<PersonTableRecord>;
 
     public constructor(@Inject(ActivatedRoute) public readonly route: ActivatedRoute) {
         this.tableData$ = this.tableDataSubject.asObservable();
@@ -81,6 +120,10 @@ export class CustomAppComponent {
         }
     }
 
+    public ngAfterViewInit(): void {
+        void this.updateDelayedHierarchyTable();
+    }
+
     public onMenuButtonMenuChange(event: Event): void {
         const menuItemText = (event.target as MenuItem).innerText;
         alert(`${menuItemText} selected`);
@@ -139,4 +182,110 @@ export class CustomAppComponent {
     public loadRichTextEditorContent(): void {
         this.editor.setMarkdown(this.markdownString);
     }
+
+    public onRowExpandToggle(e: Event): void {
+        const event = e as CustomEvent<TableRowExpansionToggleEventDetail>;
+        const recordId = event.detail.recordId;
+        if (event.detail.newState && !this.recordsLoadingChildren.has(recordId) && !this.recordsWithLoadedChildren.has(recordId)) {
+            const record = this.delayedHierarchyTableData.find(x => x.id === recordId && x.hasChildren);
+            if (!record) {
+                return;
+            }
+
+            this.recordsLoadingChildren.add(recordId);
+            void this.updateDelayedHierarchyTable(false);
+
+            window.setTimeout(() => {
+                this.delayedHierarchyTableData = [
+                    ...this.delayedHierarchyTableData,
+                    ...this.getChildren(recordId)
+                ];
+                this.recordsLoadingChildren.delete(recordId);
+                this.recordsWithLoadedChildren.add(recordId);
+                void this.updateDelayedHierarchyTable();
+            }, 1500);
+        }
+    }
+
+    private async updateDelayedHierarchyTable(setData = true): Promise<void> {
+        if (setData) {
+            await this.delayedHierarchyTable.setData(this.delayedHierarchyTableData);
+        }
+        const hierarchyOptions = this.delayedHierarchyTableData.filter(person => {
+            return person.hasChildren && !this.recordsWithLoadedChildren.has(person.id);
+        }).map<TableSetRecordHierarchyOptions>(person => {
+            const state = this.recordsLoadingChildren.has(person.id)
+                ? TableRecordDelayedHierarchyState.loadingChildren
+                : TableRecordDelayedHierarchyState.canLoadChildren;
+            return {
+                recordId: person.id,
+                options: { delayedHierarchyState: state }
+            };
+        });
+        await this.delayedHierarchyTable.setRecordHierarchyOptions(hierarchyOptions);
+    }
+
+    private getChildren(id: string): PersonTableRecord[] {
+        switch (id) {
+            case 'jacqueline-bouvier':
+                return [{
+                    firstName: 'Marge',
+                    lastName: 'Simpson',
+                    age: 35,
+                    id: 'marge-simpson',
+                    parentId: id,
+                    hasChildren: true
+                }, {
+                    firstName: 'Selma',
+                    lastName: 'Bouvier',
+                    age: 45,
+                    id: 'selma-bouvier',
+                    parentId: id
+                }, {
+                    firstName: 'Patty',
+                    lastName: 'Bouvier',
+                    age: 45,
+                    id: 'patty-bouvier',
+                    parentId: id
+                }];
+            case 'marge-simpson':
+                return [{
+                    firstName: 'Bart',
+                    lastName: 'Simpson',
+                    age: 12,
+                    id: 'bart-simpson',
+                    parentId: id
+                }, {
+                    firstName: 'Lisa',
+                    lastName: 'Simpson',
+                    age: 10,
+                    id: 'lisa-simpson',
+                    parentId: id
+                }, {
+                    firstName: 'Maggie',
+                    lastName: 'Simpson',
+                    age: 1,
+                    id: 'maggie-simpson',
+                    parentId: id
+                }];
+            case 'mona-simpson':
+                return [{
+                    firstName: 'Homer',
+                    lastName: 'Simpson',
+                    age: 35,
+                    id: 'homer-simpson',
+                    parentId: id
+                }];
+            case 'agnes-skinner':
+                return [{
+                    firstName: 'Seymour',
+                    lastName: 'Skinner',
+                    age: 42,
+                    id: 'seymour-skinner',
+                    parentId: id
+                }];
+            default:
+                return [];
+        }
+    }
 }