@bizdoc/core 1.14.5 → 1.14.9

package/src/lib/core/guide/guide.service.ts

@@ -0,0 +1,108 @@
+import { Injectable, Inject, Injector } from '@angular/core';
+import { Overlay, OverlayRef } from "@angular/cdk/overlay";
+import { ComponentPortal } from "@angular/cdk/portal";
+import { isMobile, isString } from '../functions';
+import { BIZDOC_CONFIG, BizDocConfig } from '../configuration';
+import { GuideStep, Guide } from '../models';
+import { GuideComponent, TOUR_TOKEN } from './guide.component';
+import { SessionService } from '../session.service';
+import { TranslateService } from '../translate.service';
+
+export class GuideRef {
+  constructor(private _guide: Guide, private _overlayRef: OverlayRef) { }
+  closed() {
+    return this._overlayRef.detachments();
+  }
+}
+
+/** */
+@Injectable({ providedIn: 'root' })
+export class GuideService {
+  private _guides: Guide[];
+  constructor(private _overlay: Overlay,
+    private _injector: Injector,
+    private _session: SessionService,
+    private _translate: TranslateService,
+    @Inject(BIZDOC_CONFIG) private _config: BizDocConfig) {
+    const guides: Guide[] = [this._intro()];
+    this._guides = guides.concat(this._session.profile.guides);
+  }
+  /** */
+  private _intro(): Guide {
+    const mobile = isMobile();
+    const steps: GuideStep[] = [
+      { selector: '[data-help=compose]', content: this._translate.get('ComposeHelp'), position: 'End', title: this._translate.get('Compose') }
+    ];
+    steps.push({ navigate: 'dashboard', selector: '[data-help=dashboard]', content: this._translate.get('DashboardHelp'), title: this._translate.get('Dashboard') });
+    steps.push({
+      navigate: 'mailbox/f/ib',
+      selector: '[data-help=folders]',
+      simulate: !mobile,
+      content: this._translate.get('MailboxHelp'),
+      title: this._translate.get('Mailbox')
+    });
+    if (!this._config || this._config.chating !== false)
+      steps.push({
+        selector: '[data-help=chat]', content: this._translate.get('ChatHelp'),
+        simulate: !mobile,
+        position: 'Start', title: this._translate.get('Chat')
+      });
+    if (this._session.profile.cubes.length && this._session.profile.cubes[0].views.length) {
+      let path = `cube/${this._session.profile.cubes[0].name}/v/${this._session.profile.cubes[0].views[0].name}`;
+      steps.push({
+        simulate: !mobile,
+        navigate: path, selector: '[data-help=cube]',
+        content: this._translate.get('CubeHelp'), title: this._translate.get('Cube')
+      });
+    }
+    steps.push(
+      { selector: '[data-help=notifications]', content: this._translate.get('NotificationsHelp'), title: this._translate.get('Notifications') }
+    );
+    return {
+      name: 'intro',
+      title: this._translate.get('Introduction'),
+      steps
+    } as Guide;
+  }
+
+  get guides(): Guide[] {
+    return this._guides;
+  }
+  /**
+   * 
+   * @param name
+   */
+  seen(name: string): boolean {
+    return this._session.profile.options.guides && this._session.profile.options.guides.indexOf(name) > -1;
+  }
+  /**
+   * 
+   * @param options
+   */
+  start(options: Guide | string) {
+    let guide: Guide;
+    if (isString(options)) {
+      guide = this._guides.find(g => g.name === options);
+      if (!guide) throw `guide ${options} not found`;
+    }
+    else guide = options as Guide;
+    const oRef = this._overlay.create({
+      panelClass: 'guide-panel',
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-dark-backdrop',
+      disposeOnNavigation: true,
+      direction: this._session.direction
+    });
+    const injector = Injector.create([{
+      provide: TOUR_TOKEN, useValue: guide
+    }, {
+      provide: OverlayRef, useValue: oRef
+    }], this._injector);
+    const portal = new ComponentPortal(GuideComponent, null, injector);
+    oRef.attach(portal);
+    oRef.backdropClick().subscribe(() => oRef.detach());
+    const gRef = new GuideRef(guide, oRef);
+    !this.seen(guide.name) && this._session.guide(guide.name).subscribe();
+    return gRef;
+  }
+}

