feat(popover): new popover feature

projects/core/src/lib/fab/fab.component.scss

@@ -16,11 +16,11 @@ fiv-loading-progress-bar {
   pointer-events: none;
 }
 
-fiv-icon.ios {
+::ng-deep ng-deep fiv-icon.ios {
   --fiv-icon-height: 24px;
   --fiv-icon-width: 24px;
 }
-fiv-icon:not(.ios) {
+::ng-deep fiv-icon:not(.ios) {
   --fiv-icon-height: 25px;
   --fiv-icon-width: 25px;
 }

projects/core/src/lib/popover/popover-element.directive.ts

@@ -0,0 +1,44 @@
+import { FivPopover } from './popover.component';
+import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
+import { tap } from 'rxjs/operators';
+
+@Directive({
+  selector: '[fivPopover]',
+  exportAs: 'fivPopover'
+})
+export class PopoverElementDirective implements AfterViewInit {
+  _show: boolean;
+  @Input() fivPopover: FivPopover;
+
+  @Input('fivPopover.show') set show(visible: boolean) {
+    this._show = visible;
+
+    if (this.show) {
+      this.fivPopover.openElementRef(this.el);
+    } else if (this.fivPopover.overlay && this.fivPopover.overlay.open) {
+      this.fivPopover.close();
+    }
+  }
+  get show() {
+    return this._show;
+  }
+
+  constructor(private el: ElementRef) {}
+
+  open() {
+    this.show = true;
+  }
+  hide() {
+    this.show = false;
+  }
+
+  ngAfterViewInit(): void {
+    this.fivPopover.overlay.afterInit
+      .pipe(
+        tap(() => {
+          this.show = this._show;
+        })
+      )
+      .subscribe();
+  }
+}

projects/core/src/lib/popover/popover.component.html

@@ -1,9 +1,12 @@
 <fiv-overlay>
-  <div *ngIf="backdrop" class="popover-backdrop" (click)="close()">
+  <div *ngIf="backdrop" class="fiv-popover-backdrop" (click)="close()">
   </div>
-  <div class="popover-container" [style.left]="left + 'px'" [style.top]="top + 'px'" [style.height]="height + 'px'"
-    [style.width]="width + 'px'">
+  <div class="popover-container" [style]="containerStyles">
     <ng-content>
     </ng-content>
+    <svg *ngIf="arrow && !overlaysTarget" class="arrow" [style]="svgStyles">
+      <polygon [attr.points]="triangle" />
+    </svg>
   </div>
+
 </fiv-overlay>

projects/core/src/lib/popover/popover.component.scss

@@ -1,16 +1,20 @@
 :host {
   --fiv-popover-backdrop-color: rgba(0, 0, 0, 0.2);
 }
+
 .popover-container {
   position: absolute;
   display: block;
 }
 
-.popover-backdrop  {
+svg.arrow {
+  position: absolute;
+  fill: var(--ion-item-background);
+}
+
+.fiv-popover-backdrop {
   position: absolute;
   display: block;
-  top: 0;
-  left: 0;
   width: 100vw;
   height: 100vh;
   background: var(--fiv-popover-backdrop-color);