Popper arrows now flow correctly when auto repositioned

Closes #83

Author: edcarroll

components/popup/popup.ts

@@ -16,7 +16,7 @@ import Popper from "popper.js";
         <div class="content">{{ config.text }}</div>
     </ng-container>
     <div #templateSibling></div>
-    <sui-popup-arrow *ngIf="!config.isBasic" [placement]="_positioningService.placement" [inverted]="config.isInverted"></sui-popup-arrow>
+    <sui-popup-arrow *ngIf="!config.isBasic" [placement]="_positioningService.actualPlacement" [inverted]="config.isInverted"></sui-popup-arrow>
 </div>
 `,
     styles: [`
@@ -83,7 +83,7 @@ export class SuiPopup implements IPopup {
     // Returns the direction (`top`, `left`, `right`, `bottom`) of the current placement.
     public get direction() {
         if (this._positioningService) {
-            return this._positioningService.placement.split(" ").shift();
+            return this._positioningService.actualPlacement.split(" ").shift();
         }
     }
 

components/util/positioning.service.ts

@@ -57,6 +57,43 @@ function placementToPopper(placement:PositioningPlacement):PopperPlacement {
     return chosenPlacement.join("-") as PopperPlacement;
 }
 
+function popperToPlacement(popper:string):PositioningPlacement {
+    if (!popper || popper == "inherit") {
+        return "inherit";
+    }
+
+    const [direction, alignment] = popper.split("-");
+
+    let chosenPlacement = [direction];
+
+    switch (direction) {
+        case "top":
+        case "bottom":
+            switch (alignment) {
+                case "start":
+                    chosenPlacement.push("left");
+                    break;
+                case "end":
+                    chosenPlacement.push("right");
+                    break;
+            }
+            break;
+        case "left":
+        case "right":
+            switch (alignment) {
+                case "start":
+                    chosenPlacement.push("top");
+                    break;
+                case "end":
+                    chosenPlacement.push("bottom");
+                    break;
+            }
+            break;
+    }
+
+    return chosenPlacement.join(" ") as PositioningPlacement;
+}
+
 export class PositioningService {
     public readonly anchor:ElementRef;
     public readonly subject:ElementRef;
@@ -65,7 +102,7 @@ export class PositioningService {
     private _popperState:Popper.Data;
     private _placement:PositioningPlacement;
 
-    public get placement():PositioningPlacement {
+    public get placement() {
         return this._placement;
     }
 
@@ -75,6 +112,10 @@ export class PositioningService {
         this.update();
     }
 
+    public get actualPlacement() {
+        return popperToPlacement(this._popperState.placement);
+    }
+
     public get state() {
         return this._popperState;
     }