package/src/lib/core/guide/help-tip.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { GuideService } from './guide.service';
+
+/**  */
+@Component({
+  template: `
+  <p fxLayout="row" class="form-help-tip" *ngIf="showTip">
+    <mat-icon>help_outline</mat-icon> &nbsp;<span (click)="open($event)" [innerHTML]="'HelpTip'|translate: _message" class="mat-body-1"></span>
+    <button mat-icon-button (click)="dismiss()" [bizdocTooltip]="'Dismiss'|translate"><mat-icon inline>close</mat-icon></button>
+  </p>
+`,
+  styles: [`
+.form-help-tip {
+  align-items: center;
+border: 1px rgb(0 0 0 / 38%) solid;
+  margin: 10px;
+  border-radius: 3px 3px;
+  padding: 0 8px;
+}
+`],
+  selector: 'bizdoc-help-tip'
+})
+export class HelpTipComponent implements OnInit {
+  @Input()
+  name!: string;
+  _message: string;
+  showTip: boolean;
+  constructor(
+    private _guide: GuideService,
+  ) { }
+  ngOnInit(): void {
+    this.showTip = localStorage.getItem(this.name + '-tip') !== '1';
+    const guide = this._guide.guides.find(g => g.name === this.name);
+    this._message = guide.title;
+  }
+  open(evt: MouseEvent) {
+    this._guide.start(this.name);
+  }
+  dismiss() {
+    localStorage.setItem(this.name + 'tip', '1');
+    this.showTip = false;
+  }
+}

package/src/lib/core/http.interceptor.ts

@@ -0,0 +1,80 @@
+import { Inject, Injectable, Optional } from '@angular/core';
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http';
+import { from, Observable, Subject, switchMap, throwError } from 'rxjs';
+import { HubService } from './hub.service';
+import { catchError, map, tap } from 'rxjs/operators';
+import { SessionService } from './session.service';
+import { AuthenticationImpl } from './authentication';
+import { RouterImpl } from './router';
+
+@Injectable({ providedIn: 'root' })
+export class AppHttpInterceptor implements HttpInterceptor {
+  private readonly _ongoing = new Subject<number>();
+  private _authenticating: Observable<any>;
+  readonly active$ = this._ongoing.asObservable().pipe(
+    map(c => c > 0));
+  private _baseUrl: string;
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const forward = () => {
+      const url = this._baseUrl + req.url,
+        connectionId = this._messaging.connectionId,
+        headers = {
+          'accept-language': this._session.language,
+        };
+      if (connectionId)
+        headers['connection-id'] = connectionId;
+
+      const accessToken = this._auth.getAccessToken();
+
+      if (accessToken)
+        headers['Authorization'] = `Bearer ${accessToken}`;
+
+      const request = req.clone({
+        setHeaders: headers,
+        url
+      });
+
+      const handle = next.handle(request).pipe(catchError((e: HttpErrorResponse) => {
+        if (this._authenticating) return this._authenticating;
+        else if (e.status === 401) {
+          //this._session.ok && this._router.navigate(['broken']);
+          this._authenticating = this._auth.authorize().pipe(switchMap(() => {
+            this._authenticating = null;
+            //this._session.ok && history.back();
+            return forward();
+          }));
+          return this._authenticating;
+        }
+        else return throwError(e);
+      }));
+      const noprogress = req.headers.has('no-progress');
+      if (!noprogress) {
+        this._ongoing.next(1);
+        return handle.pipe(tap(event =>
+          event instanceof HttpResponse
+          && this._ongoing.next(0)
+          , () =>
+            this._ongoing.next(0)));
+      }
+      else
+        return handle;
+    }
+    return forward();
+  }
+  constructor(
+    @Inject('BASE_URL') @Optional() baseUrl: string,
+    private _session: SessionService,
+    private _router: RouterImpl,
+    private _auth: AuthenticationImpl,
+    private _messaging: HubService) {
+    if (baseUrl) {
+      if (baseUrl.endsWith('/'))
+        this._baseUrl = baseUrl.substr(0, baseUrl.length - 1);
+      else
+        this._baseUrl = baseUrl;
+    }
+    else
+      this._baseUrl = '';
+  }
+}
+

package/src/lib/core/hub.service.ts

@@ -0,0 +1,202 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { Comment, Notification, Chat, AvailabilityState, RecipientModel } from './models';
+import { HubConnectionBuilder, HubConnection, HubConnectionState } from '@microsoft/signalr';
+import { AuthenticationImpl } from './authentication';
+
+/** Listen to hub contracts */
+@Injectable({
+  providedIn: "root"
+})
+export class HubService {
+  private _connection: HubConnection;
+  private readonly _state = new Subject<HubConnectionState>();
+  readonly state$ = this._state.asObservable();
+  private readonly _configurationChange = new Subject<void>();
+  private readonly _newMail = new Subject<NewMailEvent>();
+  private readonly _newChat = new Subject<ChatEvent>();
+  private readonly _newComment = new Subject<CommentEvent>();
+  private readonly _commentUpdate = new Subject<CommentEvent>();
+  private readonly _commentDelete = new Subject<CommentDeleteEvent>();
+  private readonly _updateMail = new Subject<MailUpdateEvent>();
+  private readonly _mailDelete = new Subject<MailDeleteEvent>();
+  private readonly _mailHeaderUpdate = new Subject<MailUpdateEvent>();
+  private readonly _newNotify = new Subject<NotificationEvent>();
+  private readonly _updateNotify = new Subject<NotificationEvent>();
+  private readonly _profileChange = new Subject<UserInfoEvent>();
+  private readonly _editing = new Subject<EditingEvent>();
+  private readonly _commentTyping = new Subject<CommentTypingEvent>();
+  private readonly _chatTyping = new Subject<ChatTypingEvent>();
+  private readonly _chatWathermark = new Subject<ChatWatermarkEvent>();
+  private readonly _voted = new Subject<VoteEvent>();
+  private readonly _jobProgress = new Subject<JobProgressEvent>();
+  private readonly _reportProgress = new Subject<ReportProgressEvent>();
+  private readonly _callback = new Subject<CallbackEvent>();
+  readonly configurationChange$ = this._configurationChange.asObservable();
+  readonly jobProgress$ = this._jobProgress.asObservable();
+  readonly reportProgress$ = this._reportProgress.asObservable();
+  readonly callback$ = this._callback.asObservable();
+  readonly vote$ = this._voted.asObservable();
+  readonly chatTyping$ = this._chatTyping.asObservable();
+  readonly chatWatermark$ = this._chatWathermark.asObservable();
+  readonly commentTyping$ = this._commentTyping.asObservable();
+  readonly editing$ = this._editing.asObservable();
+  readonly commentUpdate$ = this._commentUpdate.asObservable();
+  readonly commentDelete$ = this._commentDelete.asObservable();
+  /** new notification */
+  readonly notify$ = this._newNotify.asObservable();
+  readonly chat$ = this._newChat.asObservable();
+  readonly updateNotify$ = this._updateNotify.asObservable();
+  /** new mail */
+  readonly new$ = this._newMail.asObservable();
+  /** mail update */
+  readonly update$ = this._updateMail.asObservable();
+  readonly updateMailHeader$ = this._mailHeaderUpdate.asObservable();
+  readonly delete$ = this._mailDelete.asObservable();
+  readonly comment$ = this._newComment.asObservable();
+  readonly profileChange$ = this._profileChange.asObservable();
+  constructor(
+    private _auth: AuthenticationImpl) {
+    this._connection = new HubConnectionBuilder().withUrl('/chub',
+      {
+        accessTokenFactory: () => 
+          this._auth.getAccessToken()
+      }).withAutomaticReconnect().build();
+    this._connection.on('newMail', (data: NewMailEvent) =>
+      this._newMail.next(data));
+    this._connection.on('mailUpdate', (data: MailUpdateEvent) =>
+      this._updateMail.next(data));
+    this._connection.on('mailDelete', (data: MailDeleteEvent) =>
+      this._mailDelete.next(data));
+    this._connection.on('mailHeaderUpdate', (data: MailUpdateEvent) =>
+      this._mailHeaderUpdate.next(data));
+    this._connection.on('newComment', (data: CommentEvent) => {
+      this._newComment.next(data);
+    });
+    this._connection.on('commentUpdate', (data: CommentEvent) =>
+      this._commentUpdate.next(data));
+    this._connection.on('commentDelete', (data: CommentDeleteEvent) =>
+      this._commentDelete.next(data));
+    this._connection.on('newNotify', (data: NotificationEvent) =>
+      this._newNotify.next(data));
+    this._connection.on('updateNotify', (data: NotificationEvent) =>
+      this._updateNotify.next(data));
+    this._connection.on('profileChange', (data: UserInfoEvent) =>
+      this._profileChange.next(data));
+    this._connection.on('newChat', (data: ChatEvent) =>
+      this._newChat.next(data));
+    this._connection.on('commentTyping', (data: CommentTypingEvent) =>
+      this._commentTyping.next(data));
+    this._connection.on('editing', (data: EditingEvent) =>
+      this._editing.next(data));
+    this._connection.on('chatTyping', (data: ChatTypingEvent) =>
+      this._chatTyping.next(data));
+    this._connection.on('chatSeen', (data: ChatWatermarkEvent) =>
+      this._chatWathermark.next(data));
+    this._connection.on('voted', (data: VoteEvent) =>
+      this._voted.next(data));
+    this._connection.on('callback', (data: CallbackEvent) =>
+      this._callback.next(data));
+    this._connection.on('jobProgress', (data: JobProgressEvent) =>
+      this._jobProgress.next(data));
+    this._connection.on('reportProgress', (data: ReportProgressEvent) =>
+      this._reportProgress.next(data));
+    this._connection.on('configurationChange', () =>
+      this._configurationChange.next());
+    this._connection.onclose(() =>
+      this._state.next(HubConnectionState.Disconnected)
+    );
+    this._connection.onreconnected(() =>
+      this._state.next(HubConnectionState.Connected)
+    );
+  }
+
+  get state(): HubConnectionState {
+    return this._connection.state;
+  }
+  get connectionId(): string {
+    if (this._connection.state === HubConnectionState.Connected)
+      return this._connection.connectionId;
+    return null;
+  }
+  public async start() {
+    await this._connection.start();
+    this._state.next(HubConnectionState.Connected);
+  }
+  public async stop() {
+    await this._connection.stop();
+    this._state.next(HubConnectionState.Disconnected);
+  }
+}
+export interface NewMailEvent {
+  userId: string;
+  model: RecipientModel<any>;
+}
+export interface MailUpdateEvent {
+  model: RecipientModel<any>;
+  userId: string;
+  time: Date;
+  originalRead?: boolean;
+}
+export interface ChatEvent {
+  contactId: string;
+  model: Chat;
+}
+export interface ChatTypingEvent {
+  contactId: string;
+}
+export interface ChatWatermarkEvent {
+  contactId: string;
+  time: Date;
+}
+export interface CommentTypingEvent {
+  id: number;
+  userId: string;
+}
+export interface EditingEvent {
+  id: number;
+  userId: string;
+}
+export interface MailDeleteEvent {
+  id: number;
+}
+export interface CommentEvent {
+  id: number;
+  model: Comment;
+}
+export interface CommentDeleteEvent {
+  id: number;
+  commentId: number;
+}
+export interface VoteEvent {
+  id: number;
+  commentId: number;
+  votes?: number;
+  userId: string;
+  vote?: number;
+}
+export interface NotificationEvent {
+  originalRead?: boolean;
+  model: Notification;
+}
+export interface UserInfoEvent {
+  userId: string;
+  mode: AvailabilityState;
+}
+export interface CallbackEvent {
+  message: any;
+}
+export interface JobProgressEvent {
+  jobId: string;
+  event: JobProgress;
+}
+export interface ReportProgressEvent {
+  name: string;
+  progress: number;
+}
+export interface JobProgress {
+  value: number;
+  file?: string;
+  message?: string;
+  buferringValue?: number;
+}

