Merge branch 'main' into user/fvisser/storybook-8-beta-test

ni · Mar 12, 2024 · 87d0f50 · 87d0f50
2 parents 2816c86 + 880dfa1
commit 87d0f50
Show file tree

Hide file tree

Showing 37 changed files with 609 additions and 107 deletions.
diff --git a/angular-workspace/package.json b/angular-workspace/package.json
@@ -60,6 +60,6 @@
     "ng-packagr": "^15.2.2",
     "playwright": "1.40.0",
     "rollup": "^4.12.0",
-    "typescript": "~4.8.2"
+    "typescript": "~4.9.5"
   }
 }
diff --git a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html
@@ -151,16 +151,19 @@
         <div class="sub-container">
             <div class="container-label">Select</div>
             <nimble-select filter-mode="standard" appearance="underline">
+                <nimble-list-option hidden selected disabled>Select an option</nimble-list-option>
                 <nimble-list-option>Option 1</nimble-list-option>
                 <nimble-list-option>Option 2</nimble-list-option>
                 <nimble-list-option>Option 3</nimble-list-option>
             </nimble-select>
             <nimble-select appearance="outline">
+                <nimble-list-option hidden selected disabled>Select an option</nimble-list-option>
                 <nimble-list-option>Option 1</nimble-list-option>
                 <nimble-list-option>Option 2</nimble-list-option>
                 <nimble-list-option>Option 3</nimble-list-option>
             </nimble-select>
             <nimble-select appearance="block">
+                <nimble-list-option hidden selected disabled>Select an option</nimble-list-option>
                 <nimble-list-option>Option 1</nimble-list-option>
                 <nimble-list-option>Option 2</nimble-list-option>
                 <nimble-list-option>Option 3</nimble-list-option>

