Merge branch 'main' into strict-sb-enums

ni · Mar 28, 2024 · 8265858 · 8265858
2 parents 640e118 + 3d08d4d
commit 8265858
Show file tree

Hide file tree

Showing 14 changed files with 233 additions and 5 deletions.
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": "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
@@ -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.
 
 <!-- Start content -->
 
+## 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
@@ -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/...ce/projects/ni/nimble-angular/table-column/anchor/nimble-table-column-anchor.directive.ts b/...ce/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/.../ni/nimble-angular/table-column/anchor/tests/nimble-table-column-anchor.directive.spec.ts b/.../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');
+        });
     });
 });
diff --git a/...jects/ni/nimble-angular/table-column/date-text/nimble-table-column-date-text.directive.ts b/...jects/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/...mble-angular/table-column/date-text/tests/nimble-table-column-date-text.directive.spec.ts b/...mble-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');
+        });
     });
 });
diff --git a/.../nimble-angular/table-column/duration-text/nimble-table-column-duration-text.directive.ts b/.../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/...ular/table-column/duration-text/tests/nimble-table-column-duration-text.directive.spec.ts b/...ular/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');
+        });
     });
 });
diff --git a/...s/ni/nimble-angular/table-column/number-text/nimble-table-column-number-text.directive.ts b/...s/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;
     }