feat(overlay): allow for Directionality instance to be passed in (#11411)

Allows for a `Directionality` instance to be passed in to the `OverlayRef`, in addition to a static `Direction`. Using a `Directionality` has the advantage of not having to keep the overlay's direction in sync manually with whatever component triggered it. It also gets rid of some annoying null checks.

Author: crisbeto

src/cdk/overlay/overlay-config.ts

@@ -7,7 +7,7 @@
  */
 
 import {PositionStrategy} from './position/position-strategy';
-import {Direction} from '@angular/cdk/bidi';
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ScrollStrategy} from './scroll/scroll-strategy';
 import {NoopScrollStrategy} from './scroll/noop-scroll-strategy';
 
@@ -47,8 +47,11 @@ export class OverlayConfig {
   /** The max-height of the overlay panel. If a number is provided, pixel units are assumed. */
   maxHeight?: number | string;
 
-  /** The direction of the text in the overlay panel. */
-  direction?: Direction;
+  /**
+   * Direction of the text in the overlay panel. If a `Directionality` instance
+   * is passed in, the overlay will handle changes to its value automatically.
+   */
+  direction?: Direction | Directionality;
 
   constructor(config?: OverlayConfig) {
     if (config) {

src/cdk/overlay/overlay-directives.ts

@@ -267,6 +267,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _buildConfig(): OverlayConfig {
     const positionStrategy = this._position = this._createPositionStrategy();
     const overlayConfig = new OverlayConfig({
+      direction: this._dir,
       positionStrategy,
       scrollStrategy: this.scrollStrategy,
       hasBackdrop: this.hasBackdrop
@@ -348,8 +349,6 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       });
     }
 
-    this._overlayRef.setDirection(this.dir);
-
     if (!this._overlayRef.hasAttached()) {
       this._overlayRef.attach(this._templatePortal);
       this.attach.emit();

src/cdk/overlay/overlay-ref.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Direction} from '@angular/cdk/bidi';
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ComponentPortal, Portal, PortalOutlet, TemplatePortal} from '@angular/cdk/portal';
 import {ComponentRef, EmbeddedViewRef, NgZone} from '@angular/core';
 import {Observable, Subject} from 'rxjs';
@@ -21,9 +21,6 @@ export type ImmutableObject<T> = {
   readonly [P in keyof T]: T[P];
 };
 
-// TODO(crisbeto): add support for passing in a `Directionality`
-// to make syncing the direction easier.
-
 /**
  * Reference to an overlay that has been created with the Overlay service.
  * Used to manipulate or dispose of said overlay.
@@ -242,14 +239,27 @@ export class OverlayRef implements PortalOutlet {
   }
 
   /** Sets the LTR/RTL direction for the overlay. */
-  setDirection(dir: Direction) {
+  setDirection(dir: Direction | Directionality) {
     this._config = {...this._config, direction: dir};
     this._updateElementDirection();
   }
 
+  /**
+   * Returns the layout direction of the overlay panel.
+   */
+  getDirection(): Direction {
+    const direction = this._config.direction;
+
+    if (!direction) {
+      return 'ltr';
+    }
+
+    return typeof direction === 'string' ? direction : direction.value;
+  }
+
   /** Updates the text direction of the overlay panel. */
   private _updateElementDirection() {
-    this._host.setAttribute('dir', this._config.direction!);
+    this._host.setAttribute('dir', this.getDirection());
   }
 
   /** Updates the size of the overlay element based on the overlay config. */

src/cdk/overlay/overlay.spec.ts

@@ -6,6 +6,7 @@ import {
   ViewContainerRef,
   ErrorHandler,
   Injectable,
+  EventEmitter,
 } from '@angular/core';
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {
@@ -318,6 +319,15 @@ describe('Overlay', () => {
     expect(() => TestBed.compileComponents()).not.toThrow();
   });
 
+  it('should keep the direction in sync with the passed in Directionality', () => {
+    const customDirectionality = {value: 'rtl', change: new EventEmitter()};
+    const overlayRef = overlay.create({direction: customDirectionality as Directionality});
+
+    expect(overlayRef.getDirection()).toBe('rtl');
+    customDirectionality.value = 'ltr';
+    expect(overlayRef.getDirection()).toBe('ltr');
+  });
+
   describe('positioning', () => {
     let config: OverlayConfig;
 

src/cdk/overlay/position/connected-position-strategy.ts

@@ -45,7 +45,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
 
   /** Whether the we're dealing with an RTL context */
   get _isRtl() {
-    return this._overlayRef.getConfig().direction === 'rtl';
+    return this._overlayRef.getDirection() === 'rtl';
   }
 
   /** Ordered list of preferred positions, from most to least desirable. */

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -942,7 +942,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
 
   /** Whether the we're dealing with an RTL context */
   private _isRtl() {
-    return this._overlayRef.getConfig().direction === 'rtl';
+    return this._overlayRef.getDirection() === 'rtl';
   }
 
   /** Determines whether the overlay uses exact or flexible positioning. */

src/lib/autocomplete/autocomplete-trigger.ts

@@ -528,7 +528,6 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     } else {
       // Update the panel width and direction, in case anything has changed.
       this._overlayRef.updateSize({width: this._getHostWidth()});
-      this._overlayRef.setDirection(this._getDirection());
     }
 
     if (this._overlayRef && !this._overlayRef.hasAttached()) {
@@ -553,7 +552,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       positionStrategy: this._getOverlayPosition(),
       scrollStrategy: this._scrollStrategy(),
       width: this._getHostWidth(),
-      direction: this._getDirection()
+      direction: this._dir
     });
   }
 
@@ -570,10 +569,6 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     return this._positionStrategy;
   }
 
-  private _getDirection() {
-    return this._dir ? this._dir.value : 'ltr';
-  }
-
   private _getConnectedElement(): ElementRef {
     if (this.connectedTo) {
       return this.connectedTo.elementRef;

src/lib/datepicker/datepicker.ts

@@ -381,7 +381,7 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
   /** Open the calendar as a dialog. */
   private _openAsDialog(): void {
     this._dialogRef = this._dialog.open<MatDatepickerContent<D>>(MatDatepickerContent, {
-      direction: this._getDirection(),
+      direction: this._dir ? this._dir.value : 'ltr',
       viewContainerRef: this._viewContainerRef,
       panelClass: 'mat-datepicker-dialog',
     });
@@ -403,7 +403,6 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
     }
 
     if (!this._popupRef.hasAttached()) {
-      this._popupRef.setDirection(this._getDirection());
       this._popupComponentRef = this._popupRef.attach(this._calendarPortal);
       this._popupComponentRef.instance.datepicker = this;
       this._setColor();
@@ -421,7 +420,7 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
       positionStrategy: this._createPopupPositionStrategy(),
       hasBackdrop: true,
       backdropClass: 'mat-overlay-transparent-backdrop',
-      direction: this._getDirection(),
+      direction: this._dir,
       scrollStrategy: this._scrollStrategy(),
       panelClass: 'mat-datepicker-popup',
     });
@@ -493,9 +492,4 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
       this._dialogRef.componentInstance.color = color;
     }
   }
-
-  /** Returns the layout direction of the datepicker. */
-  private _getDirection() {
-    return this._dir ? this._dir.value : 'ltr';
-  }
 }

