feat(tooltip): allow dynamic dir switching (#127)

projects/ng-aquila/src/tooltip/tooltip.directive.ts

@@ -1,5 +1,5 @@
 import { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
+import { Direction, Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';
 import { ESCAPE } from '@angular/cdk/keycodes';
 import {
@@ -29,7 +29,7 @@ import {
   ComponentRef,
   OnInit,
 } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { NxTooltipComponent } from './tooltip.component';
 
@@ -109,6 +109,7 @@ export class NxTooltipDirective implements OnDestroy, OnInit {
   private _scrollStrategy: () => ScrollStrategy;
   private _embeddedViewRef: ComponentRef<NxTooltipComponent>;
   private _possibleTooltipPositions: TooltipPosition[] = ['bottom', 'top', 'left', 'right'];
+  private _dirChangeSubscription: Subscription;
 
   /** Allows the user to define the position of the tooltip relative to the parent element */
   @Input('nxTooltipPosition')
@@ -188,6 +189,7 @@ export class NxTooltipDirective implements OnDestroy, OnInit {
       private _defaultOptions: NxTooltipDefaultOptions) {
 
     this._scrollStrategy = this._overlay.scrollStrategies.reposition;
+    this._dirChangeSubscription = _dir.change.subscribe(this._dirChangeHandler.bind(this));
     const element: HTMLElement = _elementRef.nativeElement;
 
     // The mouse events shouldn't be bound on mobile devices, because they can prevent the
@@ -248,6 +250,7 @@ export class NxTooltipDirective implements OnDestroy, OnInit {
 
     this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.message);
     this._focusMonitor.stopMonitoring(this._elementRef);
+    this._dirChangeSubscription.unsubscribe();
   }
 
   /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
@@ -334,7 +337,7 @@ export class NxTooltipDirective implements OnDestroy, OnInit {
     });
 
     this._overlayRef = this._overlay.create({
-      direction: this._dir,
+      direction: this._dir.value || 'ltr',
       positionStrategy: strategy,
       panelClass: NX_TOOLTIP_PANEL_CLASS,
       scrollStrategy: this._scrollStrategy(),
@@ -618,6 +621,14 @@ export class NxTooltipDirective implements OnDestroy, OnInit {
     }
   }
 
+  _dirChangeHandler(value: Direction) {
+    if (this._overlayRef) {
+      this.hide(0);
+      this._overlayRef.setDirection(value);
+      this._updatePosition();
+    }
+  }
+
   get _isLtr(): boolean {
     return !this._dir || this._dir.value === 'ltr';
   }

projects/ng-aquila/src/tooltip/tooltip.spec.ts

@@ -15,6 +15,7 @@ import {
   ElementRef,
   ViewChild,
   NgZone,
+  EventEmitter,
 } from '@angular/core';
 import { AnimationEvent } from '@angular/animations';
 import { By } from '@angular/platform-browser';
@@ -64,7 +65,7 @@ const initialTooltipMessage = 'initial tooltip message';
 describe('NxTooltipDirective', () => {
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
-  let dir: {value: Direction};
+  let dir: {value: Direction, change: EventEmitter<Direction>};
   let platform: {IOS: boolean, isBrowser: boolean, ANDROID: boolean};
   let focusMonitor: FocusMonitor;
 
@@ -84,7 +85,7 @@ describe('NxTooltipDirective', () => {
       providers: [
         {provide: Platform, useFactory: () => platform},
         {provide: Directionality, useFactory: () => {
-          return dir = {value: 'ltr'};
+          return dir = {value: 'ltr', change: new EventEmitter()};
         }}
       ]
     });
@@ -441,19 +442,26 @@ describe('NxTooltipDirective', () => {
 
       // Test expectations in RTL
       dir.value = 'rtl';
+      dir.change.emit('rtl');
+      fixture.detectChanges();
       expect(tooltipDirective._getOrigin(tooltipDirective.position)).toEqual(leftOrigin);
       tooltipDirective.position = 'left';
       expect(tooltipDirective._getOrigin(tooltipDirective.position)).toEqual(rightOrigin);
     });
 
     it('should consistently position before and after overlay position in ltr and rtl dir', () => {
+      dir.value = 'ltr';
+      dir.change.emit('ltr');
+      fixture.detectChanges();
       tooltipDirective.position = 'left';
       const leftOverlayPosition = tooltipDirective._getOverlayPosition(tooltipDirective.position);
       tooltipDirective.position = 'right';
       const rightOverlayPosition = tooltipDirective._getOverlayPosition(tooltipDirective.position);
 
       // Test expectations in RTL
       dir.value = 'rtl';
+      dir.change.emit('rtl');
+      fixture.detectChanges();
       expect(tooltipDirective._getOverlayPosition(tooltipDirective.position)).toEqual(leftOverlayPosition);
       tooltipDirective.position = 'left';
       expect(tooltipDirective._getOverlayPosition(tooltipDirective.position)).toEqual(rightOverlayPosition);
@@ -483,6 +491,7 @@ describe('NxTooltipDirective', () => {
 
     it('should keep the overlay direction in sync with the trigger direction', fakeAsync(() => {
       dir.value = 'rtl';
+      dir.change.emit('rtl');
       tooltipDirective.show();
       tick(200);
       fixture.detectChanges();
@@ -498,6 +507,7 @@ describe('NxTooltipDirective', () => {
       tick(500);
 
       dir.value = 'ltr';
+      dir.change.emit('ltr');
       tooltipDirective.show();
       tick(200);
       fixture.detectChanges();