Angular and Blazor label provider changes for scrollable tabs. (#2447)

# Pull Request ## 🤨 Rationale - #1509 ## 👩‍💻 Implementation Standard boiler-plate implementation for exposing label provider attributes to Angular/Blazor. ## 🧪 Testing Typical boiler-plate unit tests. ## ✅ Checklist  - [ ] I have updated the project documentation to reflect my changes or determined no changes are needed.
ni · Oct 24, 2024 · 868a8a6 · 868a8a6
1 parent 6c1979e
commit 868a8a6
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 1 deletion.
diff --git a/change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json b/change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Angular and Blazor label provider changes for scrollable tabs.",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json b/change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Angular and Blazor label provider changes for scrollable tabs.",
+  "packageName": "@ni/nimble-blazor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/.../nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts b/.../nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts
@@ -21,5 +21,7 @@ export class NimbleLabelProviderCoreWithDefaultsDirective {
         this.elementRef.nativeElement.filterSearch = $localize`:Nimble select - search items|:Search`;
         this.elementRef.nativeElement.filterNoResults = $localize`:Nimble select - no items|:No items found`;
         this.elementRef.nativeElement.loading = $localize`:Nimble loading - loading|:Loading…`;
+        this.elementRef.nativeElement.scrollBackward = $localize`:Nimble scroll backward|:Scroll backward`;
+        this.elementRef.nativeElement.scrollForward = $localize`:Nimble scroll forward|:Scroll forward`;
     }
 }
diff --git a/...ular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts b/...ular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts
@@ -85,4 +85,20 @@ export class NimbleLabelProviderCoreDirective {
     @Input('loading') public set loading(value: string | undefined) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'loading', value);
     }
+
+    public get scrollBackward(): string | undefined {
+        return this.elementRef.nativeElement.scrollBackward;
+    }
+
+    @Input('scrollBackward') public set scrollBackward(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'scrollBackward', value);
+    }
+
+    public get scrollForward(): string | undefined {
+        return this.elementRef.nativeElement.scrollForward;
+    }
+
+    @Input('scrollForward') public set scrollForward(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'scrollForward', value);
+    }
 }
diff --git a/...ular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts b/...ular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts
@@ -36,7 +36,9 @@ describe('Nimble LabelProviderCore withDefaults directive', () => {
             [computeMsgId('Information', 'Nimble popup icon - information')]: 'Translated information',
             [computeMsgId('Search', 'Nimble select - search items')]: 'Translated search',
             [computeMsgId('No items found', 'Nimble select - no items')]: 'Translated no items found',
-            [computeMsgId('Loading…', 'Nimble loading - loading')]: 'Translated loading'
+            [computeMsgId('Loading…', 'Nimble loading - loading')]: 'Translated loading',
+            [computeMsgId('Scroll backward', 'Nimble scroll backward')]: 'Translated scroll backward',
+            [computeMsgId('Scroll forward', 'Nimble scroll forward')]: 'Translated scroll forward'
         });
         const fixture = TestBed.createComponent(TestHostComponent);
         const testHostComponent = fixture.componentInstance;
@@ -54,5 +56,7 @@ describe('Nimble LabelProviderCore withDefaults directive', () => {
         expect(labelProvider.filterSearch).toBe('Translated search');
         expect(labelProvider.filterNoResults).toBe('Translated no items found');
         expect(labelProvider.loading).toBe('Translated loading');
+        expect(labelProvider.scrollBackward).toBe('Translated scroll backward');
+        expect(labelProvider.scrollForward).toBe('Translated scroll forward');
     });
 });