package/src/lib/core/identity/identity.component.html

@@ -0,0 +1,2 @@
+<span *ngIf="!isMe else you" class="name" [innerHTML]="name | sanitizeHtml" (click)="chat($event)"></span>
+<ng-template #you>{{'You' | translate }}</ng-template>

package/src/lib/core/identity/identity.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input, OnChanges, Inject } from '@angular/core';
+import { SessionService } from '../session.service';
+import { UserInfo } from '../models';
+import { TranslateService } from '../translate.service';
+import { AccountService } from '../account.service';
+import { BIZDOC_CONFIG, BizDocConfig, ChatSettings } from '../../core/configuration';
+import { ChatInfo } from '../../chat/chat-info';
+
+@Component({
+  selector: 'bizdoc-identity-name',
+  templateUrl: './identity.component.html'
+})
+/** identity component*/
+export class IdentityName implements OnChanges {
+  @Input() identity!: string;
+  @Input() by?: string;
+  @Input() chating?: 'none' | 'room' | 'full' = 'room';
+  isMe: boolean;
+  name: string;
+  /** identity ctor */
+  constructor(private _session: SessionService,
+    private _translate: TranslateService,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig,
+    private _chat: ChatInfo,
+    private _accounts: AccountService) {
+    if (config.chating === false) this.chating = 'none';
+  }
+  ngOnChanges(): void {
+    if (this.identity) {
+      if (this.identity === this._session.userId)
+        this.isMe = true;
+      else
+        this._accounts.get(this.identity).subscribe(u => {
+          if (this.by)
+            this._accounts.get(this.by).subscribe(b =>
+              this.name = this._translate.get('By', this._formatUserElement(u), this._formatUserElement(b)));
+          else
+            this.name = this._formatUserElement(u);
+        });
+    }
+  }
+  private _formatUserElement(person: UserInfo) {
+    if (this.chating === 'none')
+      return person.nick || person.name;
+    else
+      return this._chat.format(person);
+  }
+  /**
+   * Chat
+   * @param e
+   */
+  chat(e: MouseEvent) {
+    const userId = (e.srcElement as HTMLElement).getAttribute('data-info');
+    userId &&
+      this._chat.open(userId, { mode: this.chating as any });
+  }
+}

