chore: add example that shows "popover" mode for modal service

Author: VladimirAmiorkov

e2e/modal-navigation-ng/app/navigation/basic.navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewContainerRef, Input } from "@angular/core";
+import { Component, ViewContainerRef, Input, ViewChild } from "@angular/core";
 import { Router, NavigationEnd } from "@angular/router";
 import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
 import { ModalComponent } from "../modal/modal.component";
@@ -16,20 +16,22 @@ import { ModalViewComponent } from "~/modal-shared/modal-view.component";
     <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()" textAlignment="left"></Button>
     <Button text="Show Modal Page With Frame" (tap)="onModalFrame()" textAlignment="left"></Button>
     <Button text="Show Shared Modal" (tap)="onRootModalTap()" textAlignment="left"></Button>
-    <Button text="Show Dialog" (tap)="onShowDialog()" textAlignment="left"></Button>
+    <Button #popoverButtonComp text="Show Dialog" (tap)="onShowDialog()" textAlignment="left"></Button>
+    <Button text="Show 'popover' modal" (tap)="onPopoverModal()" textAlignment="left"></Button>
 </StackLayout>`
 })
 
 export class BasicsNavigationComponent {
 
+    @ViewChild("popoverButtonComp") popoverButtonComp;
     @Input() col: number;
     constructor(
         private modal: ModalDialogService,
         private router: Router,
         private vcf: ViewContainerRef,
         private viewContainerRefService: ViewContainerRefService) {
     }
- 
+
     onModalNoFrame() {
         const options: ModalDialogOptions = {
             context: {
@@ -74,14 +76,28 @@ export class BasicsNavigationComponent {
 
     onRootModalTap(): void {
         const options: ModalDialogOptions = {
-          viewContainerRef: this.viewContainerRefService.root,
-          context: {},
-          fullscreen: true
+            viewContainerRef: this.viewContainerRefService.root,
+            context: {},
+            fullscreen: true
         };
-     
+
         this.modal.showModal(ModalViewComponent, options)
-        .then((result: string) => {
-          console.log(result);
-        });
-      }
+            .then((result: string) => {
+                console.log(result);
+            });
+    }
+
+    onPopoverModal() {
+        const options: ModalDialogOptions = {
+            viewContainerRef: this.viewContainerRefService.root,
+            context: {},
+            ios: {
+                presentationStyle: UIModalPresentationStyle.Popover
+            },
+            sourceView: this.popoverButtonComp
+        };
+
+        this.modal.showModal(ModalViewComponent, options)
+            .then((result: string) => { console.log(result);});
+    }
 }

e2e/modal-navigation-ng/package.json

@@ -46,6 +46,7 @@
     "nativescript-dev-appium": "next",
     "nativescript-dev-typescript": "next",
     "nativescript-dev-webpack": "next",
+    "tns-platform-declarations": "next",
     "typescript": "~3.1.1"
   },
   "scripts": {

e2e/modal-navigation-ng/references.d.ts

@@ -0,0 +1 @@
+/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />