feat(tooltip): add animations

ng-bootstrap · Jul 2, 2020 · cc55e6b · cc55e6b
1 parent d82a302
commit cc55e6b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/src/tooltip/tooltip-config.spec.ts b/src/tooltip/tooltip-config.spec.ts
@@ -1,9 +1,13 @@
 import {NgbTooltipConfig} from './tooltip-config';
 
+import {NgbConfig} from '../ngb-config';
+
 describe('ngb-tooltip-config', () => {
   it('should have sensible default values', () => {
-    const config = new NgbTooltipConfig();
+    const ngbConfig = new NgbConfig();
+    const config = new NgbTooltipConfig(ngbConfig);
 
+    expect(config.animation).toBe(ngbConfig.animation);
     expect(config.autoClose).toBe(true);
     expect(config.placement).toBe('auto');
     expect(config.triggers).toBe('hover focus');

diff --git a/src/tooltip/tooltip-config.ts b/src/tooltip/tooltip-config.ts
@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
 import {PlacementArray} from '../util/positioning';
+import {NgbConfig} from '../ngb-config';
 
 /**
  * A configuration service for the [`NgbTooltip`](#/components/tooltip/api#NgbTooltip) component.
@@ -9,6 +10,7 @@ import {PlacementArray} from '../util/positioning';
  */
 @Injectable({providedIn: 'root'})
 export class NgbTooltipConfig {
+  animation: boolean;
   autoClose: boolean | 'inside' | 'outside' = true;
   placement: PlacementArray = 'auto';
   triggers = 'hover focus';
@@ -17,4 +19,6 @@ export class NgbTooltipConfig {
   tooltipClass: string;
   openDelay = 0;
   closeDelay = 0;
+
+  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
 }
diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts
@@ -15,6 +15,7 @@ import {
 import {NgbTooltipModule} from './tooltip.module';
 import {NgbTooltipWindow, NgbTooltip} from './tooltip';
 import {NgbTooltipConfig} from './tooltip-config';
+import {NgbConfig} from '../ngb-config';
 
 const createTestComponent =
     (html: string) => <ComponentFixture<TestComponent>>createGenericTestComponent(html, TestComponent);
@@ -604,7 +605,7 @@ describe('ngb-tooltip', () => {
   });
 
   describe('Custom config as provider', () => {
-    let config = new NgbTooltipConfig();
+    let config = new NgbTooltipConfig(new NgbConfig());
     config.placement = 'bottom';
     config.triggers = 'click';
     config.container = 'body';

diff --git a/src/tooltip/tooltip.ts b/src/tooltip/tooltip.ts
@@ -37,11 +37,17 @@ let nextId = 0;
   selector: 'ngb-tooltip-window',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  host: {'[class]': '"tooltip show" + (tooltipClass ? " " + tooltipClass : "")', 'role': 'tooltip', '[id]': 'id'},
+  host: {
+    '[class]': '"tooltip" + (tooltipClass ? " " + tooltipClass : "")',
+    '[class.fade]': 'animation',
+    'role': 'tooltip',
+    '[id]': 'id'
+  },
   template: `<div class="arrow"></div><div class="tooltip-inner"><ng-content></ng-content></div>`,
   styleUrls: ['./tooltip.scss']
 })
 export class NgbTooltipWindow {
+  @Input() animation: boolean;
   @Input() id: string;
   @Input() tooltipClass: string;
 }
@@ -53,6 +59,11 @@ export class NgbTooltipWindow {
 export class NgbTooltip implements OnInit, OnDestroy, OnChanges {
   static ngAcceptInputType_autoClose: boolean | string;
 
+  /**
+  * If `true`, tooltip opening and closing will be animated.
+  */
+  @Input() animation: boolean;
+
   /**
    * Indicates whether the tooltip should be closed on `Escape` key and inside/outside clicks:
    *
@@ -145,6 +156,7 @@ export class NgbTooltip implements OnInit, OnDestroy, OnChanges {
       componentFactoryResolver: ComponentFactoryResolver, viewContainerRef: ViewContainerRef, config: NgbTooltipConfig,
       private _ngZone: NgZone, @Inject(DOCUMENT) private _document: any, private _changeDetector: ChangeDetectorRef,
       applicationRef: ApplicationRef) {
+    this.animation = config.animation;
     this.autoClose = config.autoClose;
     this.placement = config.placement;
     this.triggers = config.triggers;
@@ -189,8 +201,9 @@ export class NgbTooltip implements OnInit, OnDestroy, OnChanges {
    */
   open(context?: any) {
     if (!this._windowRef && this._ngbTooltip && !this.disableTooltip) {
-      const {windowRef, transition$} = this._popupService.open(this._ngbTooltip, context);
+      const {windowRef, transition$} = this._popupService.open(this._ngbTooltip, context, this.animation);
       this._windowRef = windowRef;
+      this._windowRef.instance.animation = this.animation;
       this._windowRef.instance.tooltipClass = this.tooltipClass;
       this._windowRef.instance.id = this._ngbTooltipWindowId;
 
@@ -228,7 +241,7 @@ export class NgbTooltip implements OnInit, OnDestroy, OnChanges {
   close(): void {
     if (this._windowRef != null) {
       this._renderer.removeAttribute(this._elementRef.nativeElement, 'aria-describedby');
-      this._popupService.close().subscribe(() => {
+      this._popupService.close(this.animation).subscribe(() => {
         this._windowRef = null;
         this.hidden.emit();
         this._changeDetector.markForCheck();