@bizdoc/core 1.8.8 → 1.8.9

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

@@ -0,0 +1,210 @@
+import { Inject, Component, OnInit, ElementRef, InjectionToken, HostListener } from '@angular/core';
+import { Overlay, OverlayRef, PositionStrategy, ConnectedPosition } from "@angular/cdk/overlay";
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { Directionality } from '@angular/cdk/bidi';
+import { ESCAPE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { GuideStep, Guide } from '../models';
+import { outOfBound } from '../functions';
+import { Router } from '@angular/router';
+import { SessionService } from '../session.service';
+
+export const TOUR_TOKEN = new InjectionToken<Guide>('guide');
+
+const BELOW: ConnectedPosition[] = [{
+  originX: 'start',
+  originY: 'bottom',
+  overlayX: 'start',
+  overlayY: 'top',
+  panelClass: ['below', 'start']
+}, {
+  originX: 'center',
+  originY: 'bottom',
+  overlayX: 'center',
+  overlayY: 'top',
+  panelClass: ['below', 'center']
+}, {
+  originX: 'end',
+  originY: 'bottom',
+  overlayX: 'end',
+  overlayY: 'top',
+  panelClass: ['below', 'end']
+}],
+  ABOVE: ConnectedPosition[] = [{
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    panelClass: ['above', 'start']
+  },
+  {
+    originX: 'center',
+    originY: 'top',
+    overlayX: 'center',
+    overlayY: 'bottom',
+    panelClass: ['above', 'center']
+  },
+  {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    panelClass: ['above', 'end']
+  }],
+  AFTER: ConnectedPosition[] = [{
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'top',
+    panelClass: ['after', 'start']
+  },
+  {
+    originX: 'end',
+    originY: 'center',
+    overlayX: 'start',
+    overlayY: 'center',
+    panelClass: ['after', 'center']
+  },
+  {
+    originX: 'end',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    panelClass: ['after', 'end']
+  }],
+  BEFORE: ConnectedPosition[] = [{
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+    panelClass: ['before', 'start']
+  }, {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'center',
+    panelClass: ['before', 'center']
+  }, {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    panelClass: ['before', 'end']
+  }];
+
+@Component({
+  templateUrl: './guide.component.html',
+  animations: [trigger('body', [
+    state('here', style({ width: '*', height: '*' })),
+    transition('*<=>*', animate('250ms', style({})))])]
+})
+export class GuideComponent implements OnInit {
+  step: GuideStep;
+  index = 0;
+  readonly count: number = this._data.steps.length;
+  working = true;
+  constructor(
+    @Inject(TOUR_TOKEN)
+    private _data: Guide,
+    private _session: SessionService,
+    private _overlay: Overlay,
+    private _ngRouter: Router,
+    private _overlayRef: OverlayRef) {
+  }
+  ngOnInit(): void {
+    this._move(0);
+  }
+  /**
+   * 
+   * @param i
+   */
+  private _move(i: 0 | 1 | -1) {
+    const index = this.index + i;
+    if (index < 0 || index == this.count) return;
+    this.working = true;
+    const step = this._data.steps[index];
+    const { selector, position, navigate, simulate } = step, promisses: Promise<any>[] = [];
+    if (navigate) {
+      const promise = this._ngRouter.navigateByUrl(navigate);
+      promisses.push(promise);
+    }
+    let positionStrategy: PositionStrategy;
+    if (selector) {
+      const element = document.querySelector(selector) as HTMLElement;
+      if (!element)
+        throw `Guide ${this._data.name} step ${this.index} selector '${selector}' not found.`;
+
+      let positions: ConnectedPosition[];
+      switch (position) {
+        case 'Above':
+          positions = [...ABOVE, ...BELOW, ...AFTER, ...BEFORE];
+          break;
+        case 'End':
+          positions = [...AFTER, ...BEFORE, ...BELOW, ...ABOVE];
+          break;
+        case 'Start':
+          positions = [...BEFORE, ...AFTER, ...BELOW, ...ABOVE];
+          break;
+        case 'Below':
+          positions = [...BELOW, ...BEFORE, ...ABOVE, ...AFTER];
+          break;
+        default:
+          positions = [...BEFORE, ...BELOW, ...ABOVE, ...AFTER];
+      }
+      positionStrategy = this._overlay.position().
+        flexibleConnectedTo(new ElementRef(element)).
+        withPositions(positions).
+        withGrowAfterOpen();
+      if (outOfBound(element)) {
+        promisses.push(new Promise<any>(resolve => {
+          const task = setInterval(() => {
+            if (!outOfBound(element)) {
+              clearInterval(task);
+              resolve(null);
+            }
+          }, 150);
+        }));
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+      simulate &&
+        promisses.push(new Promise(resolve => {
+          element.click();
+          resolve(null);
+        }));
+    }
+    else positionStrategy = this._overlay.position().global().centerVertically().centerHorizontally();
+
+    const complete = () => {
+      this.index = index;
+      this.step = step;
+      this.working = false;
+      this._overlayRef.updatePositionStrategy(positionStrategy);
+      this._overlayRef.updatePosition();
+    };
+    promisses.length ? Promise.all(promisses).then(() => complete()) : complete();
+  }
+  @HostListener('window:keydown', ['$event'])
+  keydown(evt: KeyboardEvent) {
+    if (!this.working)
+      switch (evt.keyCode) {
+        case LEFT_ARROW:
+          this._move(this._session.direction === 'ltr' ? -1 : 1);
+          break;
+        case RIGHT_ARROW:
+          this._move(this._session.direction === 'ltr' ? 1 : -1);
+          break;
+        case ESCAPE:
+          this.close();
+          evt.stopPropagation();
+          break;
+      }
+  }
+  next() {
+    this._move(1);
+  }
+  prev() {
+    this._move(-1);
+  }
+  close() {
+    this._overlayRef.detach();
+  }
+}

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

@@ -0,0 +1,98 @@
+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';
+/** */
+@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;
+    !this.seen(guide.name) && this._session.guide(guide.name).subscribe();
+    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());
+  }
+}

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,194 @@
+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 _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 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('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);
+  }
+}
+interface NewMailEvent {
+  model: RecipientModel<any>;
+}
+interface MailUpdateEvent {
+  model: RecipientModel<any>;
+  userId: string;
+  time: Date;
+  originalRead?: boolean;
+}
+interface ChatEvent {
+  contactId: string;
+  model: Chat;
+}
+interface ChatTypingEvent {
+  contactId: string;
+}
+interface ChatWatermarkEvent {
+  contactId: string;
+  time: Date;
+}
+interface CommentTypingEvent {
+  id: number;
+  userId: string;
+}
+interface MailDeleteEvent {
+  id: number;
+}
+interface CommentEvent {
+  id: number;
+  model: Comment;
+}
+interface CommentDeleteEvent {
+  id: number;
+  commentId: number;
+}
+interface VoteEvent {
+  id: number;
+  commentId: number;
+  votes?: number;
+  userId: string;
+  vote?: number;
+}
+interface NotificationEvent {
+  originalRead?: boolean;
+  model: Notification;
+}
+interface UserInfoEvent {
+  userId: string;
+  mode: AvailabilityState;
+}
+interface CallbackEvent {
+  function: string;
+  arguments: any[];
+}
+interface JobProgressEvent {
+  jobId: string;
+  event: JobProgress;
+}
+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,49 @@
+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, IMAGE_TYPE, PreviewData } from '../../compose/attachments/preview/attachment-preview.component';
+import { DocumentModel } from '../../core/models';
+ 
+
+@Injectable()
+export class AttachmentInfo {
+  static exists(contentType: string): boolean {
+    return this.isImage(contentType) || navigator.mimeTypes.namedItem(contentType) != null;
+  }
+  static isImage(contentType: string): boolean {
+    return IMAGE_TYPE.indexOf(contentType) > -1;
+  }
+  static formatUrl(documentId: number, fileId: number) {
+    return `/api/mailbox/download/${documentId}?fileId=${fileId}`;
+  }
+  public ext(file: string) {
+    return file.substr(file.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) {
+  }
+}