From 50c7cd736f9beb0024955b9025a81653ce81fb31 Mon Sep 17 00:00:00 2001
From: Will Howell <will.s.howell@gmail.com>
Date: Mon, 23 Oct 2017 16:11:50 -0400
Subject: [PATCH 1/6] Add directionality check to popover

---
 src/lib/popover/popover-anchor.directive.ts | 10 ++++++++++
 src/lib/popover/popover.module.ts           |  2 ++
 2 files changed, 12 insertions(+)

diff --git a/src/lib/popover/popover-anchor.directive.ts b/src/lib/popover/popover-anchor.directive.ts
index 98d8be4..bf08afc 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 {
     }
   }
 
+  /** The text direction of the containing app. */
+  private get _direction(): 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._direction,
     });
 
     return config;
@@ -278,6 +287,7 @@ export class SatPopoverAnchor implements OnInit, OnDestroy {
         {originX: originX, originY: originY},
         {overlayX: overlayX, overlayY: overlayY}
       )
+      .withDirection(this._direction)
       // (2)
       .withFallbackPosition(
         {originX: 'center', originY: originY},
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,

From b4661836bde6c0165bcd3c588c9ac0e82e53f047 Mon Sep 17 00:00:00 2001
From: Will Howell <will.s.howell@gmail.com>
Date: Mon, 23 Oct 2017 17:21:16 -0400
Subject: [PATCH 2/6] Add directionality switching in demo app title

---
 src/demo/app/demo.component.scss |  4 ++++
 src/demo/app/demo.component.ts   | 18 ++++++++++++++++--
 src/demo/app/demo.module.ts      |  4 ++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/demo/app/demo.component.scss b/src/demo/app/demo.component.scss
index 0cce0d4..f8d275c 100644
--- a/src/demo/app/demo.component.scss
+++ b/src/demo/app/demo.component.scss
@@ -3,6 +3,10 @@
   min-height: 100%;
 }
 
+.dir-select {
+  margin-left: auto;
+}
+
 .page-content {
   padding: 48px;
 
diff --git a/src/demo/app/demo.component.ts b/src/demo/app/demo.component.ts
index 7aa8122..8a18b8c 100644
--- a/src/demo/app/demo.component.ts
+++ b/src/demo/app/demo.component.ts
@@ -7,9 +7,16 @@ import { Component } from '@angular/core';
   template: `
     <mat-toolbar color="primary">
       SAT Popover Demo
+
+      <button mat-button class="dir-select"
+          (click)="toggleDirection()"
+          title="Toggle between RTL and LTR">
+        {{ direction.toUpperCase() }}
+      </button>
     </mat-toolbar>
 
-    <div class="page-content">
+
+    <div class="page-content" [dir]="direction">
       <demo-positioning></demo-positioning>
       <demo-action-api></demo-action-api>
       <demo-scroll-strategies></demo-scroll-strategies>
@@ -20,4 +27,11 @@ import { Component } from '@angular/core';
     </div>
   `
 })
-export class DemoComponent { }
+export class DemoComponent {
+  direction = 'rtl';
+
+  toggleDirection() {
+    this.direction = (this.direction === 'rtl' ? 'ltr' : 'rtl');
+  }
+
+}
diff --git a/src/demo/app/demo.module.ts b/src/demo/app/demo.module.ts
index e9f846f..066300f 100644
--- a/src/demo/app/demo.module.ts
+++ b/src/demo/app/demo.module.ts
@@ -14,6 +14,7 @@ import {
   MatDatepickerModule,
   MatNativeDateModule,
 } from '@angular/material';
+import { BidiModule } from '@angular/cdk/bidi';
 
 import { DemoComponent } from './demo.component';
 import { PositioningDemo } from './positioning/positioning.component';
@@ -26,6 +27,7 @@ import { TooltipDemo } from './tooltip/tooltip.component';
 
 @NgModule({
   exports: [
+    // material
     MatToolbarModule,
     MatCardModule,
     MatButtonModule,
@@ -35,6 +37,8 @@ import { TooltipDemo } from './tooltip/tooltip.component';
     MatCheckboxModule,
     MatDatepickerModule,
     MatNativeDateModule,
+    // cdk
+    BidiModule,
   ]
 })
 export class DemoMaterialModule { }

From 2453e3a976e1dd87c39d749e32f00a2769c275e9 Mon Sep 17 00:00:00 2001
From: Will Howell <will.s.howell@gmail.com>
Date: Wed, 25 Oct 2017 09:11:01 -0400
Subject: [PATCH 3/6] Add rtl transform origins

---
 src/lib/popover/popover.component.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

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;
+    }
   }
 
 }

From 080a383efee7125538e7f36bdd886c8ebd436199 Mon Sep 17 00:00:00 2001
From: Will Howell <will.s.howell@gmail.com>
Date: Wed, 25 Oct 2017 11:25:23 -0400
Subject: [PATCH 4/6] Remove demo toggle

