From 0332c9e07dcfcc2fb8ab84b7d5ddf99a3752ea7a Mon Sep 17 00:00:00 2001 From: "SOLITONTECH\\vivin.krishna" <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Wed, 5 Jul 2023 16:09:55 +0530 Subject: [PATCH 1/5] Initial code bring up of angular integration for rich text viewer component --- .../example-client-app/src/app/app.module.ts | 3 +- .../app/customapp/customapp.component.html | 4 ++ .../nimble-rich-text-viewer.directive.ts | 25 ++++++++++ .../nimble-rich-text-viewer.module.ts | 12 +++++ .../nimble-rich-text-viewer.directive.spec.ts | 50 +++++++++++++++++++ .../ni/nimble-angular/src/public-api.ts | 2 + 6 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.directive.ts create mode 100644 angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.module.ts create mode 100644 angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts diff --git a/angular-workspace/projects/example-client-app/src/app/app.module.ts b/angular-workspace/projects/example-client-app/src/app/app.module.ts index 34a75c6cc1..787b13d7f0 100644 --- a/angular-workspace/projects/example-client-app/src/app/app.module.ts +++ b/angular-workspace/projects/example-client-app/src/app/app.module.ts @@ -9,7 +9,7 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N NimbleIconAddModule, NimbleSwitchModule, NimbleToolbarModule, NimbleMenuButtonModule, NimbleComboboxModule, NimbleTooltipModule, NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioModule, NimbleSpinnerModule, NimbleAnchorModule, NimbleAnchorButtonModule, NimbleAnchorTabModule, NimbleAnchorTabsModule, - NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule } from '@ni/nimble-angular'; + NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule, NimbleRichTextViewerModule } from '@ni/nimble-angular'; import { NimbleTableModule } from '@ni/nimble-angular/table'; import { NimbleTableColumnTextModule } from '@ni/nimble-angular/table-column/text'; import { NimbleTableColumnAnchorModule } from '@ni/nimble-angular/table-column/anchor'; @@ -69,6 +69,7 @@ import { HeaderComponent } from './header/header.component'; NimbleTableColumnTextModule, NimbleTableColumnAnchorModule, NimbleBannerModule, + NimbleRichTextViewerModule, RouterModule.forRoot( [ { path: '', redirectTo: '/customapp', pathMatch: 'full' }, diff --git a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html index 95a0207518..40a81d13de 100644 --- a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html +++ b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html @@ -313,5 +313,9 @@ +
+
Rich Text Viewer
+ +
diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.directive.ts b/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.directive.ts new file mode 100644 index 0000000000..d48fea14b1 --- /dev/null +++ b/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.directive.ts @@ -0,0 +1,25 @@ +import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; +import { type BooleanValueOrAttribute, toBooleanProperty } from '@ni/nimble-angular/internal-utilities'; +import type { RichTextViewer } from '@ni/nimble-components/dist/esm/rich-text-viewer'; + +export type { RichTextViewer }; + +/** + * Directive to provide Angular integration for the rich text viewer element. + */ +@Directive({ + selector: 'nimble-rich-text-viewer' +}) + +export class NimbleRichTextViewerDirective { + @Input() public set markdownValue(value: string) { + this.renderer.setProperty(this.elementRef.nativeElement, 'markdownValue', value); + } + + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('fit-to-content') public set fitToContent(value: BooleanValueOrAttribute) { + this.renderer.setProperty(this.elementRef.nativeElement, 'fitToContent', toBooleanProperty(value)); + } + + public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef) { } +} diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.module.ts b/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.module.ts new file mode 100644 index 0000000000..c94455a3a8 --- /dev/null +++ b/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NimbleRichTextViewerDirective } from './nimble-rich-text-viewer.directive'; + +import '@ni/nimble-components/dist/esm/rich-text-viewer'; + +@NgModule({ + declarations: [NimbleRichTextViewerDirective], + imports: [CommonModule], + exports: [NimbleRichTextViewerDirective] +}) +export class NimbleRichTextViewerModule { } diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts new file mode 100644 index 0000000000..3095ab2d57 --- /dev/null +++ b/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts @@ -0,0 +1,50 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component, ViewChild } from '@angular/core'; +import { NimbleRichTextViewerModule } from '../nimble-rich-text-viewer.module'; +import { NimbleRichTextViewerDirective } from '../nimble-rich-text-viewer.directive'; + +describe('Nimble Rich Text Viewer', () => { + describe('module', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NimbleRichTextViewerModule] + }); + }); + + it('custom element is defined', () => { + expect(customElements.get('nimble-rich-text-viewer')).not.toBeUndefined(); + }); + }); + + describe('with no values in template', () => { + @Component({ + template: ` + + ` + }) + class TestHostComponent { + @ViewChild('viewer', { read: NimbleRichTextViewerDirective }) public directive: NimbleRichTextViewerDirective; + } + + let fixture: ComponentFixture; + let directive: NimbleRichTextViewerDirective; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestHostComponent], + imports: [NimbleRichTextViewerModule] + }); + fixture = TestBed.createComponent(TestHostComponent); + fixture.detectChanges(); + directive = fixture.componentInstance.directive; + }); + + it('has expected defaults for markdownValue', () => { + expect(directive.markdownValue).toBeUndefined(); + }); + + it('has expected defaults for fitToContent', () => { + expect(directive.fitToContent).toBeUndefined(); + }); + }); +}); \ No newline at end of file diff --git a/angular-workspace/projects/ni/nimble-angular/src/public-api.ts b/angular-workspace/projects/ni/nimble-angular/src/public-api.ts index 0400247dcd..3f55b7ea08 100644 --- a/angular-workspace/projects/ni/nimble-angular/src/public-api.ts +++ b/angular-workspace/projects/ni/nimble-angular/src/public-api.ts @@ -64,6 +64,8 @@ export * from './directives/radio/nimble-radio.directive'; export * from './directives/radio/nimble-radio.module'; export * from './directives/radio-group/nimble-radio-group.directive'; export * from './directives/radio-group/nimble-radio-group.module'; +export * from './directives/rich-text-viewer/nimble-rich-text-viewer.directive'; +export * from './directives/rich-text-viewer/nimble-rich-text-viewer.module'; export * from './directives/select/nimble-select-control-value-accessor.directive'; export * from './directives/select/nimble-select.directive'; export * from './directives/select/nimble-select.module'; From 271209d36e6e1aa1a76c6ad8673dc2310e339f8b Mon Sep 17 00:00:00 2001 From: "SOLITONTECH\\vivin.krishna" <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Wed, 5 Jul 2023 16:11:10 +0530 Subject: [PATCH 2/5] Change files --- ...imble-angular-cdb52323-3b25-46f5-806a-fc2a0fb553e0.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-angular-cdb52323-3b25-46f5-806a-fc2a0fb553e0.json diff --git a/change/@ni-nimble-angular-cdb52323-3b25-46f5-806a-fc2a0fb553e0.json b/change/@ni-nimble-angular-cdb52323-3b25-46f5-806a-fc2a0fb553e0.json new file mode 100644 index 0000000000..39aa732a23 --- /dev/null +++ b/change/@ni-nimble-angular-cdb52323-3b25-46f5-806a-fc2a0fb553e0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Angular integration for nimble-rich-text-viewer component", + "packageName": "@ni/nimble-angular", + "email": "123377523+vivinkrishna-ni@users.noreply.github.com", + "dependentChangeType": "patch" +} From 18bf735edd126759862b990b61c26b0ac0f0e628 Mon Sep 17 00:00:00 2001 From: "SOLITONTECH\\vivin.krishna" <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 6 Jul 2023 11:26:56 +0530 Subject: [PATCH 3/5] Reorganized the folder structure of rich-text-viewer angular folder to expose a secondary entry point --- .../projects/example-client-app/src/app/app.module.ts | 3 ++- .../src/app/customapp/customapp.component.html | 8 ++++---- .../ni/nimble-angular/rich-text-viewer/ng-package.json | 6 ++++++ .../rich-text-viewer/nimble-rich-text-viewer.directive.ts | 0 .../rich-text-viewer/nimble-rich-text-viewer.module.ts | 0 .../ni/nimble-angular/rich-text-viewer/public-api.ts | 2 ++ .../tests/nimble-rich-text-viewer.directive.spec.ts | 0 .../projects/ni/nimble-angular/src/public-api.ts | 2 -- 8 files changed, 14 insertions(+), 7 deletions(-) create mode 100644 angular-workspace/projects/ni/nimble-angular/rich-text-viewer/ng-package.json rename angular-workspace/projects/ni/nimble-angular/{src/directives => }/rich-text-viewer/nimble-rich-text-viewer.directive.ts (100%) rename angular-workspace/projects/ni/nimble-angular/{src/directives => }/rich-text-viewer/nimble-rich-text-viewer.module.ts (100%) create mode 100644 angular-workspace/projects/ni/nimble-angular/rich-text-viewer/public-api.ts rename angular-workspace/projects/ni/nimble-angular/{src/directives => }/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts (100%) diff --git a/angular-workspace/projects/example-client-app/src/app/app.module.ts b/angular-workspace/projects/example-client-app/src/app/app.module.ts index 787b13d7f0..f46b4bc0e7 100644 --- a/angular-workspace/projects/example-client-app/src/app/app.module.ts +++ b/angular-workspace/projects/example-client-app/src/app/app.module.ts @@ -9,10 +9,11 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N NimbleIconAddModule, NimbleSwitchModule, NimbleToolbarModule, NimbleMenuButtonModule, NimbleComboboxModule, NimbleTooltipModule, NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioModule, NimbleSpinnerModule, NimbleAnchorModule, NimbleAnchorButtonModule, NimbleAnchorTabModule, NimbleAnchorTabsModule, - NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule, NimbleRichTextViewerModule } from '@ni/nimble-angular'; + NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule } from '@ni/nimble-angular'; import { NimbleTableModule } from '@ni/nimble-angular/table'; import { NimbleTableColumnTextModule } from '@ni/nimble-angular/table-column/text'; import { NimbleTableColumnAnchorModule } from '@ni/nimble-angular/table-column/anchor'; +import { NimbleRichTextViewerModule } from '@ni/nimble-angular/rich-text-viewer'; import { AppComponent } from './app.component'; import { CustomAppComponent } from './customapp/customapp.component'; import { HeaderComponent } from './header/header.component'; diff --git a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html index 40a81d13de..25ff054c41 100644 --- a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html +++ b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html @@ -170,6 +170,10 @@ {{ item ? item.first : '' }} +
+
Rich Text Viewer
+ +
Spinner
@@ -313,9 +317,5 @@
-
-
Rich Text Viewer
- -
diff --git a/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/ng-package.json b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/ng-package.json new file mode 100644 index 0000000000..7945e60e70 --- /dev/null +++ b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + } +} \ No newline at end of file diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.directive.ts b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.directive.ts similarity index 100% rename from angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.directive.ts rename to angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.directive.ts diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.module.ts b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.module.ts similarity index 100% rename from angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/nimble-rich-text-viewer.module.ts rename to angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.module.ts diff --git a/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/public-api.ts b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/public-api.ts new file mode 100644 index 0000000000..72700896b5 --- /dev/null +++ b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/public-api.ts @@ -0,0 +1,2 @@ +export * from './nimble-rich-text-viewer.directive'; +export * from './nimble-rich-text-viewer.module'; \ No newline at end of file diff --git a/angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts similarity index 100% rename from angular-workspace/projects/ni/nimble-angular/src/directives/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts rename to angular-workspace/projects/ni/nimble-angular/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts diff --git a/angular-workspace/projects/ni/nimble-angular/src/public-api.ts b/angular-workspace/projects/ni/nimble-angular/src/public-api.ts index 3f55b7ea08..0400247dcd 100644 --- a/angular-workspace/projects/ni/nimble-angular/src/public-api.ts +++ b/angular-workspace/projects/ni/nimble-angular/src/public-api.ts @@ -64,8 +64,6 @@ export * from './directives/radio/nimble-radio.directive'; export * from './directives/radio/nimble-radio.module'; export * from './directives/radio-group/nimble-radio-group.directive'; export * from './directives/radio-group/nimble-radio-group.module'; -export * from './directives/rich-text-viewer/nimble-rich-text-viewer.directive'; -export * from './directives/rich-text-viewer/nimble-rich-text-viewer.module'; export * from './directives/select/nimble-select-control-value-accessor.directive'; export * from './directives/select/nimble-select.directive'; export * from './directives/select/nimble-select.module'; From 83f08fee0b1510937dfb120f956da67a65dd226c Mon Sep 17 00:00:00 2001 From: "SOLITONTECH\\vivin.krishna" <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 6 Jul 2023 21:59:10 +0530 Subject: [PATCH 4/5] Removed the input APIs as of now to get started with the component --- .../nimble-rich-text-viewer.directive.ts | 12 +------ .../nimble-rich-text-viewer.directive.spec.ts | 36 +------------------ 2 files changed, 2 insertions(+), 46 deletions(-) diff --git a/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.directive.ts b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.directive.ts index d48fea14b1..e81ea7ee61 100644 --- a/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.directive.ts @@ -1,5 +1,4 @@ -import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; -import { type BooleanValueOrAttribute, toBooleanProperty } from '@ni/nimble-angular/internal-utilities'; +import { Directive } from '@angular/core'; import type { RichTextViewer } from '@ni/nimble-components/dist/esm/rich-text-viewer'; export type { RichTextViewer }; @@ -12,14 +11,5 @@ export type { RichTextViewer }; }) export class NimbleRichTextViewerDirective { - @Input() public set markdownValue(value: string) { - this.renderer.setProperty(this.elementRef.nativeElement, 'markdownValue', value); - } - // eslint-disable-next-line @angular-eslint/no-input-rename - @Input('fit-to-content') public set fitToContent(value: BooleanValueOrAttribute) { - this.renderer.setProperty(this.elementRef.nativeElement, 'fitToContent', toBooleanProperty(value)); - } - - public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef) { } } diff --git a/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts index 3095ab2d57..774c69c7ff 100644 --- a/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts @@ -1,7 +1,5 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { Component, ViewChild } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; import { NimbleRichTextViewerModule } from '../nimble-rich-text-viewer.module'; -import { NimbleRichTextViewerDirective } from '../nimble-rich-text-viewer.directive'; describe('Nimble Rich Text Viewer', () => { describe('module', () => { @@ -15,36 +13,4 @@ describe('Nimble Rich Text Viewer', () => { expect(customElements.get('nimble-rich-text-viewer')).not.toBeUndefined(); }); }); - - describe('with no values in template', () => { - @Component({ - template: ` - - ` - }) - class TestHostComponent { - @ViewChild('viewer', { read: NimbleRichTextViewerDirective }) public directive: NimbleRichTextViewerDirective; - } - - let fixture: ComponentFixture; - let directive: NimbleRichTextViewerDirective; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [TestHostComponent], - imports: [NimbleRichTextViewerModule] - }); - fixture = TestBed.createComponent(TestHostComponent); - fixture.detectChanges(); - directive = fixture.componentInstance.directive; - }); - - it('has expected defaults for markdownValue', () => { - expect(directive.markdownValue).toBeUndefined(); - }); - - it('has expected defaults for fitToContent', () => { - expect(directive.fitToContent).toBeUndefined(); - }); - }); }); \ No newline at end of file From f7430181ef50ecbe9182c0a9146576ba956c04dd Mon Sep 17 00:00:00 2001 From: "SOLITONTECH\\vivin.krishna" <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Mon, 10 Jul 2023 15:30:01 +0530 Subject: [PATCH 5/5] Removed markdownValue property from the example-client-app --- .../src/app/customapp/customapp.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html index 25ff054c41..18656bf066 100644 --- a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html +++ b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html @@ -172,7 +172,7 @@
Rich Text Viewer
- +
Spinner