Angular Select placeholder integration

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>

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 {

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"
+    }
+}

angular-workspace/projects/ni/nimble-angular/select/testing/public-api.ts

@@ -0,0 +1 @@
+export * from './select.pageobject';

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 };

angular-workspace/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,

angular-workspace/projects/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();
+        });
     });
 });