feat: tour integration

Tour Integration

src/app/configuration-wizard/popover/popover-arrow.directive.ts

@@ -0,0 +1,59 @@
+/* Angular Imports */
+import { Directive, Renderer2, ElementRef, HostBinding, ChangeDetectorRef, OnDestroy } from '@angular/core';
+
+/* rxjs Imports */
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+/* Popover Ref */
+import { PopoverRef } from './popover-ref';
+
+/**
+ * Internal directive that shows the popover arrow.
+ */
+@Directive({
+  selector: '[mifosxPopoverArrow]'
+})
+export class PopoverArrowDirective implements OnDestroy {
+  @HostBinding('style.width.px')
+  @HostBinding('style.height.px')
+  arrowSize: number;
+
+  @HostBinding('style.top.px')
+  offsetTop: number;
+
+  @HostBinding('style.right.px')
+  offsetRight: number;
+
+  @HostBinding('style.bottom.px')
+  offsetBottom: number;
+
+  @HostBinding('style.left.px')
+  offsetLeft: number;
+
+  private subscription = new Subscription();
+
+  /**
+   * @param {PopoverRef} popoverRef PopoverRef.
+   * @param {ChangeDetectorRef} cd ChangeDetectorRef
+   */
+  constructor(private popoverRef: PopoverRef,
+              private cd: ChangeDetectorRef) {
+    this.arrowSize = popoverRef.config.arrowSize;
+
+    this.subscription = popoverRef.positionChanges().subscribe(p => {
+      const { offsetX, offsetY } = p.connectionPair;
+
+      this.offsetTop = offsetY >= 0 ? offsetY * -1 : null;
+      this.offsetLeft = offsetX < 0 ? offsetX * -1 : null;
+      this.offsetBottom = offsetY < 0 ? offsetY : null;
+      this.offsetRight = offsetX >= 0 ? offsetX : null;
+
+      this.cd.detectChanges();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}