-
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.
* initial commit * updates * updates * tests and html updates * updates * FAST update * public api updates (#309) * formatting * updates * Change files * visible fix (#309) * tooltip angular integration (#309) * html updates (#309) * delay updates
- Loading branch information
Showing
8 changed files
with
280 additions
and
2 deletions.
There are no files selected for viewing
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
33 changes: 33 additions & 0 deletions
33
...r-workspace/projects/ni/nimble-angular/src/directives/tooltip/nimble-tooltip.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,33 @@ | ||
| import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; | ||
| import type { Tooltip } from '@ni/nimble-components/dist/esm/tooltip'; | ||
| import { TooltipStatus } from '@ni/nimble-components/dist/esm/tooltip/types'; | ||
| import { NumberValueOrAttribute, toNumberProperty } from '../utilities/template-value-helpers'; | ||
|
|
||
| export type { Tooltip }; | ||
| export { TooltipStatus }; | ||
|
|
||
| /** | ||
| * Directive to provide Angular integration for the tooltip. | ||
| */ | ||
| @Directive({ | ||
| selector: 'nimble-tooltip' | ||
| }) | ||
| export class NimbleTooltipDirective { | ||
| public get anchor(): string { | ||
| return this.elementRef.nativeElement.anchor; | ||
| } | ||
|
|
||
| @Input() public set anchor(value: string) { | ||
| this.renderer.setProperty(this.elementRef.nativeElement, 'anchor', value); | ||
| } | ||
|
|
||
| public get delay(): number { | ||
| return this.elementRef.nativeElement.delay; | ||
| } | ||
|
|
||
| @Input() public set delay(value: NumberValueOrAttribute) { | ||
| this.renderer.setProperty(this.elementRef.nativeElement, 'delay', toNumberProperty(value)); | ||
| } | ||
|
|
||
| public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<Tooltip>) {} | ||
| } |
12 changes: 12 additions & 0 deletions
12
angular-workspace/projects/ni/nimble-angular/src/directives/tooltip/nimble-tooltip.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,12 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { NimbleTooltipDirective } from './nimble-tooltip.directive'; | ||
|
|
||
| import '@ni/nimble-components/dist/esm/tooltip'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [NimbleTooltipDirective], | ||
| imports: [CommonModule], | ||
| exports: [NimbleTooltipDirective] | ||
| }) | ||
| export class NimbleTooltipModule { } |
210 changes: 210 additions & 0 deletions
210
.../projects/ni/nimble-angular/src/directives/tooltip/tests/nimble-tooltip.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,210 @@ | ||
| import { Component, ElementRef, ViewChild } from '@angular/core'; | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import type { NumberValueOrAttribute } from 'dist/ni/nimble-angular/directives/utilities/template-value-helpers'; | ||
| import { Tooltip, NimbleTooltipDirective, TooltipStatus } from '../nimble-tooltip.directive'; | ||
| import { NimbleTooltipModule } from '../nimble-tooltip.module'; | ||
|
|
||
| describe('Nimble tooltip', () => { | ||
| describe('module', () => { | ||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [NimbleTooltipModule] | ||
| }); | ||
| }); | ||
|
|
||
| it('defines custom element', () => { | ||
| expect(customElements.get('nimble-tooltip')).not.toBeUndefined(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('TooltipStatus', () => { | ||
| it('can use TooltipStatus values', () => { | ||
| // Ensure TooltipStatus is exported correctly so that it can be used | ||
| // as more than a type. | ||
| expect(TooltipStatus.information).toEqual(TooltipStatus.information); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with no values in template', () => { | ||
| @Component({ | ||
| template: ` | ||
| <nimble-tooltip #tooltip></nimble-tooltip> | ||
| ` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('tooltip', { read: NimbleTooltipDirective }) public directive: NimbleTooltipDirective; | ||
| @ViewChild('tooltip', { read: ElementRef }) public elementRef: ElementRef<Tooltip>; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleTooltipDirective; | ||
| let nativeElement: Tooltip; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleTooltipModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('has expected defaults for anchor', () => { | ||
| expect(directive.anchor).toBe(''); | ||
| expect(nativeElement.anchor).toBe(''); | ||
| }); | ||
|
|
||
| it('has expected defaults for delay', () => { | ||
| expect(directive.delay).toBe(300); | ||
| expect(nativeElement.delay).toBe(300); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with template string values', () => { | ||
| @Component({ | ||
| template: ` | ||
| <nimble-tooltip #tooltip | ||
| anchor="anchor" | ||
| delay=300> | ||
| </nimble-tooltip>` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('tooltip', { read: NimbleTooltipDirective }) public directive: NimbleTooltipDirective; | ||
| @ViewChild('tooltip', { read: ElementRef }) public elementRef: ElementRef<Tooltip>; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleTooltipDirective; | ||
| let nativeElement: Tooltip; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleTooltipModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('will use template string values for anchor', () => { | ||
| expect(directive.anchor).toBe('anchor'); | ||
| expect(nativeElement.anchor).toBe('anchor'); | ||
| }); | ||
|
|
||
| it('will use template string values for delay', () => { | ||
| expect(directive.delay).toBe(300); | ||
| expect(nativeElement.delay).toBe(300); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with property bound values', () => { | ||
| @Component({ | ||
| template: ` | ||
| <nimble-tooltip #tooltip | ||
| [anchor]="anchor" | ||
| [delay]="delay"> | ||
| </nimble-tooltip> | ||
| ` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('tooltip', { read: NimbleTooltipDirective }) public directive: NimbleTooltipDirective; | ||
| @ViewChild('tooltip', { read: ElementRef }) public elementRef: ElementRef<Tooltip>; | ||
| public anchor = 'anchor'; | ||
| public delay = 300; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleTooltipDirective; | ||
| let nativeElement: Tooltip; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleTooltipModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('can be configured with property binding for anchor', () => { | ||
| expect(directive.anchor).toBe('anchor'); | ||
| expect(nativeElement.anchor).toBe('anchor'); | ||
|
|
||
| fixture.componentInstance.anchor = 'anchor2'; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(directive.anchor).toBe('anchor2'); | ||
| expect(nativeElement.anchor).toBe('anchor2'); | ||
| }); | ||
| it('can be configured with property binding for delay', () => { | ||
| expect(directive.delay).toBe(300); | ||
| expect(nativeElement.delay).toBe(300); | ||
|
|
||
| fixture.componentInstance.delay = 400; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(directive.delay).toBe(400); | ||
| expect(nativeElement.delay).toBe(400); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with attribute bound values', () => { | ||
| @Component({ | ||
| template: ` | ||
| <nimble-tooltip #tooltip | ||
| [attr.anchor]="anchor" | ||
| [attr.delay]="delay"> | ||
| </nimble-tooltip> | ||
| ` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('tooltip', { read: NimbleTooltipDirective }) public directive: NimbleTooltipDirective; | ||
| @ViewChild('tooltip', { read: ElementRef }) public elementRef: ElementRef<Tooltip>; | ||
| public anchor = 'anchor'; | ||
| public delay: NumberValueOrAttribute = 300; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleTooltipDirective; | ||
| let nativeElement: Tooltip; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleTooltipModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('can be configured with attribute binding for anchor', () => { | ||
| expect(directive.anchor).toBe('anchor'); | ||
| expect(nativeElement.anchor).toBe('anchor'); | ||
|
|
||
| fixture.componentInstance.anchor = 'anchor2'; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(directive.anchor).toBe('anchor2'); | ||
| expect(nativeElement.anchor).toBe('anchor2'); | ||
| }); | ||
| // Test is disabled because of [FAST bug](https://github.com/microsoft/fast/issues/6257) | ||
| xit('can be configured with attribute binding for delay', () => { | ||
| expect(directive.delay).toBe(300); | ||
| expect(nativeElement.delay).toBe(300); | ||
|
|
||
| fixture.componentInstance.delay = 400; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(directive.delay).toBe(400); | ||
| expect(nativeElement.delay).toBe(400); | ||
| }); | ||
| }); | ||
| }); |
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
7 changes: 7 additions & 0 deletions
7
change/@ni-nimble-angular-95820796-03e5-42c0-aec1-3dbd10c45311.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": "Tooltip Angular Integration (#309)", | ||
| "packageName": "@ni/nimble-angular", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |