diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json index 609bc48dbd..ebd221df77 100644 --- 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": "Thu, 28 Mar 2024 00:47:47 GMT", + "version": "20.6.0", + "tag": "@ni/nimble-angular_v20.6.0", + "comments": { + "minor": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-angular", + "commit": "a9ffce872954c88d7cf4ad0dd84eb55433953886", + "comment": "Add support for column placeholders" + } + ] + } + }, { "date": "Wed, 27 Mar 2024 21:22:02 GMT", "version": "20.5.7", diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md index 3217ba3a10..58d5172701 100644 --- 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 Wed, 27 Mar 2024 21:22:02 GMT and should not be manually modified. +This log was last generated on Thu, 28 Mar 2024 00:47:47 GMT and should not be manually modified. +## 20.6.0 + +Thu, 28 Mar 2024 00:47:47 GMT + +### Minor changes + +- Add support for column placeholders ([ni/nimble@a9ffce8](https://github.com/ni/nimble/commit/a9ffce872954c88d7cf4ad0dd84eb55433953886)) + ## 20.5.7 Wed, 27 Mar 2024 21:22:02 GMT diff --git a/angular-workspace/projects/ni/nimble-angular/package.json b/angular-workspace/projects/ni/nimble-angular/package.json index 1e0b773bfd..4adff9d932 100644 --- 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.5.7", + "version": "20.6.0", "description": "Angular components for the NI Nimble Design System", "scripts": { "invoke-publish": "cd ../../../ && npm run build:library && cd dist/ni/nimble-angular && npm publish" diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/anchor/nimble-table-column-anchor.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/anchor/nimble-table-column-anchor.directive.ts index 3875528934..71fcaadf5d 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/anchor/nimble-table-column-anchor.directive.ts +++ b/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; } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/anchor/tests/nimble-table-column-anchor.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/table-column/anchor/tests/nimble-table-column-anchor.directive.spec.ts index 85389d5d2b..c4e64d8b82 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/anchor/tests/nimble-table-column-anchor.directive.spec.ts +++ b/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" > ` @@ -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" > ` @@ -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; @@ -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" > ` @@ -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; @@ -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'); + }); }); }); diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/date-text/nimble-table-column-date-text.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/date-text/nimble-table-column-date-text.directive.ts index c8a24548a5..89c4c91963 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/date-text/nimble-table-column-date-text.directive.ts +++ b/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; } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/date-text/tests/nimble-table-column-date-text.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/table-column/date-text/tests/nimble-table-column-date-text.directive.spec.ts index b7b8e413d9..f370a1b5b5 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/date-text/tests/nimble-table-column-date-text.directive.spec.ts +++ b/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" > ` @@ -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" > ` @@ -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; @@ -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" > ` @@ -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; @@ -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'); + }); }); }); diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/duration-text/nimble-table-column-duration-text.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/duration-text/nimble-table-column-duration-text.directive.ts index 365557b678..64998dcc8f 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/duration-text/nimble-table-column-duration-text.directive.ts +++ b/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; } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/duration-text/tests/nimble-table-column-duration-text.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/table-column/duration-text/tests/nimble-table-column-duration-text.directive.spec.ts index d245979862..f2d1e8d6d7 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/duration-text/tests/nimble-table-column-duration-text.directive.spec.ts +++ b/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" > ` @@ -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" > ` @@ -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; @@ -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" > ` @@ -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; @@ -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'); + }); }); }); diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/number-text/nimble-table-column-number-text.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/number-text/nimble-table-column-number-text.directive.ts index d5219fcc92..dd40f0970e 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/number-text/nimble-table-column-number-text.directive.ts +++ b/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; } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/number-text/tests/nimble-table-column-number-text.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/table-column/number-text/tests/nimble-table-column-number-text.directive.spec.ts index 96089e7fa4..e00e55e5c2 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/number-text/tests/nimble-table-column-number-text.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/number-text/tests/nimble-table-column-number-text.directive.spec.ts @@ -79,6 +79,7 @@ describe('NimbleTableColumnNumberText', () => { decimal-digits="6" decimal-maximum-digits="7" alignment="${NumberTextAlignment.left}" + placeholder="Custom placeholder" > ` @@ -177,6 +178,11 @@ describe('NimbleTableColumnNumberText', () => { expect(directive.decimalMaximumDigits).toBe(7); expect(nativeElement.decimalMaximumDigits).toBe(7); }); + + 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', () => { @@ -200,6 +206,7 @@ describe('NimbleTableColumnNumberText', () => { [decimal-digits]="decimalDigits" [decimal-maximum-digits]="decimalMaximumDigits" [alignment]="alignment" + [placeholder]="placeholder" > ` @@ -222,6 +229,7 @@ describe('NimbleTableColumnNumberText', () => { public decimalDigits: number | null = 9; public decimalMaximumDigits: number | null = 10; public alignment: NumberTextAlignment = NumberTextAlignment.left; + public placeholder = 'Custom placeholder'; } let fixture: ComponentFixture; @@ -469,6 +477,17 @@ describe('NimbleTableColumnNumberText', () => { expect(directive.decimalMaximumDigits).toBeNull(); expect(nativeElement.decimalMaximumDigits).toBeNull(); }); + + 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', () => { @@ -492,6 +511,7 @@ describe('NimbleTableColumnNumberText', () => { [attr.decimal-digits]="decimalDigits" [attr.decimal-maximum-digits]="decimalMaximumDigits" [attr.alignment]="alignment" + [attr.placeholder]="placeholder" > ` @@ -514,6 +534,7 @@ describe('NimbleTableColumnNumberText', () => { public decimalDigits: number | null = 9; public decimalMaximumDigits: number | null = 10; public alignment: NumberTextAlignment = NumberTextAlignment.left; + public placeholder = 'Custom placeholder'; } let fixture: ComponentFixture; @@ -743,7 +764,7 @@ describe('NimbleTableColumnNumberText', () => { expect(nativeElement.decimalDigits).toBeNull(); }); - it('can be configured with property binding for decimalMaximumDigits', () => { + it('can be configured with attribute binding for decimalMaximumDigits', () => { expect(directive.decimalMaximumDigits).toBe(10); expect(nativeElement.decimalMaximumDigits).toBe(10); @@ -754,7 +775,7 @@ describe('NimbleTableColumnNumberText', () => { expect(nativeElement.decimalMaximumDigits).toBe(7); }); - it('can be configured with property binding for decimalMaximumDigits updated to null', () => { + it('can be configured with attribute binding for decimalMaximumDigits updated to null', () => { expect(directive.decimalMaximumDigits).toBe(10); expect(nativeElement.decimalMaximumDigits).toBe(10); @@ -764,5 +785,16 @@ describe('NimbleTableColumnNumberText', () => { expect(directive.decimalMaximumDigits).toBeNull(); expect(nativeElement.decimalMaximumDigits).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'); + }); }); }); diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/text/nimble-table-column-text.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/text/nimble-table-column-text.directive.ts index 4cde0fdc63..731b821878 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/text/nimble-table-column-text.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/text/nimble-table-column-text.directive.ts @@ -21,6 +21,14 @@ export class NimbleTableColumnTextDirective extends NimbleTableColumnBaseDirecti 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; } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/text/tests/nimble-table-column-text.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/table-column/text/tests/nimble-table-column-text.directive.spec.ts index 5b55450aaa..e7090d05bb 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/text/tests/nimble-table-column-text.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/text/tests/nimble-table-column-text.directive.spec.ts @@ -35,6 +35,7 @@ describe('NimbleTableColumnText', () => { sort-index="0" group-index="0" grouping-disabled + placeholder="Custom placeholder" > ` @@ -113,6 +114,11 @@ describe('NimbleTableColumnText', () => { 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('NimbleTableColumnText', () => { [sort-index]="sortIndex" [group-index]="groupIndex" [grouping-disabled]="groupingDisabled" + [placeholder]="placeholder" > ` @@ -150,6 +157,7 @@ describe('NimbleTableColumnText', () => { public sortIndex: number | null = 0; public groupIndex: number | null = 0; public groupingDisabled = false; + public placeholder = 'Custom placeholder'; } let fixture: ComponentFixture; @@ -331,6 +339,17 @@ describe('NimbleTableColumnText', () => { 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('NimbleTableColumnText', () => { [attr.sort-index]="sortIndex" [attr.group-index]="groupIndex" [attr.grouping-disabled]="groupingDisabled" + [attr.placeholder]="placeholder" > ` @@ -368,6 +388,7 @@ describe('NimbleTableColumnText', () => { public sortIndex: number | null = 0; public groupIndex: number | null = 0; public groupingDisabled = false; + public placeholder = 'Custom placeholder'; } let fixture: ComponentFixture; @@ -549,5 +570,16 @@ describe('NimbleTableColumnText', () => { 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'); + }); }); }); diff --git a/package-lock.json b/package-lock.json index b7d1560a0c..3e2ce9d89f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -74,7 +74,7 @@ }, "angular-workspace/projects/ni/nimble-angular": { "name": "@ni/nimble-angular", - "version": "20.5.7", + "version": "20.6.0", "license": "MIT", "dependencies": { "tslib": "^2.2.0"