feat(popover): force positioning

Author: garygrossgarten

Diff for: projects/core/src/lib/popover/popover-element.directive.ts

@@ -1,13 +1,14 @@
 import { FivPopover } from './popover.component';
 import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
-import { tap } from 'rxjs/operators';
+import { tap, delay } from 'rxjs/operators';
 
 @Directive({
   selector: '[fivPopover]',
   exportAs: 'fivPopover'
 })
 export class PopoverElementDirective implements AfterViewInit {
   _show: boolean;
+  @Input('fivPopover.delay') delay = 50;
   @Input() fivPopover: FivPopover;
 
   @Input('fivPopover.show') set show(visible: boolean) {
@@ -29,13 +30,14 @@ export class PopoverElementDirective implements AfterViewInit {
   open() {
     this.show = true;
   }
-  close() {
+  hide() {
     this.show = false;
   }
 
   ngAfterViewInit(): void {
     this.fivPopover.overlay.afterInit
       .pipe(
+        delay(this.delay),
         tap(() => {
           this.show = this._show;
         })

Diff for: projects/core/src/lib/popover/popover.animations.ts

@@ -26,9 +26,7 @@ export const animIn = (
       beforeStyle(
         element,
         'transform-origin',
-        `${position.vertical === 'top' ? 'bottom' : 'top'} ${
-          position.horizontal === 'left' ? 'right' : 'left'
-        }`
+        `${position.vertical} ${position.horizontal}`
       )
     )
   );

Diff for: projects/core/src/lib/popover/popover.component.html

@@ -1,7 +1,7 @@
 <fiv-overlay>
   <div *ngIf="backdrop && !hidden" [ngClass]="classes" class="fiv-popover-backdrop" (click)="close()">
   </div>
-  <div *ngIf="!hidden" [ngClass]="classes" class="popover-container" [style]="containerStyles">
+  <div *ngIf="!hidden" [ngClass]="classes" class="popover-container" [style]="styles">
     <div #animation *ngIf="overlay?.open" class="animation-container" anim [anim.in]="animationIn">
       <ng-content>
       </ng-content>

Diff for: projects/core/src/lib/popover/popover.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { PopoverComponent } from './popover.component';
+import { FivPopover } from './popover.component';
 
-describe('PopoverComponent', () => {
-  let component: PopoverComponent;
-  let fixture: ComponentFixture<PopoverComponent>;
+describe('FivPopover', () => {
+  let component: FivPopover;
+  let fixture: ComponentFixture<FivPopover>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PopoverComponent ],
+      declarations: [FivPopover],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(PopoverComponent);
+    fixture = TestBed.createComponent(FivPopover);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));