Add open attribute to Combobox Angular directive. (#1507)

# Pull Request ## 🤨 Rationale - #1324
ni · Sep 14, 2023 · df0bf79 · df0bf79
1 parent 4b5f47e
commit df0bf79
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/...workspace/projects/ni/nimble-angular/src/directives/combobox/nimble-combobox.directive.ts b/...workspace/projects/ni/nimble-angular/src/directives/combobox/nimble-combobox.directive.ts
@@ -71,5 +71,13 @@ export class NimbleComboboxDirective {
         return this.elementRef.nativeElement.value;
     }
 
+    public get open(): boolean {
+        return this.elementRef.nativeElement.open;
+    }
+
+    @Input() public set open(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'open', toBooleanProperty(value));
+    }
+
     public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<Combobox>) {}
 }
diff --git a/...rojects/ni/nimble-angular/src/directives/combobox/tests/nimble-combobox.directive.spec.ts b/...rojects/ni/nimble-angular/src/directives/combobox/tests/nimble-combobox.directive.spec.ts
@@ -79,6 +79,17 @@ describe('Nimble combobox', () => {
             expect(directive.errorVisible).toBeTrue();
             expect(nativeElement.errorVisible).toBeTrue();
         });
+
+        it('has expected defaults for open', () => {
+            expect(directive.open).toBeFalse();
+            expect(nativeElement.open).toBeFalse();
+        });
+
+        it('can use the directive to set open', () => {
+            directive.open = true;
+            expect(directive.open).toBeTrue();
+            expect(nativeElement.open).toBeTrue();
+        });
     });
 
     describe('with template string values', () => {
@@ -91,6 +102,7 @@ describe('Nimble combobox', () => {
                     placeholder="Enter value:"
                     error-text="error text"
                     error-visible
+                    open
                 >
                 </nimble-combobox>`
         })
@@ -143,6 +155,11 @@ describe('Nimble combobox', () => {
             expect(directive.errorVisible).toBeTrue();
             expect(nativeElement.errorVisible).toBeTrue();
         });
+
+        it('will use template string values for open', () => {
+            expect(directive.open).toBeTrue();
+            expect(nativeElement.open).toBeTrue();
+        });
     });
 
     describe('with property bound values', () => {
@@ -155,6 +172,7 @@ describe('Nimble combobox', () => {
                     [placeholder]="placeholder"
                     [error-text]="errorText"
                     [error-visible]="errorVisible"
+                    [open]="open"
                 >
                 </nimble-combobox>
             `
@@ -168,6 +186,7 @@ describe('Nimble combobox', () => {
             public errorText = 'initial value';
             public placeholder = 'Enter value:';
             public errorVisible = false;
+            public open = false;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -251,6 +270,17 @@ describe('Nimble combobox', () => {
             expect(directive.errorVisible).toBeTrue();
             expect(nativeElement.errorVisible).toBeTrue();
         });
+
+        it('can be configured with property binding for open', () => {
+            expect(directive.open).toBeFalse();
+            expect(nativeElement.open).toBeFalse();
+
+            fixture.componentInstance.open = true;
+            fixture.detectChanges();
+
+            expect(directive.open).toBeTrue();
+            expect(nativeElement.open).toBeTrue();
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -263,6 +293,7 @@ describe('Nimble combobox', () => {
                     [attr.placeholder]="placeholder"
                     [attr.error-text]="errorText"
                     [attr.error-visible]="errorVisible"
+                    [attr.open]="open"
                 >
                 </nimble-combobox>
             `
@@ -276,6 +307,7 @@ describe('Nimble combobox', () => {
             public placeholder = 'Enter value:';
             public errorText = 'initial value';
             public errorVisible: BooleanValueOrAttribute = null;
+            public open: BooleanValueOrAttribute = null;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -359,6 +391,17 @@ describe('Nimble combobox', () => {
             expect(directive.errorVisible).toBeTrue();
             expect(nativeElement.errorVisible).toBeTrue();
         });
+
+        it('can be configured with attribute binding for open', () => {
+            expect(directive.open).toBeFalse();
+            expect(nativeElement.open).toBeFalse();
+
+            fixture.componentInstance.open = '';
+            fixture.detectChanges();
+
+            expect(directive.open).toBeTrue();
+            expect(nativeElement.open).toBeTrue();
+        });
     });
 
     describe('can access value through directive', () => {

diff --git a/change/@ni-nimble-angular-f19cce79-6069-41ae-8615-dac26ca18408.json b/change/@ni-nimble-angular-f19cce79-6069-41ae-8615-dac26ca18408.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add open attribute to Combobox Angular directive.",
+  "packageName": "@ni/nimble-angular",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}