Merge branch 'main' into users/makinc/dialog-cancel-workaround

.github/workflows/main.yml

@@ -6,6 +6,10 @@ on:
     branches:
       - '**'
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 env:
   GITHUB_SERVICE_USER: "rajsite"
   GITHUB_SERVICE_EMAIL: "rajsite@users.noreply.github.com"

.vscode/settings.json

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

CONTRIBUTING.md

@@ -25,7 +25,7 @@ This repository uses the following tooling. See below for more info.
 First step in development is to build the monorepo which requires the following to be installed:
 
 - Node.js version 20+ (run `node --version`) and npm version 10+ (run `npm --version`) which can be downloaded from https://nodejs.org/en/download/
-- .NET 6 SDK (`6.0.202 <= version < 7`) which can be downloaded from https://dotnet.microsoft.com/en-us/download
+- .NET 6 SDK (`6.0.418 <= version < 7`) which can be downloaded from https://dotnet.microsoft.com/en-us/download
    - Run `dotnet --info` to verify the required version of the SDK is installed. A `v6` install is required, but it's fine if later versions are installed too.
 
 From the `nimble` directory:

angular-workspace/lighthouserc.js

@@ -0,0 +1,27 @@
+module.exports = {
+    ci: {
+        collect: {
+            // Serve from dist folder so Angular project name is part of url path
+            // and shows up in GitHub status checks
+            staticDistDir: './dist/',
+            url: [
+                'http://localhost/example-client-app/#/customapp'
+            ],
+            numberOfRuns: 3,
+            settings: {
+                preset: 'desktop',
+                // Omit the pwa category
+                onlyCategories: ['accessibility', 'best-practices', 'performance', 'seo']
+            }
+        },
+        assert: {
+            assertions: {
+                'categories:performance': ['error', { minScore: 0.9 }],
+                'categories:accessibility': ['error', { minScore: 0.8 }]
+            }
+        },
+        upload: {
+            target: 'temporary-public-storage',
+        },
+    },
+};

angular-workspace/package.json

@@ -15,6 +15,7 @@
     "pack": "npm run pack:library && npm run pack:application",
     "pack:library": "cd dist/ni/nimble-angular && npm pack",
     "pack:application": "cd dist/example-client-app && npm pack",
+    "performance": "lhci autorun",
     "watch": "ng build --watch --configuration development",
     "test": "ng test --watch=false",
     "lint": "ng lint",
@@ -39,6 +40,7 @@
     "@angular/cli": "^15.2.10",
     "@angular/compiler-cli": "^15.2.10",
     "@angular/localize": "^15.2.10",
+    "@lhci/cli": "^0.13.0",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@ni/eslint-config-angular": "^6.0.0",
     "@ni/eslint-config-javascript": "^4.2.0",

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

@@ -42,6 +42,7 @@
             <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>
@@ -55,6 +56,7 @@
                 </nimble-select>
             </nimble-card>
         </div>
+        -->
         <div class="sub-container">
             <div class="container-label">Card Button</div>
             <nimble-card-button>
@@ -150,7 +152,7 @@
         </div>
         <div class="sub-container">
             <div class="container-label">Select</div>
-            <nimble-select appearance="underline">
+            <nimble-select filter-mode="standard" appearance="underline">
                 <nimble-list-option>Option 1</nimble-list-option>
                 <nimble-list-option>Option 2</nimble-list-option>
                 <nimble-list-option>Option 3</nimble-list-option>
@@ -288,6 +290,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 [];
+        }
+    }
 }

angular-workspace/projects/example-client-app/src/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <link rel="icon" href="favicon.ico" sizes="any">
   <title>Angular All Components Demo - Nimble Design System - NI</title>
+  <meta name="description" content="Angular demo showing all nimble components">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>