- For whatever reason, I'm unable to get the popover anchor to inject the correct Dir instance. It always seems to inject the root Directionality instance, which doesn't support dynamic toggling. For a future PR
- Testing can still be done by statically adding `dir="rtl"` to the body.
---
 src/demo/app/demo.component.scss |  4 ----
 src/demo/app/demo.component.ts   | 18 ++----------------
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/demo/app/demo.component.scss b/src/demo/app/demo.component.scss
index f8d275c..0cce0d4 100644
--- a/src/demo/app/demo.component.scss
+++ b/src/demo/app/demo.component.scss
@@ -3,10 +3,6 @@
   min-height: 100%;
 }
 
-.dir-select {
-  margin-left: auto;
-}
-
 .page-content {
   padding: 48px;
 
diff --git a/src/demo/app/demo.component.ts b/src/demo/app/demo.component.ts
index 8a18b8c..7aa8122 100644
--- a/src/demo/app/demo.component.ts
+++ b/src/demo/app/demo.component.ts
@@ -7,16 +7,9 @@ import { Component } from '@angular/core';
   template: `
     <mat-toolbar color="primary">
       SAT Popover Demo
-
-      <button mat-button class="dir-select"
-          (click)="toggleDirection()"
-          title="Toggle between RTL and LTR">
-        {{ direction.toUpperCase() }}
-      </button>
     </mat-toolbar>
 
-
-    <div class="page-content" [dir]="direction">
+    <div class="page-content">
       <demo-positioning></demo-positioning>
       <demo-action-api></demo-action-api>
       <demo-scroll-strategies></demo-scroll-strategies>
@@ -27,11 +20,4 @@ import { Component } from '@angular/core';
     </div>
   `
 })
-export class DemoComponent {
-  direction = 'rtl';
-
-  toggleDirection() {
-    this.direction = (this.direction === 'rtl' ? 'ltr' : 'rtl');
-  }
-
-}
+export class DemoComponent { }

From 65220da2d62736b3d410c9704c141cf456201424 Mon Sep 17 00:00:00 2001
From: Will Howell <will.s.howell@gmail.com>
Date: Wed, 25 Oct 2017 11:26:34 -0400
Subject: [PATCH 5/6] Followup - remove bidi module import

---
 src/demo/app/demo.module.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/demo/app/demo.module.ts b/src/demo/app/demo.module.ts
index 066300f..e9f846f 100644
--- a/src/demo/app/demo.module.ts
+++ b/src/demo/app/demo.module.ts
@@ -14,7 +14,6 @@ import {
   MatDatepickerModule,
   MatNativeDateModule,
 } from '@angular/material';
-import { BidiModule } from '@angular/cdk/bidi';
 
 import { DemoComponent } from './demo.component';
 import { PositioningDemo } from './positioning/positioning.component';
@@ -27,7 +26,6 @@ import { TooltipDemo } from './tooltip/tooltip.component';
 
 @NgModule({
   exports: [
-    // material
     MatToolbarModule,
     MatCardModule,
     MatButtonModule,
@@ -37,8 +35,6 @@ import { TooltipDemo } from './tooltip/tooltip.component';
     MatCheckboxModule,
     MatDatepickerModule,
     MatNativeDateModule,
-    // cdk
-    BidiModule,
   ]
 })
 export class DemoMaterialModule { }

From b04384a225059ab327948ca426c878b45d0af2cf Mon Sep 17 00:00:00 2001
From: Will Howell <will.s.howell@gmail.com>
Date: Wed, 25 Oct 2017 13:04:13 -0400
Subject: [PATCH 6/6] Address self review

---
 src/lib/popover/popover-anchor.directive.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/popover/popover-anchor.directive.ts b/src/lib/popover/popover-anchor.directive.ts
index bf08afc..04e08c2 100644
--- a/src/lib/popover/popover-anchor.directive.ts
+++ b/src/lib/popover/popover-anchor.directive.ts
@@ -121,8 +121,8 @@ export class SatPopoverAnchor implements OnInit, OnDestroy {
     }
   }
 
-  /** The text direction of the containing app. */
-  private get _direction(): Direction {
+  /** Gets the text direction of the containing app. */
+  private _getDirection(): Direction {
     return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
   }
 
@@ -225,7 +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._direction,
+      direction: this._getDirection(),
     });
 
     return config;
@@ -287,7 +287,7 @@ export class SatPopoverAnchor implements OnInit, OnDestroy {
         {originX: originX, originY: originY},
         {overlayX: overlayX, overlayY: overlayY}
       )
-      .withDirection(this._direction)
+      .withDirection(this._getDirection())
       // (2)
       .withFallbackPosition(
         {originX: 'center', originY: originY},