package/src/lib/core/info/attachment-info.service.ts

@@ -0,0 +1,46 @@
+import { Injectable, Injector } from '@angular/core';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { Directionality } from '@angular/cdk/bidi';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { AttachmentPreview, FILE_PREVIEW_DIALOG_DATA, PreviewData } from '../../compose/attachments/preview/attachment-preview.component';
+import { DocumentModel } from '../../core/models';
+import { isImage } from '../functions'; 
+
+@Injectable()
+export class AttachmentInfo {
+  static exists(contentType: string): boolean {
+    return isImage(contentType) || navigator.mimeTypes.namedItem(contentType) != null;
+  }
+  static isImage(contentType: string): boolean {
+    return isImage(contentType);
+  }
+  public static fileExt(fileName: string) {
+    return fileName.substr(fileName.lastIndexOf('.') + 1);
+  }
+  public preview<T = any>(item: DocumentModel<T>, fileId: number) {
+    const file = item.attachments.find(a => a.id === fileId);
+    const oRef = this._overlay.create({
+      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+      backdropClass: 'dark-backdrop',
+      hasBackdrop: true,
+      direction: this._dir.value
+    });
+    const injector = Injector.create([
+      {
+        provide: FILE_PREVIEW_DIALOG_DATA, useValue: {
+          file,
+          documentId: item.documentId
+        } as PreviewData
+      },
+      { provide: OverlayRef, useValue: oRef }
+    ], this._injector);
+    const portal = new ComponentPortal(AttachmentPreview, null, injector);
+    oRef.attach(portal);
+    item.viewed = new Date();
+  }
+  constructor(
+    private _overlay: Overlay,
+    private _injector: Injector,
+    private _dir: Directionality) {
+  }
+}

