diff --git a/src/lib/popover/popover-anchor.directive.ts b/src/lib/popover/popover-anchor.directive.ts index 98d8be4..04e08c2 100644 --- a/src/lib/popover/popover-anchor.directive.ts +++ b/src/lib/popover/popover-anchor.directive.ts @@ -5,6 +5,7 @@ import { Input, OnInit, OnDestroy, + Optional, Output, ViewContainerRef } from '@angular/core'; @@ -17,6 +18,7 @@ import { ScrollStrategy, VerticalConnectionPos, } from '@angular/cdk/overlay'; +import { Direction, Directionality } from '@angular/cdk/bidi'; import { TemplatePortal } from '@angular/cdk/portal'; import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/Observable'; @@ -82,6 +84,7 @@ export class SatPopoverAnchor implements OnInit, OnDestroy { private _elementRef: ElementRef, private _viewContainerRef: ViewContainerRef, private _notifications: PopoverNotificationService, + @Optional() private _dir: Directionality ) { } ngOnInit() { @@ -118,6 +121,11 @@ export class SatPopoverAnchor implements OnInit, OnDestroy { } } + /** Gets the text direction of the containing app. */ + private _getDirection(): Direction { + return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr'; + } + /** Removes the popover from the DOM. Does NOT update open state. */ private _destroyPopover(): void { if (this._overlayRef) { @@ -217,6 +225,7 @@ export class SatPopoverAnchor implements OnInit, OnDestroy { hasBackdrop: this.attachedPopover.hasBackdrop, backdropClass: this.attachedPopover.backdropClass || 'cdk-overlay-transparent-backdrop', scrollStrategy: this._getScrollStrategyInstance(this.attachedPopover.scrollStrategy), + direction: this._getDirection(), }); return config; @@ -278,6 +287,7 @@ export class SatPopoverAnchor implements OnInit, OnDestroy { {originX: originX, originY: originY}, {overlayX: overlayX, overlayY: overlayY} ) + .withDirection(this._getDirection()) // (2) .withFallbackPosition( {originX: 'center', originY: originY}, diff --git a/src/lib/popover/popover.component.scss b/src/lib/popover/popover.component.scss index 0f937b5..bf288de 100644 --- a/src/lib/popover/popover.component.scss +++ b/src/lib/popover/popover.component.scss @@ -8,14 +8,26 @@ &.sat-popover-before.sat-popover-above { transform-origin: right bottom; + + [dir='rtl'] & { + transform-origin: left bottom; + } } &.sat-popover-before.sat-popover-center { transform-origin: right center; + + [dir='rtl'] & { + transform-origin: left center; + } } &.sat-popover-before.sat-popover-below { transform-origin: right top; + + [dir='rtl'] & { + transform-origin: left top; + } } &.sat-popover-center.sat-popover-above { @@ -28,14 +40,26 @@ &.sat-popover-after.sat-popover-above { transform-origin: left bottom; + + [dir='rtl'] & { + transform-origin: right bottom; + } } &.sat-popover-after.sat-popover-center { transform-origin: left center; + + [dir='rtl'] & { + transform-origin: right center; + } } &.sat-popover-after.sat-popover-below { transform-origin: left top; + + [dir='rtl'] & { + transform-origin: right top; + } } } diff --git a/src/lib/popover/popover.module.ts b/src/lib/popover/popover.module.ts index 0dbcada..3c6f6fa 100644 --- a/src/lib/popover/popover.module.ts +++ b/src/lib/popover/popover.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { OverlayModule } from '@angular/cdk/overlay'; import { A11yModule } from '@angular/cdk/a11y'; +import { BidiModule } from '@angular/cdk/bidi'; import { SatPopover } from './popover.component'; import { SatPopoverAnchor } from './popover-anchor.directive'; @@ -11,6 +12,7 @@ import { SatPopoverAnchor } from './popover-anchor.directive'; CommonModule, OverlayModule, A11yModule, + BidiModule, ], declarations: [ SatPopover,