Rich Text Editor | Angular Integration for label provider in nimble-r…

…ich-text-editor (#1477)

# Pull Request

## 🤨 Rationale
Issue Link : #1288

Angular Integration for the rich text component label providers to get
localized from the client app when using the rich text component ( For
now only `rich-text-editor` has labels ).

## 👩‍💻 Implementation

Reference PR for implementation: #1360

This PR adds `NimbleLabelProviderRichTextDirective` in nimble-angular.

## 🧪 Testing

- Added autotests for new directives

## ✅ 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: Aagash Raaj <[email protected]>

angular-workspace/projects/example-client-app/src/app/app.component.html

@@ -1,5 +1,6 @@
 <nimble-theme-provider [theme]="theme">
  <nimble-label-provider-core withDefaults></nimble-label-provider-core>
+ <nimble-label-provider-rich-text withDefaults></nimble-label-provider-rich-text>
  <nimble-label-provider-table withDefaults></nimble-label-provider-table>
  <example-header [(theme)]="theme"></example-header>
  <div class="router-outlet-wrapper">

angular-workspace/projects/example-client-app/src/app/app.module.ts

@@ -11,6 +11,7 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N
  NimbleAnchorModule, NimbleAnchorButtonModule, NimbleAnchorTabModule, NimbleAnchorTabsModule,
  NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule } from '@ni/nimble-angular';
 import { NimbleLabelProviderCoreModule } from '@ni/nimble-angular/label-provider/core';
+import { NimbleLabelProviderRichTextModule } from '@ni/nimble-angular/label-provider/rich-text';
 import { NimbleLabelProviderTableModule } from '@ni/nimble-angular/label-provider/table';
 import { NimbleMappingTextModule } from '@ni/nimble-angular/mapping/text';
 import { NimbleMappingIconModule } from '@ni/nimble-angular/mapping/icon';
@@ -40,6 +41,7 @@ import { HeaderComponent } from './header/header.component';
  ReactiveFormsModule,
  NimbleThemeProviderModule,
  NimbleLabelProviderCoreModule,
+ NimbleLabelProviderRichTextModule,
  NimbleLabelProviderTableModule,
  NimbleTextAreaModule,
  NimbleTextFieldModule,

angular-workspace/projects/ni/nimble-angular/README.md

@@ -92,12 +92,15 @@ Most user-visible strings displayed by Nimble components are provided by the cli
 
 The standard way to use these in Angular (for localized apps using `@angular/localize`) is:
 1. Import the label provider module(s) from your app module:
- - `NimbleLabelProviderCoreModule` from `@ni/nimble-angular/label-provider/core`: Used for labels for all components besides the table
+ - `NimbleLabelProviderCoreModule` from `@ni/nimble-angular/label-provider/core`: Used for labels for all components that do not have a dedicated label provider
+ - `NimbleLabelProviderRichTextModule` from `@ni/nimble-angular/label-provider/rich-text`: Used for labels for the rich text components
  - `NimbleLabelProviderTableModule` from `@ni/nimble-angular/label-provider/table`: Used for labels for the table (and table sub-components / column types)