src/lib/menu/menu-trigger.ts

@@ -195,7 +195,6 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     }
 
     const overlayRef = this._createOverlay();
-    overlayRef.setDirection(this.dir);
     overlayRef.attach(this._portal);
 
     if (this.menu.lazyContent) {
@@ -353,7 +352,8 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
       positionStrategy: this._getPosition(),
       hasBackdrop: this.menu.hasBackdrop == null ? !this.triggersSubmenu() : this.menu.hasBackdrop,
       backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
-      scrollStrategy: this._scrollStrategy()
+      scrollStrategy: this._scrollStrategy(),
+      direction: this._dir
     });
   }
 

src/lib/tooltip/tooltip.ts

@@ -264,7 +264,6 @@ export class MatTooltip implements OnDestroy {
     const overlayRef = this._createOverlay();
 
     this._detach();
-    overlayRef.setDirection(this._dir ? this._dir.value : 'ltr');
     this._portal = this._portal || new ComponentPortal(TooltipComponent, this._viewContainerRef);
     this._tooltipInstance = overlayRef.attach(this._portal).instance;
     this._tooltipInstance.afterHidden()
@@ -334,6 +333,7 @@ export class MatTooltip implements OnDestroy {
     });
 
     this._overlayRef = this._overlay.create({
+      direction: this._dir,
       positionStrategy: strategy,
       panelClass: TOOLTIP_PANEL_CLASS,
       scrollStrategy: this._scrollStrategy()