diff --git a/...ace/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts b/...ace/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts
@@ -12,6 +12,9 @@ describe('Nimble Label Provider Core', () => {
     const label6 = 'String 6';
     const label7 = 'String 7';
     const label8 = 'String 8';
+    const label9 = 'String 9';
+    const label10 = 'String 10';
+    const label11 = 'String `11';
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -88,6 +91,21 @@ describe('Nimble Label Provider Core', () => {
             expect(directive.filterNoResults).toBeUndefined();
             expect(nativeElement.filterNoResults).toBeUndefined();
         });
+
+        it('has expected defaults for loading', () => {
+            expect(directive.loading).toBeUndefined();
+            expect(nativeElement.loading).toBeUndefined();
+        });
+
+        it('has expected defaults for scrollBackward', () => {
+            expect(directive.scrollBackward).toBeUndefined();
+            expect(nativeElement.scrollBackward).toBeUndefined();
+        });
+
+        it('has expected defaults for scrollForward', () => {
+            expect(directive.scrollForward).toBeUndefined();
+            expect(nativeElement.scrollForward).toBeUndefined();
+        });
     });
 
     describe('with template string values', () => {
@@ -102,6 +120,9 @@ describe('Nimble Label Provider Core', () => {
                     popup-icon-information="${label6}"
                     filter-search="${label7}"
                     filter-no-results="${label8}"
+                    loading="${label9}"
+                    scroll-backward="${label10}"
+                    scroll-forward="${label11}"
                     >
                 </nimble-label-provider-core>
             `
@@ -165,6 +186,21 @@ describe('Nimble Label Provider Core', () => {
             expect(directive.filterNoResults).toBe(label8);
             expect(nativeElement.filterNoResults).toBe(label8);
         });
+
+        it('will use template string values for loading', () => {
+            expect(directive.loading).toBe(label9);
+            expect(nativeElement.loading).toBe(label9);
+        });
+
+        it('will use template string values for scrollBackward', () => {
+            expect(directive.scrollBackward).toBe(label10);
+            expect(nativeElement.scrollBackward).toBe(label10);
+        });
+
+        it('will use template string values for scrollForward', () => {
+            expect(directive.scrollForward).toBe(label11);
+            expect(nativeElement.scrollForward).toBe(label11);
+        });
     });
 
     describe('with property bound values', () => {
@@ -179,6 +215,9 @@ describe('Nimble Label Provider Core', () => {
                     [popupIconInformation]="popupIconInformation"
                     [filterSearch]="filterSearch"
                     [filterNoResults]="filterNoResults"
+                    [loading]="loading"
+                    [scrollBackward]="scrollBackward"
+                    [scrollForward]="scrollForward"
                     >
                 </nimble-label-provider-core>
             `
@@ -194,6 +233,9 @@ describe('Nimble Label Provider Core', () => {
             public popupIconInformation = label1;
             public filterSearch = label1;
             public filterNoResults = label1;
+            public loading = label1;
+            public scrollBackward = label1;
+            public scrollForward = label1;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -298,6 +340,39 @@ describe('Nimble Label Provider Core', () => {
             expect(directive.filterNoResults).toBe(label2);
             expect(nativeElement.filterNoResults).toBe(label2);
         });
+
+        it('can be configured with property binding for loading', () => {
+            expect(directive.loading).toBe(label1);
+            expect(nativeElement.loading).toBe(label1);
+
+            fixture.componentInstance.loading = label2;
+            fixture.detectChanges();
+
+            expect(directive.loading).toBe(label2);
+            expect(nativeElement.loading).toBe(label2);
+        });
+
+        it('can be configured with property binding for scrollBackward', () => {
+            expect(directive.scrollBackward).toBe(label1);
+            expect(nativeElement.scrollBackward).toBe(label1);
+
+            fixture.componentInstance.scrollBackward = label2;
+            fixture.detectChanges();
+
+            expect(directive.scrollBackward).toBe(label2);
+            expect(nativeElement.scrollBackward).toBe(label2);
+        });
+
+        it('can be configured with property binding for scrollForward', () => {
+            expect(directive.scrollForward).toBe(label1);
+            expect(nativeElement.scrollForward).toBe(label1);
+
+            fixture.componentInstance.scrollForward = label2;
+            fixture.detectChanges();
+
+            expect(directive.scrollForward).toBe(label2);
+            expect(nativeElement.scrollForward).toBe(label2);
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -312,6 +387,9 @@ describe('Nimble Label Provider Core', () => {
                     [attr.popup-icon-information]="popupIconInformation"
                     [attr.filter-search]="filterSearch"
                     [attr.filter-no-results]="filterNoResults"
+                    [attr.loading]="loading"
+                    [attr.scroll-backward]="scrollBackward"
+                    [attr.scroll-forward]="scrollForward"
                     >
                 </nimble-label-provider-core>
             `
@@ -327,6 +405,9 @@ describe('Nimble Label Provider Core', () => {
             public popupIconInformation = label1;
             public filterSearch = label1;
             public filterNoResults = label1;
+            public loading = label1;
+            public scrollBackward = label1;
+            public scrollForward = label1;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -431,5 +512,38 @@ describe('Nimble Label Provider Core', () => {
             expect(directive.filterNoResults).toBe(label2);
             expect(nativeElement.filterNoResults).toBe(label2);
         });
+
+        it('can be configured with attribute binding for loading', () => {
+            expect(directive.loading).toBe(label1);
+            expect(nativeElement.loading).toBe(label1);
+
+            fixture.componentInstance.loading = label2;
+            fixture.detectChanges();
+
+            expect(directive.loading).toBe(label2);
+            expect(nativeElement.loading).toBe(label2);
+        });
+
+        it('can be configured with attribute binding for scrollBackward', () => {
+            expect(directive.scrollBackward).toBe(label1);
+            expect(nativeElement.scrollBackward).toBe(label1);
+
+            fixture.componentInstance.scrollBackward = label2;
+            fixture.detectChanges();
+
+            expect(directive.scrollBackward).toBe(label2);
+            expect(nativeElement.scrollBackward).toBe(label2);
+        });
+
+        it('can be configured with attribute binding for scrollForward', () => {
+            expect(directive.scrollForward).toBe(label1);
+            expect(nativeElement.scrollForward).toBe(label1);
+
+            fixture.componentInstance.scrollForward = label2;
+            fixture.detectChanges();
+
+            expect(directive.scrollForward).toBe(label2);
+            expect(nativeElement.scrollForward).toBe(label2);
+        });
     });
 });
diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor b/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor
@@ -9,5 +9,7 @@
     filter-search="@FilterSearch"
     filter-no-results="@FilterNoResults"
     loading="@Loading"
+    scroll-forward="@ScrollForward"
+    scroll-backward="@ScrollBackward"
     @attributes="AdditionalAttributes">
 </nimble-label-provider-core>
diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs b/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs
@@ -34,6 +34,12 @@ public partial class NimbleLabelProviderCore : ComponentBase
     [Parameter]
     public string? Loading { get; set; }
 
+    [Parameter]
+    public string? ScrollBackward { get; set; }
+
+    [Parameter]
+    public string? ScrollForward { get; set; }
+
     /// <summary>
     /// Gets or sets a collection of additional attributes that will be applied to the created element.
     /// </summary>

diff --git a/...blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderCoreTests.cs b/...blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderCoreTests.cs
@@ -39,6 +39,8 @@ public void NimbleLabelProviderCore_SupportsAdditionalAttributes()
     [InlineData(nameof(NimbleLabelProviderCore.FilterSearch))]
     [InlineData(nameof(NimbleLabelProviderCore.FilterNoResults))]
     [InlineData(nameof(NimbleLabelProviderCore.Loading))]
+    [InlineData(nameof(NimbleLabelProviderCore.ScrollBackward))]
+    [InlineData(nameof(NimbleLabelProviderCore.ScrollForward))]
     public void NimbleLabelProviderCore_LabelIsSet(string propertyName)
     {
         var labelValue = propertyName + "UpdatedValue";