Angular column placeholder

angular-workspace/projects/ni/nimble-angular/table-column/anchor/nimble-table-column-anchor.directive.ts

@@ -31,6 +31,14 @@ export class NimbleTableColumnAnchorDirective extends NimbleTableColumnBaseDirec
         this.renderer.setProperty(this.elementRef.nativeElement, 'hrefFieldName', value);
     }
 
+    public get placeholder(): string | undefined {
+        return this.elementRef.nativeElement.placeholder;
+    }
+
+    @Input() public set placeholder(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'placeholder', value);
+    }
+
     public get appearance(): AnchorAppearance {
         return this.elementRef.nativeElement.appearance;
     }

angular-workspace/projects/ni/nimble-angular/table-column/anchor/tests/nimble-table-column-anchor.directive.spec.ts

@@ -160,6 +160,11 @@ describe('Nimble anchor table column', () => {
             expect(directive.groupingDisabled).toBeFalse();
             expect(nativeElement.groupingDisabled).toBeFalse();
         });
+
+        it('has expected defaults for placeholder', () => {
+            expect(directive.placeholder).toBeUndefined();
+            expect(nativeElement.placeholder).toBeUndefined();
+        });
     });
 
     describe('with template string values', () => {
@@ -187,6 +192,7 @@ describe('Nimble anchor table column', () => {
                     min-pixel-width="40"
                     group-index="0"
                     grouping-disabled
+                    placeholder="Custom placeholder"
                     >
                 </nimble-table-column-anchor>
             `
@@ -315,6 +321,11 @@ describe('Nimble anchor table column', () => {
             expect(directive.groupingDisabled).toBeTrue();
             expect(nativeElement.groupingDisabled).toBeTrue();
         });
+
+        it('will use template string values for placeholder', () => {
+            expect(directive.placeholder).toBe('Custom placeholder');
+            expect(nativeElement.placeholder).toBe('Custom placeholder');
+        });
     });
 
     describe('with property bound values', () => {
@@ -342,6 +353,7 @@ describe('Nimble anchor table column', () => {
                     [min-pixel-width]="minPixelWidth"
                     [group-index]="groupIndex"
                     [grouping-disabled]="groupingDisabled"
+                    [placeholder]="placeholder"
                     >
                     </nimble-table-column-anchor>
             `
@@ -370,6 +382,7 @@ describe('Nimble anchor table column', () => {
             public minPixelWidth: number | null = 40;
             public groupIndex: number | null = 0;
             public groupingDisabled = false;
+            public placeholder = 'Custom placeholder';
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -661,6 +674,17 @@ describe('Nimble anchor table column', () => {
             expect(directive.groupingDisabled).toBeTrue();
             expect(nativeElement.groupingDisabled).toBeTrue();
         });
+
+        it('can be configured with property binding for placeholder', () => {
+            expect(directive.placeholder).toBe('Custom placeholder');
+            expect(nativeElement.placeholder).toBe('Custom placeholder');
+
+            fixture.componentInstance.placeholder = 'Updated placeholder';
+            fixture.detectChanges();
+
+            expect(directive.placeholder).toBe('Updated placeholder');
+            expect(nativeElement.placeholder).toBe('Updated placeholder');
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -688,6 +712,7 @@ describe('Nimble anchor table column', () => {
                     [attr.min-pixel-width]="minPixelWidth"
                     [attr.group-index]="groupIndex"
                     [attr.grouping-disabled]="groupingDisabled"
+                    [attr.placeholder]="placeholder"
                     >
                 </nimble-table-column-anchor>
             `
@@ -716,6 +741,7 @@ describe('Nimble anchor table column', () => {
             public minPixelWidth: number | null = 40;
             public groupIndex: number | null = 0;
             public groupingDisabled = false;
+            public placeholder = 'Custom placeholder';
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -1007,5 +1033,16 @@ describe('Nimble anchor table column', () => {
             expect(directive.groupingDisabled).toBe(true);
             expect(nativeElement.groupingDisabled).toBe(true);
         });
+
+        it('can be configured with attribute binding for placeholder', () => {
+            expect(directive.placeholder).toBe('Custom placeholder');
+            expect(nativeElement.placeholder).toBe('Custom placeholder');
+
+            fixture.componentInstance.placeholder = 'Updated placeholder';
+            fixture.detectChanges();
+
+            expect(directive.placeholder).toBe('Updated placeholder');
+            expect(nativeElement.placeholder).toBe('Updated placeholder');
+        });
     });
 });

angular-workspace/projects/ni/nimble-angular/table-column/date-text/nimble-table-column-date-text.directive.ts

@@ -55,6 +55,14 @@ export class NimbleTableColumnDateTextDirective extends NimbleTableColumnBaseDir
         this.renderer.setProperty(this.elementRef.nativeElement, 'fieldName', value);
     }
 
+    public get placeholder(): string | undefined {
+        return this.elementRef.nativeElement.placeholder;
+    }
+
+    @Input() public set placeholder(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'placeholder', value);
+    }
+
     public get format(): DateTextFormat {
         return this.elementRef.nativeElement.format;
     }

angular-workspace/projects/ni/nimble-angular/table-column/date-text/tests/nimble-table-column-date-text.directive.spec.ts

@@ -115,6 +115,7 @@ describe('NimbleTableColumnDateText', () => {
                         custom-date-style="medium"
                         custom-time-style="full"
                         custom-hour-cycle="h23"
+                        placeholder="Custom placeholder"
                     ></nimble-table-column-date-text>
                 </nimble-table>
             `
@@ -293,6 +294,11 @@ describe('NimbleTableColumnDateText', () => {
             expect(directive.customHourCycle).toBe('h23');
             expect(nativeElement.customHourCycle).toBe('h23');
         });
+
+        it('will use template string values for placeholder', () => {
+            expect(directive.placeholder).toBe('Custom placeholder');
+            expect(nativeElement.placeholder).toBe('Custom placeholder');
+        });
     });
 
     describe('with property bound values', () => {
@@ -332,6 +338,7 @@ describe('NimbleTableColumnDateText', () => {
                         [custom-date-style]="customDateStyle"
                         [custom-time-style]="customTimeStyle"
                         [custom-hour-cycle]="customHourCycle"
+                        [placeholder]="placeholder"
                     ></nimble-table-column-date-text>
                 </nimble-table>
             `
@@ -370,6 +377,7 @@ describe('NimbleTableColumnDateText', () => {
             public customDateStyle: DateStyle = 'medium';
             public customTimeStyle: TimeStyle = 'full';
             public customHourCycle: HourCycleFormat = 'h23';
+            public placeholder = 'Custom placeholder';
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -980,6 +988,17 @@ describe('NimbleTableColumnDateText', () => {
             expect(directive.customHourCycle).toBeUndefined();
             expect(nativeElement.customHourCycle).toBeUndefined();
         });
+
+        it('can be configured with property binding for placeholder', () => {
+            expect(directive.placeholder).toBe('Custom placeholder');
+            expect(nativeElement.placeholder).toBe('Custom placeholder');
+
+            fixture.componentInstance.placeholder = 'Updated placeholder';
+            fixture.detectChanges();
+
+            expect(directive.placeholder).toBe('Updated placeholder');
+            expect(nativeElement.placeholder).toBe('Updated placeholder');
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -1019,6 +1038,7 @@ describe('NimbleTableColumnDateText', () => {
                         [attr.custom-date-style]="customDateStyle"
                         [attr.custom-time-style]="customTimeStyle"
                         [attr.custom-hour-cycle]="customHourCycle"
+                        [attr.placeholder]="placeholder"
                     ></nimble-table-column-date-text>
                 </nimble-table>
             `
@@ -1057,6 +1077,7 @@ describe('NimbleTableColumnDateText', () => {
             public customDateStyle: DateStyle = 'medium';
             public customTimeStyle: TimeStyle = 'full';
             public customHourCycle: HourCycleFormat = 'h23';
+            public placeholder = 'Custom placeholder';
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -1667,5 +1688,16 @@ describe('NimbleTableColumnDateText', () => {
             expect(directive.customHourCycle).toBeNull();
             expect(nativeElement.customHourCycle).toBeNull();
         });
+
+        it('can be configured with attribute binding for placeholder', () => {
+            expect(directive.placeholder).toBe('Custom placeholder');
+            expect(nativeElement.placeholder).toBe('Custom placeholder');
+
+            fixture.componentInstance.placeholder = 'Updated placeholder';
+            fixture.detectChanges();
+
+            expect(directive.placeholder).toBe('Updated placeholder');
+            expect(nativeElement.placeholder).toBe('Updated placeholder');
+        });
     });
 });

angular-workspace/projects/ni/nimble-angular/table-column/duration-text/nimble-table-column-duration-text.directive.ts

@@ -21,6 +21,14 @@ export class NimbleTableColumnDurationTextDirective extends NimbleTableColumnBas
         this.renderer.setProperty(this.elementRef.nativeElement, 'fieldName', value);
     }
 
+    public get placeholder(): string | undefined {
+        return this.elementRef.nativeElement.placeholder;
+    }
+
+    @Input() public set placeholder(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'placeholder', value);
+    }
+
     public get fractionalWidth(): number | null | undefined {
         return this.elementRef.nativeElement.fractionalWidth;
     }

angular-workspace/projects/ni/nimble-angular/table-column/duration-text/tests/nimble-table-column-duration-text.directive.spec.ts

@@ -35,6 +35,7 @@ describe('NimbleTableColumnDurationText', () => {
                         sort-index="0"
                         group-index="0"
                         grouping-disabled
+                        placeholder="Custom placeholder"
                     ></nimble-table-column-duration-text>
                 </nimble-table>
             `
@@ -113,6 +114,11 @@ describe('NimbleTableColumnDurationText', () => {
             expect(directive.groupingDisabled).toBeTrue();
             expect(nativeElement.groupingDisabled).toBeTrue();
         });
+
+        it('will use template string values for placeholder', () => {
+            expect(directive.placeholder).toBe('Custom placeholder');
+            expect(nativeElement.placeholder).toBe('Custom placeholder');
+        });
     });
 
     describe('with property bound values', () => {
@@ -132,6 +138,7 @@ describe('NimbleTableColumnDurationText', () => {
                         [sort-index]="sortIndex"
                         [group-index]="groupIndex"
                         [grouping-disabled]="groupingDisabled"
+                        [placeholder]="placeholder"
                     ></nimble-table-column-duration-text>
                 </nimble-table>
             `
@@ -150,6 +157,7 @@ describe('NimbleTableColumnDurationText', () => {
             public sortIndex: number | null = 0;
             public groupIndex: number | null = 0;
             public groupingDisabled = false;
+            public placeholder = 'Custom placeholder';
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -331,6 +339,17 @@ describe('NimbleTableColumnDurationText', () => {
             expect(directive.groupingDisabled).toBeTrue();
             expect(nativeElement.groupingDisabled).toBeTrue();
         });
+
+        it('can be configured with property binding for placeholder', () => {
+            expect(directive.placeholder).toBe('Custom placeholder');
+            expect(nativeElement.placeholder).toBe('Custom placeholder');
+
+            fixture.componentInstance.placeholder = 'Updated placeholder';
+            fixture.detectChanges();
+
+            expect(directive.placeholder).toBe('Updated placeholder');
+            expect(nativeElement.placeholder).toBe('Updated placeholder');
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -350,6 +369,7 @@ describe('NimbleTableColumnDurationText', () => {
                         [attr.sort-index]="sortIndex"
                         [attr.group-index]="groupIndex"
                         [attr.grouping-disabled]="groupingDisabled"
+                        [attr.placeholder]="placeholder"
                     ></nimble-table-column-duration-text>
                 </nimble-table>
             `
@@ -368,6 +388,7 @@ describe('NimbleTableColumnDurationText', () => {
             public sortIndex: number | null = 0;
             public groupIndex: number | null = 0;
             public groupingDisabled = false;
+            public placeholder = 'Custom placeholder';
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -549,5 +570,16 @@ describe('NimbleTableColumnDurationText', () => {
             expect(directive.groupingDisabled).toBe(true);
             expect(nativeElement.groupingDisabled).toBe(true);
         });
+
+        it('can be configured with attribute binding for placeholder', () => {
+            expect(directive.placeholder).toBe('Custom placeholder');
+            expect(nativeElement.placeholder).toBe('Custom placeholder');
+
+            fixture.componentInstance.placeholder = 'Updated placeholder';
+            fixture.detectChanges();
+
+            expect(directive.placeholder).toBe('Updated placeholder');
+            expect(nativeElement.placeholder).toBe('Updated placeholder');
+        });
     });
 });

angular-workspace/projects/ni/nimble-angular/table-column/number-text/nimble-table-column-number-text.directive.ts

@@ -22,6 +22,14 @@ export class NimbleTableColumnNumberTextDirective extends NimbleTableColumnBaseD
         this.renderer.setProperty(this.elementRef.nativeElement, 'fieldName', value);
     }
 
+    public get placeholder(): string | undefined {
+        return this.elementRef.nativeElement.placeholder;
+    }
+
+    @Input() public set placeholder(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'placeholder', value);
+    }
+
     public get format(): NumberTextFormat {
         return this.elementRef.nativeElement.format;
     }