diff --git a/src/cdk-experimental/dialog/dialog-config.ts b/src/cdk-experimental/dialog/dialog-config.ts index c92ecb2b5e7..b7b3b863f54 100644 --- a/src/cdk-experimental/dialog/dialog-config.ts +++ b/src/cdk-experimental/dialog/dialog-config.ts @@ -79,7 +79,7 @@ export class DialogConfig { data?: D | null = null; /** The layout direction for the dialog content. */ - direction?: Direction = 'ltr'; + direction?: Direction; /** ID of the element that describes the dialog. */ ariaDescribedBy?: string | null = null; diff --git a/src/cdk/overlay/overlay-config.ts b/src/cdk/overlay/overlay-config.ts index f9b8bc30f79..48040af21ed 100644 --- a/src/cdk/overlay/overlay-config.ts +++ b/src/cdk/overlay/overlay-config.ts @@ -48,7 +48,7 @@ export class OverlayConfig { maxHeight?: number | string; /** The direction of the text in the overlay panel. */ - direction?: Direction = 'ltr'; + direction?: Direction; constructor(config?: OverlayConfig) { if (config) { diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts index 6fe2dc39d99..f0b67e80603 100644 --- a/src/cdk/overlay/overlay.spec.ts +++ b/src/cdk/overlay/overlay.spec.ts @@ -1,5 +1,6 @@ import {async, fakeAsync, tick, ComponentFixture, inject, TestBed} from '@angular/core/testing'; import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core'; +import {Direction, Directionality} from '@angular/cdk/bidi'; import { ComponentPortal, PortalModule, @@ -24,10 +25,20 @@ describe('Overlay', () => { let overlayContainerElement: HTMLElement; let overlayContainer: OverlayContainer; let viewContainerFixture: ComponentFixture; + let dir: Direction; beforeEach(async(() => { + dir = 'ltr'; TestBed.configureTestingModule({ - imports: [OverlayModule, PortalModule, OverlayTestModule] + imports: [OverlayModule, PortalModule, OverlayTestModule], + providers: [{ + provide: Directionality, + useFactory: () => { + const fakeDirectionality = {}; + Object.defineProperty(fakeDirectionality, 'value', {get: () => dir}); + return fakeDirectionality; + } + }], }).compileComponents(); })); @@ -132,13 +143,21 @@ describe('Overlay', () => { .toBeFalsy('Expected cake to still be on top.'); })); + it('should take the default direction from the global Directionality', () => { + dir = 'rtl'; + overlay.create().attach(componentPortal); + + const pane = overlayContainerElement.children[0] as HTMLElement; + expect(pane.getAttribute('dir')).toBe('rtl'); + }); + it('should set the direction', () => { const config = new OverlayConfig({direction: 'rtl'}); overlay.create(config).attach(componentPortal); const pane = overlayContainerElement.children[0] as HTMLElement; - expect(pane.getAttribute('dir')).toEqual('rtl'); + expect(pane.getAttribute('dir')).toBe('rtl'); }); it('should emit when an overlay is attached', () => { diff --git a/src/cdk/overlay/overlay.ts b/src/cdk/overlay/overlay.ts index cdaeee95a4c..872f599c2ff 100644 --- a/src/cdk/overlay/overlay.ts +++ b/src/cdk/overlay/overlay.ts @@ -22,6 +22,7 @@ import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher' import {OverlayContainer} from './overlay-container'; import {ScrollStrategyOptions} from './scroll/index'; import {DOCUMENT} from '@angular/common'; +import {Directionality} from '@angular/cdk/bidi'; /** Next overlay unique ID. */ @@ -47,7 +48,8 @@ export class Overlay { private _appRef: ApplicationRef, private _injector: Injector, private _ngZone: NgZone, - @Inject(DOCUMENT) private _document: any) { } + @Inject(DOCUMENT) private _document: any, + private _directionality: Directionality) { } /** * Creates an overlay. @@ -57,11 +59,14 @@ export class Overlay { create(config?: OverlayConfig): OverlayRef { const pane = this._createPaneElement(); const portalOutlet = this._createPortalOutlet(pane); + const overlayConfig = new OverlayConfig(config); + + overlayConfig.direction = overlayConfig.direction || this._directionality.value; return new OverlayRef( portalOutlet, pane, - new OverlayConfig(config), + overlayConfig, this._ngZone, this._keyboardDispatcher, this._document diff --git a/src/lib/bottom-sheet/bottom-sheet-config.ts b/src/lib/bottom-sheet/bottom-sheet-config.ts index 42cbbecffb0..17a89232fc4 100644 --- a/src/lib/bottom-sheet/bottom-sheet-config.ts +++ b/src/lib/bottom-sheet/bottom-sheet-config.ts @@ -23,7 +23,7 @@ export class MatBottomSheetConfig { panelClass?: string | string[]; /** Text layout direction for the bottom sheet. */ - direction?: Direction = 'ltr'; + direction?: Direction; /** Data being injected into the child component. */ data?: D | null = null; diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 52109de4b32..9602bba4530 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -84,7 +84,7 @@ export class MatDialogConfig { data?: D | null = null; /** Layout direction for the dialog's content. */ - direction?: Direction = 'ltr'; + direction?: Direction; /** ID of the element that describes the dialog. */ ariaDescribedBy?: string | null = null; diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts index 8f63cabcfdd..cde7d651c5c 100644 --- a/src/lib/snack-bar/snack-bar-config.ts +++ b/src/lib/snack-bar/snack-bar-config.ts @@ -46,7 +46,7 @@ export class MatSnackBarConfig { extraClasses?: string | string[]; /** Text layout direction for the snack bar. */ - direction?: Direction = 'ltr'; + direction?: Direction; /** Data being injected into the child component. */ data?: D | null = null;