package/src/lib/core/info/document-info.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { RouterImpl } from '../../core/router';
+import { OpenPolicy } from '../configuration';
+
+@Injectable()
+export class DocumentInfo {
+  constructor(private _router: RouterImpl) { }
+  /**
+   * preview form
+   * @param id documentId
+   */
+  open(id: number, policy?: OpenPolicy): Promise<any> {
+    return this._router.navigate(['mailbox/d', id.encodeId()], { policy });
+  }
+}

package/src/lib/core/info/location-info.component.scss

@@ -0,0 +1,13 @@
+:host {
+  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+  animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+  min-width: 50vw;
+  min-height: 50vh;
+  display: block !important;
+}
+@media(max-width: 599px) {
+  :host {
+    width: 90vw;
+    height: 90vh
+  }
+}

package/src/lib/core/info/location-info.component.ts

@@ -0,0 +1,64 @@
+import { Component, InjectionToken, Inject, ElementRef, OnInit } from "@angular/core";
+import { OverlayRef } from "@angular/cdk/overlay";
+import { ESCAPE } from "@angular/cdk/keycodes";
+import { Observable } from "rxjs";
+import { filter } from "rxjs/operators";
+import { LatLng } from "../../core/models";
+
+export const LOCATION_DATA = new InjectionToken<Location>('location_info');
+
+const MARKER_DELAY = 500;
+
+export class MapRef {
+  constructor(private _oRef: OverlayRef) { }
+  closed(): Observable<any> {
+    return this._oRef.detachments();
+  }
+}
+@Component({
+  template: '',
+  selector: 'bizdoc-map',
+  styleUrls: ['location-info.component.scss'],
+  host: {
+    class: 'mat-elevation-z4'
+  }
+})
+export class MapComponent implements OnInit {
+  constructor(private _ref: OverlayRef, @Inject(LOCATION_DATA) private _data: Location, private _elementRef: ElementRef<HTMLDivElement>) {
+  }
+  ngOnInit(): void {
+    const { placeId, name, location, address, phone, website } = this._data;
+    const map = new google.maps.Map(this._elementRef.nativeElement, {
+      center: location,
+      zoom: 16,
+      mapTypeControlOptions: {
+        mapTypeIds: ['HYBRID']
+      }
+    });
+    const marker = new google.maps.Marker({
+      position: location,
+      animation: google.maps.Animation.DROP,
+      map: map
+    });
+    if (name) setTimeout(() => {
+      const infowindow = new google.maps.InfoWindow({
+        content: `<h4 class="mat-h3">${name}</h4>
+<br /><address>${address || ''}</address>
+<br /><a href="${website}" target="${placeId}">${website || ''}</a>
+<br /><a href="tel:${phone}" dir="ltr">${phone || ''}</a>`
+      });
+
+      infowindow.open(map, marker);
+    }, MARKER_DELAY);
+    this._ref.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE)).subscribe(() => this._ref.detach());
+    this._ref.backdropClick().pipe().subscribe(() => this._ref.detach());
+  }
+}
+export interface Location {
+  location: LatLng;
+  placeId?: string;
+  name?: string;
+  address?: string;
+  phone?: string;
+  website?: string;
+}

package/src/lib/core/info/map-info.ts

@@ -0,0 +1,33 @@
+import { Injectable, Injector } from "@angular/core";
+import { OverlayRef, Overlay } from "@angular/cdk/overlay";
+import { ComponentPortal } from "@angular/cdk/portal";
+import { Location, MapRef, LOCATION_DATA, MapComponent } from "./location-info.component";
+import { LatLng } from "../../core/models";
+
+/** helper service opens a map */
+@Injectable()
+export class MapInfo {
+  constructor(private _overlay: Overlay, private _injector: Injector) {
+  }
+  /** open map */
+  open(location: Location | LatLng): MapRef {
+    const oRef = this._overlay.create({
+      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+      hasBackdrop: true,
+      disposeOnNavigation: true,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      panelClass: 'info-panel'
+    });
+    const injector = Injector.create([{
+      provide: OverlayRef,
+      useValue: oRef
+    },
+    {
+      provide: LOCATION_DATA,
+      useValue: (location as Location).location ? location : { location }
+    }], this._injector);
+    const portal = new ComponentPortal(MapComponent, null, injector);
+    oRef.attach(portal);
+    return new MapRef(oRef);
+  }
+}