diff --git a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.ts b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.ts
@@ -110,14 +110,6 @@ export class CustomAppComponent implements AfterViewInit {
     public constructor(@Inject(ActivatedRoute) public readonly route: ActivatedRoute) {
         this.tableData$ = this.tableDataSubject.asObservable();
         this.addTableRows(10);
-
-        this.comboboxItems = [];
-        for (let i = 0; i < 300; i++) {
-            this.comboboxItems.push({
-                first: i.toString(),
-                last: i.toString()
-            });
-        }
     }
 
     public ngAfterViewInit(): void {

diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Tue, 12 Mar 2024 21:01:54 GMT",
+      "version": "20.2.21",
+      "tag": "@ni/nimble-angular_v20.2.21",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v21.10.1",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 07 Mar 2024 21:20:52 GMT",
       "version": "20.2.20",

diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-angular
 
-This log was last generated on Thu, 07 Mar 2024 21:20:52 GMT and should not be manually modified.
+This log was last generated on Tue, 12 Mar 2024 21:01:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 20.2.21
+
+Tue, 12 Mar 2024 21:01:54 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v21.10.1
+
 ## 20.2.20
 
 Thu, 07 Mar 2024 21:20:52 GMT

diff --git a/angular-workspace/projects/ni/nimble-angular/package.json b/angular-workspace/projects/ni/nimble-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "20.2.20",
+  "version": "20.2.21",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "cd ../../../ && npm run build:library && cd dist/ni/nimble-angular && npm publish"
@@ -31,7 +31,7 @@
     "@angular/forms": "^15.2.10",
     "@angular/localize": "^15.2.10",
     "@angular/router": "^15.2.10",
-    "@ni/nimble-components": "^21.10.0"
+    "@ni/nimble-components": "^21.10.1"
   },
   "dependencies": {
     "tslib": "^2.2.0"

diff --git a/angular-workspace/projects/ni/nimble-angular/select/testing/ng-package.json b/angular-workspace/projects/ni/nimble-angular/select/testing/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}
diff --git a/angular-workspace/projects/ni/nimble-angular/select/testing/public-api.ts b/angular-workspace/projects/ni/nimble-angular/select/testing/public-api.ts
@@ -0,0 +1 @@
+export * from './select.pageobject';
diff --git a/angular-workspace/projects/ni/nimble-angular/select/testing/select.pageobject.ts b/angular-workspace/projects/ni/nimble-angular/select/testing/select.pageobject.ts
@@ -0,0 +1,3 @@
+import { SelectPageObject } from '@ni/nimble-components/dist/esm/select/testing/select.pageobject';
+
+export { SelectPageObject };
diff --git a/...ace/projects/ni/nimble-angular/src/directives/list-option/nimble-list-option.directive.ts b/...ace/projects/ni/nimble-angular/src/directives/list-option/nimble-list-option.directive.ts
@@ -25,6 +25,22 @@ export class NimbleListOptionDirective {
         this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
     }
 
+    public get selected(): boolean {
+        return this.elementRef.nativeElement.selected;
+    }
+
+    @Input() public set selected(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'selected', toBooleanProperty(value));
+    }
+
+    public get hidden(): boolean {
+        return this.elementRef.nativeElement.hidden;
+    }
+
+    @Input() public set hidden(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'hidden', toBooleanProperty(value));
+    }
+
     public constructor(
         private readonly elementRef: ElementRef<ListOption>,
         private readonly renderer: Renderer2,

diff --git a/...s/ni/nimble-angular/src/directives/list-option/tests/nimble-list-option.directive.spec.ts b/...s/ni/nimble-angular/src/directives/list-option/tests/nimble-list-option.directive.spec.ts
@@ -48,13 +48,25 @@ describe('Nimble listbox option', () => {
             expect(directive.disabled).toBeUndefined();
             expect(nativeElement.disabled).toBeUndefined();
         });
+
+        it('has expected defaults for selected', () => {
+            expect(directive.selected).toBeFalse();
+            expect(nativeElement.selected).toBeFalse();
+        });
+
+        it('has expected defaults for hidden', () => {
+            expect(directive.hidden).toBeFalse();
+            expect(nativeElement.hidden).toBeFalse();
+        });
     });
 
     describe('with template string values', () => {
         @Component({
             template: `
                 <nimble-list-option #listOption
                     disabled
+                    selected
+                    hidden
                 ></nimble-list-option>
             `
         })
@@ -82,13 +94,25 @@ describe('Nimble listbox option', () => {
             expect(directive.disabled).toBeTrue();
             expect(nativeElement.disabled).toBeTrue();
         });
+
+        it('will use template string values for selected', () => {
+            expect(directive.selected).toBeTrue();
+            expect(nativeElement.selected).toBeTrue();
+        });
+
+        it('will use template string values for hidden', () => {
+            expect(directive.hidden).toBeTrue();
+            expect(nativeElement.hidden).toBeTrue();
+        });
     });
 
     describe('with property bound values', () => {
         @Component({
             template: `
                 <nimble-list-option #listOption
                     [disabled]="disabled"
+                    [selected]="selected"
+                    [hidden]="hidden"
                 ></nimble-list-option>
             `
         })
@@ -97,6 +121,8 @@ describe('Nimble listbox option', () => {
             @ViewChild('listOption', { read: ElementRef }) public elementRef: ElementRef<ListOption>;
 
             public disabled = false;
+            public selected = false;
+            public hidden = false;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -124,13 +150,37 @@ describe('Nimble listbox option', () => {
             expect(directive.disabled).toBeTrue();
             expect(nativeElement.disabled).toBeTrue();
         });
+
+        it('can be configured with property binding for selected', () => {
+            expect(directive.selected).toBeFalse();
+            expect(nativeElement.selected).toBeFalse();
+
+            fixture.componentInstance.selected = true;
+            fixture.detectChanges();
+
+            expect(directive.selected).toBeTrue();
+            expect(nativeElement.selected).toBeTrue();
+        });
+
+        it('can be configured with property binding for hidden', () => {
+            expect(directive.hidden).toBeFalse();
+            expect(nativeElement.hidden).toBeFalse();
+
+            fixture.componentInstance.hidden = true;
+            fixture.detectChanges();
+
+            expect(directive.hidden).toBeTrue();
+            expect(nativeElement.hidden).toBeTrue();
+        });
     });
 
     describe('with property attribute values', () => {
         @Component({
             template: `
                 <nimble-list-option #listOption
-                    [attr.disabled]="disabled">
+                    [attr.disabled]="disabled"
+                    [attr.selected]="selected"
+                    [attr.hidden]="hidden">
                 </nimble-list-option>
             `
         })
@@ -139,6 +189,8 @@ describe('Nimble listbox option', () => {
             @ViewChild('listOption', { read: ElementRef }) public elementRef: ElementRef<ListOption>;
 
             public disabled: BooleanValueOrAttribute = null;
+            public selected: BooleanValueOrAttribute = null;
+            public hidden: BooleanValueOrAttribute = null;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -166,5 +218,27 @@ describe('Nimble listbox option', () => {
             expect(directive.disabled).toBeTrue();
             expect(nativeElement.disabled).toBeTrue();
         });
+
+        it('can be configured with attribute binding for selected', () => {
+            expect(directive.selected).toBeFalse();
+            expect(nativeElement.selected).toBeFalse();
+
+            fixture.componentInstance.selected = '';
+            fixture.detectChanges();
+
+            expect(directive.selected).toBeTrue();
+            expect(nativeElement.selected).toBeTrue();
+        });
+
+        it('can be configured with attribute binding for hidden', () => {
+            expect(directive.hidden).toBeFalse();
+            expect(nativeElement.hidden).toBeFalse();
+
+            fixture.componentInstance.hidden = '';
+            fixture.detectChanges();
+
+            expect(directive.hidden).toBeTrue();
+            expect(nativeElement.hidden).toBeTrue();
+        });
     });
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { SelectPageObject } from '@ni/nimble-components/dist/esm/select/testing/select.pageobject';

		export { SelectPageObject };