Update Angular and Blazor label provider directives to match nimble-c…

…omponents (#1927)

# Pull Request

## 🤨 Rationale

#1747 has a maintenance task to ensure the default strings in Angular
and Blazor directives match the default strings in nimble-components.

## 👩‍💻 Implementation

Some labels were only provided in nimble-components, not nimble-angular
or Blazor. Copied those values over following existing patterns in
directives and test files.

## 🧪 Testing

Updated tests but otherwise none since this is a mechanical change.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: Milan Raj <[email protected]>

angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts

@@ -15,5 +15,10 @@ export class NimbleLabelProviderCoreWithDefaultsDirective {
  this.elementRef.nativeElement.popupDismiss = $localize`:Nimble popup - dismiss|:Close`;
  this.elementRef.nativeElement.numericDecrement = $localize`:Nimble numeric - decrement|:Decrement`;
  this.elementRef.nativeElement.numericIncrement = $localize`:Nimble numeric - increment|:Increment`;
+ this.elementRef.nativeElement.popupIconError = $localize`:Nimble popup icon - error|:Error`;
+ this.elementRef.nativeElement.popupIconWarning = $localize`:Nimble popup icon - warning|:Warning`;
+ this.elementRef.nativeElement.popupIconInformation = $localize`:Nimble popup icon - information|:Information`;
+ this.elementRef.nativeElement.filterSearch = $localize`:Nimble select - search items|:Search`;
+ this.elementRef.nativeElement.filterNoResults = $localize`:Nimble select - no items|:No items found`;
  }
 }

angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts

@@ -37,4 +37,44 @@ export class NimbleLabelProviderCoreDirective {
  @Input('numeric-increment') public set numericIncrement(value: string | undefined) {
  this.renderer.setProperty(this.elementRef.nativeElement, 'numericIncrement', value);
  }
+
+ public get popupIconError(): string | undefined {
+ return this.elementRef.nativeElement.popupIconError;
+ }
+
+ @Input('popup-icon-error') public set popupIconError(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'popupIconError', value);
+ }
+
+ public get popupIconWarning(): string | undefined {
+ return this.elementRef.nativeElement.popupIconWarning;
+ }
+
+ @Input('popup-icon-warning') public set popupIconWarning(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'popupIconWarning', value);
+ }
+
+ public get popupIconInformation(): string | undefined {
+ return this.elementRef.nativeElement.popupIconInformation;
+ }
+
+ @Input('popup-icon-information') public set popupIconInformation(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'popupIconInformation', value);
+ }
+
+ public get filterSearch(): string | undefined {
+ return this.elementRef.nativeElement.filterSearch;
+ }
+
+ @Input('filter-search') public set filterSearch(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'filterSearch', value);
+ }
+
+ public get filterNoResults(): string | undefined {
+ return this.elementRef.nativeElement.filterNoResults;
+ }
+
+ @Input('filter-no-results') public set filterNoResults(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'filterNoResults', value);
+ }
 }

angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts

@@ -30,7 +30,12 @@ describe('Nimble LabelProviderCore withDefaults directive', () => {
  loadTranslations({
  [computeMsgId('Close', 'Nimble popup - dismiss')]: 'Translated close',
  [computeMsgId('Decrement', 'Nimble numeric - decrement')]: 'Translated decrement',
- [computeMsgId('Increment', 'Nimble numeric - increment')]: 'Translated increment'
+ [computeMsgId('Increment', 'Nimble numeric - increment')]: 'Translated increment',
+ [computeMsgId('Error', 'Nimble popup icon - error')]: 'Translated error',
+ [computeMsgId('Warning', 'Nimble popup icon - warning')]: 'Translated warning',
+ [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'
  });
  const fixture = TestBed.createComponent(TestHostComponent);
  const testHostComponent = fixture.componentInstance;
@@ -42,5 +47,10 @@ describe('Nimble LabelProviderCore withDefaults directive', () => {
  expect(labelProvider.popupDismiss).toBe('Translated close');
  expect(labelProvider.numericDecrement).toBe('Translated decrement');
  expect(labelProvider.numericIncrement).toBe('Translated increment');
+ expect(labelProvider.popupIconError).toBe('Translated error');
+ expect(labelProvider.popupIconWarning).toBe('Translated warning');
+ expect(labelProvider.popupIconInformation).toBe('Translated information');
+ expect(labelProvider.filterSearch).toBe('Translated search');
+ expect(labelProvider.filterNoResults).toBe('Translated no items found');
  });
 });

angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts

@@ -7,6 +7,11 @@ describe('Nimble Label Provider Core', () => {
  const label1 = 'String 1';
  const label2 = 'String 2';
  const label3 = 'String 3';
+ const label4 = 'String 4';
+ const label5 = 'String 5';
+ const label6 = 'String 6';
+ const label7 = 'String 7';
+ const label8 = 'String 8';
 
  beforeEach(() => {
  TestBed.configureTestingModule({
@@ -58,6 +63,31 @@ describe('Nimble Label Provider Core', () => {
  expect(directive.numericIncrement).toBeUndefined();
  expect(nativeElement.numericIncrement).toBeUndefined();
  });
+
+ it('has expected defaults for popupIconError', () => {
+ expect(directive.popupIconError).toBeUndefined();
+ expect(nativeElement.popupIconError).toBeUndefined();
+ });
+
+ it('has expected defaults for popupIconWarning', () => {
+ expect(directive.popupIconWarning).toBeUndefined();
+ expect(nativeElement.popupIconWarning).toBeUndefined();
+ });
+
+ it('has expected defaults for popupIconInformation', () => {
+ expect(directive.popupIconInformation).toBeUndefined();
+ expect(nativeElement.popupIconInformation).toBeUndefined();
+ });
+
+ it('has expected defaults for filterSearch', () => {
+ expect(directive.filterSearch).toBeUndefined();
+ expect(nativeElement.filterSearch).toBeUndefined();
+ });
+
+ it('has expected defaults for filterNoResults', () => {
+ expect(directive.filterNoResults).toBeUndefined();
+ expect(nativeElement.filterNoResults).toBeUndefined();
+ });
  });
 
  describe('with template string values', () => {
@@ -67,6 +97,11 @@ describe('Nimble Label Provider Core', () => {
  popup-dismiss="${label1}"
  numeric-decrement="${label2}"
  numeric-increment="${label3}"
+ popup-icon-error="${label4}"
+ popup-icon-warning="${label5}"
+ popup-icon-information="${label6}"
+ filter-search="${label7}"
+ filter-no-results="${label8}"
  >
  </nimble-label-provider-core>
  `
@@ -105,6 +140,31 @@ describe('Nimble Label Provider Core', () => {
  expect(directive.numericIncrement).toBe(label3);
  expect(nativeElement.numericIncrement).toBe(label3);
  });
+
+ it('will use template string values for popupIconError', () => {
+ expect(directive.popupIconError).toBe(label4);
+ expect(nativeElement.popupIconError).toBe(label4);
+ });
+
+ it('will use template string values for popupIconWarning', () => {
+ expect(directive.popupIconWarning).toBe(label5);
+ expect(nativeElement.popupIconWarning).toBe(label5);
+ });
+
+ it('will use template string values for popupIconInformation', () => {
+ expect(directive.popupIconInformation).toBe(label6);
+ expect(nativeElement.popupIconInformation).toBe(label6);
+ });
+
+ it('will use template string values for filterSearch', () => {
+ expect(directive.filterSearch).toBe(label7);
+ expect(nativeElement.filterSearch).toBe(label7);
+ });
+
+ it('will use template string values for filterNoResults', () => {
+ expect(directive.filterNoResults).toBe(label8);
+ expect(nativeElement.filterNoResults).toBe(label8);
+ });
  });
 
  describe('with property bound values', () => {
@@ -114,6 +174,11 @@ describe('Nimble Label Provider Core', () => {
  [popupDismiss]="popupDismiss"
  [numericDecrement]="numericDecrement"
  [numericIncrement]="numericIncrement"
+ [popupIconError]="popupIconError"
+ [popupIconWarning]="popupIconWarning"
+ [popupIconInformation]="popupIconInformation"
+ [filterSearch]="filterSearch"
+ [filterNoResults]="filterNoResults"
  >
  </nimble-label-provider-core>
  `
@@ -124,6 +189,11 @@ describe('Nimble Label Provider Core', () => {
  public popupDismiss = label1;
  public numericDecrement = label1;
  public numericIncrement = label1;
+ public popupIconError = label1;
+ public popupIconWarning = label1;
+ public popupIconInformation = label1;
+ public filterSearch = label1;
+ public filterNoResults = label1;
  }
 
  let fixture: ComponentFixture<TestHostComponent>;
@@ -173,6 +243,61 @@ describe('Nimble Label Provider Core', () => {
  expect(directive.numericIncrement).toBe(label2);
  expect(nativeElement.numericIncrement).toBe(label2);
  });
+
+ it('can be configured with property binding for popupIconError', () => {
+ expect(directive.popupIconError).toBe(label1);
+ expect(nativeElement.popupIconError).toBe(label1);
+
+ fixture.componentInstance.popupIconError = label2;
+ fixture.detectChanges();
+
+ expect(directive.popupIconError).toBe(label2);
+ expect(nativeElement.popupIconError).toBe(label2);
+ });
+
+ it('can be configured with property binding for popupIconWarning', () => {
+ expect(directive.popupIconWarning).toBe(label1);
+ expect(nativeElement.popupIconWarning).toBe(label1);
+
+ fixture.componentInstance.popupIconWarning = label2;
+ fixture.detectChanges();
+
+ expect(directive.popupIconWarning).toBe(label2);
+ expect(nativeElement.popupIconWarning).toBe(label2);
+ });
+
+ it('can be configured with property binding for popupIconInformation', () => {
+ expect(directive.popupIconInformation).toBe(label1);
+ expect(nativeElement.popupIconInformation).toBe(label1);
+
+ fixture.componentInstance.popupIconInformation = label2;
+ fixture.detectChanges();
+
+ expect(directive.popupIconInformation).toBe(label2);
+ expect(nativeElement.popupIconInformation).toBe(label2);
+ });
+
+ it('can be configured with property binding for filterSearch', () => {
+ expect(directive.filterSearch).toBe(label1);
+ expect(nativeElement.filterSearch).toBe(label1);
+
+ fixture.componentInstance.filterSearch = label2;
+ fixture.detectChanges();
+
+ expect(directive.filterSearch).toBe(label2);
+ expect(nativeElement.filterSearch).toBe(label2);
+ });
+
+ it('can be configured with property binding for filterNoResults', () => {
+ expect(directive.filterNoResults).toBe(label1);
+ expect(nativeElement.filterNoResults).toBe(label1);
+
+ fixture.componentInstance.filterNoResults = label2;
+ fixture.detectChanges();
+
+ expect(directive.filterNoResults).toBe(label2);
+ expect(nativeElement.filterNoResults).toBe(label2);
+ });
  });
 
  describe('with attribute bound values', () => {
@@ -182,6 +307,11 @@ describe('Nimble Label Provider Core', () => {
  [attr.popup-dismiss]="popupDismiss"
  [attr.numeric-decrement]="numericDecrement"
  [attr.numeric-increment]="numericIncrement"
+ [attr.popup-icon-error]="popupIconError"
+ [attr.popup-icon-warning]="popupIconWarning"
+ [attr.popup-icon-information]="popupIconInformation"
+ [attr.filter-search]="filterSearch"
+ [attr.filter-no-results]="filterNoResults"
  >
  </nimble-label-provider-core>
  `
@@ -192,6 +322,11 @@ describe('Nimble Label Provider Core', () => {
  public popupDismiss = label1;
  public numericDecrement = label1;
  public numericIncrement = label1;
+ public popupIconError = label1;
+ public popupIconWarning = label1;
+ public popupIconInformation = label1;
+ public filterSearch = label1;
+ public filterNoResults = label1;
  }
 
  let fixture: ComponentFixture<TestHostComponent>;
@@ -241,5 +376,60 @@ describe('Nimble Label Provider Core', () => {
  expect(directive.numericIncrement).toBe(label2);
  expect(nativeElement.numericIncrement).toBe(label2);
  });
+
+ it('can be configured with attribute binding for popupIconError', () => {
+ expect(directive.popupIconError).toBe(label1);
+ expect(nativeElement.popupIconError).toBe(label1);
+
+ fixture.componentInstance.popupIconError = label2;
+ fixture.detectChanges();
+
+ expect(directive.popupIconError).toBe(label2);
+ expect(nativeElement.popupIconError).toBe(label2);
+ });
+
+ it('can be configured with attribute binding for popupIconWarning', () => {
+ expect(directive.popupIconWarning).toBe(label1);
+ expect(nativeElement.popupIconWarning).toBe(label1);
+
+ fixture.componentInstance.popupIconWarning = label2;
+ fixture.detectChanges();
+
+ expect(directive.popupIconWarning).toBe(label2);
+ expect(nativeElement.popupIconWarning).toBe(label2);
+ });
+
+ it('can be configured with attribute binding for popupIconInformation', () => {
+ expect(directive.popupIconInformation).toBe(label1);
+ expect(nativeElement.popupIconInformation).toBe(label1);
+
+ fixture.componentInstance.popupIconInformation = label2;
+ fixture.detectChanges();
+
+ expect(directive.popupIconInformation).toBe(label2);
+ expect(nativeElement.popupIconInformation).toBe(label2);
+ });
+
+ it('can be configured with attribute binding for filterSearch', () => {
+ expect(directive.filterSearch).toBe(label1);
+ expect(nativeElement.filterSearch).toBe(label1);
+
+ fixture.componentInstance.filterSearch = label2;
+ fixture.detectChanges();
+
+ expect(directive.filterSearch).toBe(label2);
+ expect(nativeElement.filterSearch).toBe(label2);
+ });
+
+ it('can be configured with attribute binding for filterNoResults', () => {
+ expect(directive.filterNoResults).toBe(label1);
+ expect(nativeElement.filterNoResults).toBe(label1);
+
+ fixture.componentInstance.filterNoResults = label2;
+ fixture.detectChanges();
+
+ expect(directive.filterNoResults).toBe(label2);
+ expect(nativeElement.filterNoResults).toBe(label2);
+ });
  });
 });

angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table-with-defaults.directive.ts

@@ -14,6 +14,8 @@ export class NimbleLabelProviderTableWithDefaultsDirective {
  public constructor(protected readonly renderer: Renderer2, protected readonly elementRef: ElementRef<LabelProviderTable>) {
  this.elementRef.nativeElement.groupCollapse = $localize`:Nimble table - collapse group|:Collapse group`;
  this.elementRef.nativeElement.groupExpand = $localize`:Nimble table - expand group|:Expand group`;
+ this.elementRef.nativeElement.rowCollapse = $localize`:Nimble table - collapse row|:Collapse row`;
+ this.elementRef.nativeElement.rowExpand = $localize`:Nimble table - expand row|:Expand row`;
  this.elementRef.nativeElement.collapseAll = $localize`:Nimble table - collapse all|:Collapse all`;
  this.elementRef.nativeElement.cellActionMenu = $localize`:Nimble table - cell action menu|:Options`;
  this.elementRef.nativeElement.columnHeaderGrouped = $localize`:Nimble table - column header grouped|:Grouped`;

angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table.directive.ts

@@ -30,6 +30,22 @@ export class NimbleLabelProviderTableDirective {
  this.renderer.setProperty(this.elementRef.nativeElement, 'groupExpand', value);
  }
 
+ public get rowCollapse(): string | undefined {
+ return this.elementRef.nativeElement.rowCollapse;
+ }
+
+ @Input('row-collapse') public set rowCollapse(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'rowCollapse', value);
+ }
+
+ public get rowExpand(): string | undefined {
+ return this.elementRef.nativeElement.rowExpand;
+ }
+
+ @Input('row-expand') public set rowExpand(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'rowExpand', value);
+ }
+
  public get collapseAll(): string | undefined {
  return this.elementRef.nativeElement.collapseAll;
  }

angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table-with-defaults.directive.spec.ts

@@ -30,6 +30,8 @@ describe('Nimble LabelProviderTable withDefaults directive', () => {
  loadTranslations({
  [computeMsgId('Collapse group', 'Nimble table - collapse group')]: 'Translated collapse group',
  [computeMsgId('Expand group', 'Nimble table - expand group')]: 'Translated expand group',
+ [computeMsgId('Collapse row', 'Nimble table - collapse row')]: 'Translated collapse row',
+ [computeMsgId('Expand row', 'Nimble table - expand row')]: 'Translated expand row',
  [computeMsgId('Collapse all', 'Nimble table - collapse all')]: 'Translated collapse all',
  [computeMsgId('Options', 'Nimble table - cell action menu')]: 'Translated options',
  [computeMsgId('Grouped', 'Nimble table - column header grouped')]: 'Translated grouped',
@@ -50,6 +52,8 @@ describe('Nimble LabelProviderTable withDefaults directive', () => {
  it('applies translated values for each label', () => {
  expect(labelProvider.groupCollapse).toBe('Translated collapse group');
  expect(labelProvider.groupExpand).toBe('Translated expand group');
+ expect(labelProvider.rowCollapse).toBe('Translated collapse row');
+ expect(labelProvider.rowExpand).toBe('Translated expand row');
  expect(labelProvider.collapseAll).toBe('Translated collapse all');
  expect(labelProvider.cellActionMenu).toBe('Translated options');
  expect(labelProvider.columnHeaderGrouped).toBe('Translated grouped');