-2. To use the Nimble-provided strings (which are already declared with `$localize`), use the `NimbleLabelProvider[Core/Table]WithDefaultsDirective`:
+2. To use the Nimble-provided strings (which are already declared with `$localize`), use the `NimbleLabelProvider[Core/Table/RichText]WithDefaultsDirective`:
  ```html
  <nimble-theme-provider theme="light">
  <nimble-label-provider-core withDefaults></nimble-label-provider-core>
+ <!-- if using the Nimble rich text components: -->
+ <nimble-label-provider-rich-text withDefaults></nimble-label-provider-rich-text>
  <!-- if using the Nimble table component: -->
  <nimble-label-provider-table withDefaults></nimble-label-provider-table>
  <router-outlet></router-outlet>

angular-workspace/projects/ni/nimble-angular/label-provider/rich-text/ng-package.json

@@ -0,0 +1,6 @@
+{
+ "$schema": "../../../../../../node_modules/ng-packagr/ng-package.schema.json",
+ "lib": {
+ "entryFile": "public-api.ts"
+ }
+}

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

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+import type { LabelProviderRichText } from '@ni/nimble-components/dist/esm/label-provider/rich-text';
+
+import '@angular/localize/init';
+
+/**
+ * Directive for nimble-label-provider-rich-text which will initialize all of the labels with $localize-tagged strings, for apps
+ * using @angular/localize.
+ */
+@Directive({
+ selector: 'nimble-label-provider-rich-text[withDefaults]'
+})
+export class NimbleLabelProviderRichTextWithDefaultsDirective {
+ public constructor(protected readonly renderer: Renderer2, protected readonly elementRef: ElementRef<LabelProviderRichText>) {
+ this.elementRef.nativeElement.toggleBold = $localize`:Nimble rich text - toggle bold|:Bold`;
+ this.elementRef.nativeElement.toggleItalics = $localize`:Nimble rich text - toggle italics|:Italics`;
+ this.elementRef.nativeElement.toggleBulletedList = $localize`:Nimble rich text - toggle bulleted list|:Bulleted List`;
+ this.elementRef.nativeElement.toggleNumberedList = $localize`:Nimble rich text - toggle numbered list|:Numbered List`;
+ }
+}

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

@@ -0,0 +1,56 @@
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+import type { LabelProviderRichText } from '@ni/nimble-components/dist/esm/label-provider/rich-text';
+
+export type { LabelProviderRichText };
+
+/**
+ * Directive to provide Angular integration for the nimble-rich-text label provider.
+ * To use the Nimble-provided strings declared via $localize, instead use NimbleLabelProviderRichTextWithDefaultsDirective.
+ */
+@Directive({
+ selector: 'nimble-label-provider-rich-text'
+})
+export class NimbleLabelProviderRichTextDirective {
+ public constructor(protected readonly renderer: Renderer2, protected readonly elementRef: ElementRef<LabelProviderRichText>) {
+ }
+
+ public get toggleBold(): string | undefined {
+ return this.elementRef.nativeElement.toggleBold;
+ }
+
+ // Renaming because property should have camel casing, but attribute should not
+ // eslint-disable-next-line @angular-eslint/no-input-rename
+ @Input('toggle-bold') public set toggleBold(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'toggleBold', value);
+ }
+
+ public get toggleItalics(): string | undefined {
+ return this.elementRef.nativeElement.toggleItalics;
+ }
+
+ // Renaming because property should have camel casing, but attribute should not
+ // eslint-disable-next-line @angular-eslint/no-input-rename
+ @Input('toggle-italics') public set toggleItalics(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'toggleItalics', value);
+ }
+
+ public get toggleBulletedList(): string | undefined {
+ return this.elementRef.nativeElement.toggleBulletedList;
+ }
+
+ // Renaming because property should have camel casing, but attribute should not
+ // eslint-disable-next-line @angular-eslint/no-input-rename
+ @Input('toggle-bulleted-list') public set toggleBulletedList(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'toggleBulletedList', value);
+ }
+
+ public get toggleNumberedList(): string | undefined {
+ return this.elementRef.nativeElement.toggleNumberedList;
+ }
+
+ // Renaming because property should have camel casing, but attribute should not
+ // eslint-disable-next-line @angular-eslint/no-input-rename
+ @Input('toggle-numbered-list') public set toggleNumberedList(value: string | undefined) {
+ this.renderer.setProperty(this.elementRef.nativeElement, 'toggleNumberedList', value);
+ }
+}

angular-workspace/projects/ni/nimble-angular/label-provider/rich-text/nimble-label-provider-rich-text.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NimbleLabelProviderRichTextDirective } from './nimble-label-provider-rich-text.directive';
+import { NimbleLabelProviderRichTextWithDefaultsDirective } from './nimble-label-provider-rich-text-with-defaults.directive';
+
+import '@ni/nimble-components/dist/esm/label-provider/rich-text';
+
+@NgModule({
+ declarations: [NimbleLabelProviderRichTextDirective, NimbleLabelProviderRichTextWithDefaultsDirective],
+ imports: [
+ CommonModule
+ ],
+ exports: [NimbleLabelProviderRichTextDirective, NimbleLabelProviderRichTextWithDefaultsDirective]
+})
+export class NimbleLabelProviderRichTextModule { }

angular-workspace/projects/ni/nimble-angular/label-provider/rich-text/public-api.ts

@@ -0,0 +1,3 @@
+export * from './nimble-label-provider-rich-text.directive';
+export * from './nimble-label-provider-rich-text-with-defaults.directive';
+export * from './nimble-label-provider-rich-text.module';

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

@@ -0,0 +1,45 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { computeMsgId } from '@angular/compiler';
+import { loadTranslations } from '@angular/localize';
+import type { LabelProviderRichText } from '../nimble-label-provider-rich-text.directive';
+import { NimbleLabelProviderRichTextModule } from '../nimble-label-provider-rich-text.module';
+
+describe('Nimble LabelProviderRichText withDefaults directive', () => {
+ @Component({
+ template: `
+ <nimble-label-provider-rich-text withDefaults #labelProvider>
+ </nimble-label-provider-rich-text>
+ `
+ })
+ class TestHostComponent {
+ @ViewChild('labelProvider', { static: true }) public labelProvider: ElementRef<LabelProviderRichText>;
+ }
+
+ let labelProvider: LabelProviderRichText;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [TestHostComponent],
+ imports: [NimbleLabelProviderRichTextModule, CommonModule]
+ });
+ loadTranslations({
+ [computeMsgId('Bold', 'Nimble rich text - toggle bold')]: 'Translated Bold',
+ [computeMsgId('Italics', 'Nimble rich text - toggle italics')]: 'Translated Italics',
+ [computeMsgId('Bulleted List', 'Nimble rich text - toggle bulleted list')]: 'Translated Bulleted List',
+ [computeMsgId('Numbered List', 'Nimble rich text - toggle numbered list')]: 'Translated Numbered List',
+ });
+ const fixture = TestBed.createComponent(TestHostComponent);
+ const testHostComponent = fixture.componentInstance;
+ labelProvider = testHostComponent.labelProvider.nativeElement;
+ fixture.detectChanges();
+ });
+
+ it('applies translated values for each label', () => {
+ expect(labelProvider.toggleBold).toBe('Translated Bold');
+ expect(labelProvider.toggleItalics).toBe('Translated Italics');
+ expect(labelProvider.toggleBulletedList).toBe('Translated Bulleted List');
+ expect(labelProvider.toggleNumberedList).toBe('Translated Numbered List');
+ });
+});