-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ListOptionGroup integration to Angular/Blazor (#2161)
# Pull Request ## 🤨 Rationale - #791 ## 👩💻 Implementation Standard integration implementations for Angular/Blazor. ## 🧪 Testing Standard unit tests for Angular/Blazor. Updated both example apps. ## ✅ 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). --> - [ ] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Milan Raj <rajsite@users.noreply.github.com>
- Loading branch information
1 parent
87422aa
commit bcc1362
Showing
13 changed files
with
417 additions
and
19 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@ni-nimble-angular-15ded37a-1e3c-45e6-ac81-efc1a0e3ed92.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "Angular integration for ListOptionGroup", | ||
| "packageName": "@ni/nimble-angular", | ||
| "email": "26874831+atmgrifter00@users.noreply.github.com", | ||
| "dependentChangeType": "patch" | ||
| } |
7 changes: 7 additions & 0 deletions
7
change/@ni-nimble-blazor-ff25f2c8-3144-41dc-a6d2-e2e3accd113c.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "Blazor integration for ListOptionGroup", | ||
| "packageName": "@ni/nimble-blazor", | ||
| "email": "26874831+atmgrifter00@users.noreply.github.com", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
...ace/nimble-angular/src/directives/list-option-group/nimble-list-option-group.directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { Directive, Input, ElementRef, Renderer2 } from '@angular/core'; | ||
| import { type BooleanValueOrAttribute, toBooleanProperty } from '@ni/nimble-angular/internal-utilities'; | ||
| import type { ListOptionGroup, listOptionGroupTag } from '@ni/nimble-components/dist/esm/list-option-group'; | ||
|
|
||
| export type { ListOptionGroup }; | ||
| export { listOptionGroupTag }; | ||
|
|
||
| /** | ||
| * Directive to provide Angular integration for the list option group. | ||
| */ | ||
| @Directive({ | ||
| selector: 'nimble-list-option-group' | ||
| }) | ||
| export class NimbleListOptionGroupDirective { | ||
| public get label(): string | undefined { | ||
| return this.elementRef.nativeElement.label; | ||
| } | ||
|
|
||
| @Input() public set label(value: string | undefined) { | ||
| this.renderer.setProperty(this.elementRef.nativeElement, 'label', value); | ||
| } | ||
|
|
||
| public get hidden(): boolean { | ||
| return this.elementRef.nativeElement.hidden; | ||
| } | ||
|
|
||
| @Input() public set hidden(value: BooleanValueOrAttribute) { | ||
| this.renderer.setProperty(this.elementRef.nativeElement, 'hidden', toBooleanProperty(value)); | ||
| } | ||
|
|
||
| public constructor( | ||
| private readonly elementRef: ElementRef<ListOptionGroup>, | ||
| private readonly renderer: Renderer2, | ||
| ) { } | ||
| } |
16 changes: 16 additions & 0 deletions
16
...kspace/nimble-angular/src/directives/list-option-group/nimble-list-option-group.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { NimbleListOptionGroupDirective } from './nimble-list-option-group.directive'; | ||
|
|
||
| import '@ni/nimble-components/dist/esm/list-option'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [ | ||
| NimbleListOptionGroupDirective | ||
| ], | ||
| imports: [CommonModule], | ||
| exports: [ | ||
| NimbleListOptionGroupDirective | ||
| ] | ||
| }) | ||
| export class NimbleListOptionGroupModule { } |
207 changes: 207 additions & 0 deletions
207
...angular/src/directives/list-option-group/tests/nimble-list-option-group.directive.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,207 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { Component, ElementRef, ViewChild } from '@angular/core'; | ||
| import type { BooleanValueOrAttribute } from '@ni/nimble-angular/internal-utilities'; | ||
| import { NimbleListOptionGroupModule } from '../nimble-list-option-group.module'; | ||
| import type { ListOptionGroup } from '../../../public-api'; | ||
| import { NimbleListOptionGroupDirective } from '../nimble-list-option-group.directive'; | ||
|
|
||
| describe('Nimble listbox option group', () => { | ||
| describe('module', () => { | ||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [NimbleListOptionGroupModule] | ||
| }); | ||
| }); | ||
|
|
||
| it('custom element is defined', () => { | ||
| expect(customElements.get('nimble-list-option-group')).not.toBeUndefined(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with no values in template', () => { | ||
| @Component({ | ||
| template: ` | ||
| <nimble-list-option-group #listOptionGroup></nimble-list-option-group> | ||
| ` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('listOptionGroup', { read: NimbleListOptionGroupDirective }) public directive: NimbleListOptionGroupDirective; | ||
| @ViewChild('listOptionGroup', { read: ElementRef }) public elementRef: ElementRef<ListOptionGroup>; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleListOptionGroupDirective; | ||
| let nativeElement: ListOptionGroup; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleListOptionGroupModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('has expected defaults for label', () => { | ||
| expect(directive.label).toBeUndefined(); | ||
| expect(nativeElement.label).toBeUndefined(); | ||
| }); | ||
|
|
||
| it('has expected defaults for hidden', () => { | ||
| expect(directive.hidden).toBeFalse(); | ||
| expect(nativeElement.hidden).toBeFalse(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with template string values', () => { | ||
| @Component({ | ||
| template: ` | ||
| <nimble-list-option-group #listOptionGroup | ||
| hidden | ||
| label="foo" | ||
| ></nimble-list-option-group> | ||
| ` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('listOptionGroup', { read: NimbleListOptionGroupDirective }) public directive: NimbleListOptionGroupDirective; | ||
| @ViewChild('listOptionGroup', { read: ElementRef }) public elementRef: ElementRef<ListOptionGroup>; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleListOptionGroupDirective; | ||
| let nativeElement: ListOptionGroup; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleListOptionGroupModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('will use template string values for label', () => { | ||
| expect(directive.label).toBe('foo'); | ||
| expect(nativeElement.label).toBe('foo'); | ||
| }); | ||
|
|
||
| it('will use template string values for hidden', () => { | ||
| expect(directive.hidden).toBeTrue(); | ||
| expect(nativeElement.hidden).toBeTrue(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with property bound values', () => { | ||
| @Component({ | ||
| template: ` | ||
| <nimble-list-option-group #listOptionGroup | ||
| [label]="label" | ||
| [hidden]="hidden" | ||
| ></nimble-list-option-group> | ||
| ` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('listOptionGroup', { read: NimbleListOptionGroupDirective }) public directive: NimbleListOptionGroupDirective; | ||
| @ViewChild('listOptionGroup', { read: ElementRef }) public elementRef: ElementRef<ListOptionGroup>; | ||
|
|
||
| public label = ''; | ||
| public hidden = false; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleListOptionGroupDirective; | ||
| let nativeElement: ListOptionGroup; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleListOptionGroupModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('can be configured with property binding for label', () => { | ||
| expect(directive.label).toBe(''); | ||
| expect(nativeElement.label).toBe(''); | ||
|
|
||
| fixture.componentInstance.label = 'foo'; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(directive.label).toBe('foo'); | ||
| expect(nativeElement.label).toBe('foo'); | ||
| }); | ||
|
|
||
| it('can be configured with property binding for hidden', () => { | ||
| expect(directive.hidden).toBeFalse(); | ||
| expect(nativeElement.hidden).toBeFalse(); | ||
|
|
||
| fixture.componentInstance.hidden = true; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(directive.hidden).toBeTrue(); | ||
| expect(nativeElement.hidden).toBeTrue(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with property attribute values', () => { | ||
| @Component({ | ||
| template: ` | ||
| <nimble-list-option-group #listOptionGroup | ||
| [attr.label]="label" | ||
| [attr.hidden]="hidden"> | ||
| </nimble-list-option-group> | ||
| ` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('listOptionGroup', { read: NimbleListOptionGroupDirective }) public directive: NimbleListOptionGroupDirective; | ||
| @ViewChild('listOptionGroup', { read: ElementRef }) public elementRef: ElementRef<ListOptionGroup>; | ||
|
|
||
| public label = 'foo'; | ||
| public hidden: BooleanValueOrAttribute = null; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleListOptionGroupDirective; | ||
| let nativeElement: ListOptionGroup; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleListOptionGroupModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('can be configured with attribute binding for label', () => { | ||
| expect(directive.label).toBe('foo'); | ||
| expect(nativeElement.label).toBe('foo'); | ||
|
|
||
| fixture.componentInstance.label = 'bar'; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(directive.label).toBe('bar'); | ||
| expect(nativeElement.label).toBe('bar'); | ||
| }); | ||
|
|
||
| it('can be configured with attribute binding for hidden', () => { | ||
| expect(directive.hidden).toBeFalse(); | ||
| expect(nativeElement.hidden).toBeFalse(); | ||
|
|
||
| fixture.componentInstance.hidden = ''; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(directive.hidden).toBeTrue(); | ||
| expect(nativeElement.hidden).toBeTrue(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.