@bizdoc/core 1.14.5 → 1.14.9

package/src/lib/compose/attachments/attachments.component.ts

@@ -0,0 +1,114 @@
+import { Component, Input, Injector, ViewContainerRef, OnChanges } from '@angular/core';
+import { DocumentModel, Attachment, RecipientModel } from '../../core/models';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { AttachmentPreview, FILE_PREVIEW_DIALOG_DATA, PreviewData } from './preview/attachment-preview.component';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { PromptService } from '../../core/prompt.service';
+import { AttachmentExtra, MailboxService } from '../../core/mailbox.service';
+import { SessionService } from '../../core/session.service';
+import { Directionality } from '@angular/cdk/bidi';
+import { AttachmentInfo } from '../../core/info/attachment-info.service';
+
+@Component({
+  selector: 'bizdoc-attachments',
+  templateUrl: './attachments.component.html',
+  styleUrls: ['./attachments.component.scss']
+})
+/** mail-attachments component*/
+export class AttachmentsComponent implements OnChanges {
+  @Input() model!: RecipientModel<any> | DocumentModel<any>;
+  @Input() viewedIndicator = true;
+  @Input() includeDeleted = false;
+  attachments: Attachment[];
+  /** mail-attachments ctor */
+  constructor(private _mailbox: MailboxService,
+    private _session: SessionService,
+    private _vc: ViewContainerRef,
+    private _sb: PromptService,
+    private _overlay: Overlay,
+    private _injector: Injector,
+    private _dir: Directionality) {
+  }
+  public ngOnChanges(): void {
+    const distinct: Attachment[] = [];
+    const attachments = this.model.attachments.sort((a1, a0) => a1.time > a0.time ? 1 : -1);
+    for (const attachment of attachments) {
+      if ((!attachment.deleted || this.includeDeleted) &&
+        !attachment.private &&
+        !distinct.find(a => a.fileName === attachment.fileName)) {
+        let log = this.model.log.filter(l => l.fileId == attachment.id && l.userId == this._session.userId),
+          download = log.find(l => l.type === 'Download'),
+          checkedOut = log.find(l=> l.type === 'CheckOut');
+        if (download) (attachment as AttachmentExtra).viewed = download.time;
+        if (checkedOut) (attachment as AttachmentExtra).checkedOut = true;
+        distinct.push(attachment);
+      }
+    }
+    this.attachments = distinct;
+  }
+  hasVersion(item: Attachment): boolean {
+    return this.model.attachments.find(a => a.fileName === item.fileName && a != item) != null;
+  }
+  getVersions(item: Attachment): Attachment[] {
+    return this.model.attachments.filter(a => a.fileName === item.fileName && a != item);
+  }
+  download(item: Attachment) {
+    //this._mailbox.download(this.model.documentId, item.id).subscribe(data => {
+    //const blob = new Blob([data], { type: item.contentType });
+    //if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE
+    //  window.navigator.msSaveBlob(blob, item.fileName);
+    //} else {
+    //const url = window.URL.createObjectURL(blob);
+    //const pwa = window.open(url);
+    //if (!pwa || pwa.closed || typeof pwa.closed === 'undefined')
+    //}
+    //});
+    location.href = this._mailbox.formatDownloadUrl(this.model.documentId, item.id);
+    (item as AttachmentExtra).viewed = new Date();
+  }
+  previewOrDownload(item: Attachment) {
+    if (this.canPreview(item))
+      this.preview(item);
+    else
+      this.download(item);
+  }
+  canPreview(item: Attachment): boolean {
+    return AttachmentInfo.exists(item.contentType);
+  }
+  canDelete(item: Attachment): boolean {
+    return !this.model.completed && item.userId === this._session.profile.userId && !item.deleted;
+  }
+  preview(item: Attachment) {
+    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: item, documentId: this.model.documentId } as PreviewData },
+      { provide: OverlayRef, useValue: oRef }
+    ], this._injector);
+    const portal = new ComponentPortal(AttachmentPreview, this._vc, injector);
+    oRef.attach(portal);
+    (item as AttachmentExtra).viewed = new Date();
+  }
+  cancel(item: Attachment) {
+    this.model.attachments.remove(item);
+    this.ngOnChanges();
+  }
+  discard(item: Attachment) {
+    const task = () =>
+      this._mailbox.removeattachment((this.model as RecipientModel<any>).id, item.id).subscribe(() => {
+        //item.deleted = true;
+        this.model.attachments.remove(item);
+        this.ngOnChanges();
+      }, () =>
+        this._sb.error());
+    if (this.model.draft)
+      task();
+    else
+      this._sb.ask('DeleteFileAsk', 'DeleteFile', { color: 'warn' }).subscribe(ok =>
+        ok && task());
+  }
+}

package/src/lib/compose/attachments/preview/attachment-preview.component.html

@@ -0,0 +1,17 @@
+<div class="overlay-content" [@slideContent]="animationState" (@slideContent.start)="onAnimationStart($event)"
+     [dir]="dir" (@slideContent.done)="onAnimationDone($event)">
+  <div class="toolbar-wrapper" fxLayout="row" [@slideDown]="slideDown" *ngIf="!loading">
+    <button mat-icon-button (click)="close()" bizdocTooltip="{{'Back' | translate}}"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+    <span class="mat-body-1">{{data.file.fileName}}</span>
+    <span class="divider"></span>
+    <button mat-icon-button (click)="rotate()" bizdocTooltip="{{'Rotate' | translate }}"><mat-icon>screen_rotation</mat-icon></button>
+    <button mat-icon-button (click)="download()" bizdocTooltip="{{'Download' | translate}}"><mat-icon>save_alt</mat-icon></button>
+  </div>
+  <div class="spinner-wrapper" *ngIf="loading">
+    <mat-spinner></mat-spinner>
+  </div>
+  <object (load)="onLoad($event)" [data]="objectData" [type]="data.file.contentType" *ngIf="!isImage" #obj width="250"
+          height="200">
+  </object>
+  <img *ngIf="isImage" (load)="onLoad($event)" [style.opacity]="loading ? 0 : 1" [@fade]="loading ? 'fadeOut' : 'fadeIn'" [src]="objectData" #img>
+</div>

package/src/lib/compose/attachments/preview/attachment-preview.component.scss

@@ -0,0 +1,36 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/*:host ::ng-deep .fullscreen-panel {
+  width: 100%;
+  height: 100%;
+}*/
+
+.spinner-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+}
+
+img {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+}
+.overlay-content {
+  padding: 1em;
+
+  .toolbar-wrapper {
+    align-items: center;
+    color: whitesmoke
+  }
+}
+
+.divider {
+  flex: 1 1 auto
+}

package/src/lib/compose/attachments/preview/attachment-preview.component.ts

@@ -0,0 +1,140 @@
+import { Component, InjectionToken, Inject, HostListener, EventEmitter, OnInit, ViewChild, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { Attachment } from '../../../core/models';
+import { trigger, state, transition, style, animate, AnimationEvent } from '@angular/animations';
+import { take, filter } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { Directionality, Direction } from '@angular/cdk/bidi';
+import { isImage } from '../../../core/functions';
+import { MailboxService } from '../../../core/mailbox.service';
+
+export const FILE_PREVIEW_DIALOG_DATA = new InjectionToken<PreviewData>('FILE_PREVIEW_DIALOG_DATA');
+
+const ANIMATION_TIMINGS = '400ms cubic-bezier(0.25, 0.8, 0.25, 1)';
+
+@Component({
+  selector: 'bizdoc-attachment-preview',
+  templateUrl: './attachment-preview.component.html',
+  styleUrls: ['./attachment-preview.component.scss'],
+  animations: [
+    trigger('fade', [
+      state('fadeOut', style({ opacity: 0 })),
+      state('fadeIn', style({ opacity: 1 })),
+      transition('* => fadeIn', animate(ANIMATION_TIMINGS))
+    ]),
+    trigger('slideDown', [
+      state('void', style({ transform: 'translateY(-100%)' })),
+      state('enter', style({ transform: 'translateY(0)' })),
+      state('leave', style({ transform: 'translateY(-100%)' })),
+      transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
+    ]),
+    trigger('slideContent', [
+      state('void', style({ transform: 'translate3d(0, 25%, 0) scale(0.9)', opacity: 0 })),
+      state('enter', style({ transform: 'none', opacity: 1 })),
+      state('leave', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
+      transition('* => *', animate(ANIMATION_TIMINGS)),
+    ])
+  ]
+})
+/** attachment-preview component*/
+export class AttachmentPreview implements OnInit, AfterViewInit {
+  @ViewChild('obj', { static: false }) obj: ElementRef;
+  @ViewChild('img', { static: true }) img: ElementRef;
+  objectData: SafeUrl;
+  loading = true;
+  dir: Direction;
+  isImage: boolean;
+  animationState: 'void' | 'enter' | 'leave' = 'enter';
+  slideDown: 'enter' | 'leave' | 'void' = 'enter';
+  readonly animationStateChanged = new EventEmitter<AnimationEvent>();
+  private _deg = 0;
+  private readonly _beforeClose = new Subject<void>();
+  private readonly _afterClosed = new Subject<void>();
+  /** attachment-preview ctor */
+  constructor(_directionality: Directionality,
+    private _renderer: Renderer2, @Inject(FILE_PREVIEW_DIALOG_DATA) public data: PreviewData,
+    sanitizer: DomSanitizer,
+    private _service: MailboxService,
+    private _overlayRef: OverlayRef) {
+    this.dir = _directionality.value;
+    this.isImage = isImage(this.data.file.contentType);
+    this.objectData = sanitizer.bypassSecurityTrustResourceUrl(this._url(true));
+    this.beforeClose().subscribe(() => this.slideDown = 'leave');
+  }
+  @HostListener('document:resize', [])
+  resize() {
+    if (!this.isImage) {
+      this._renderer.setStyle(this.obj.nativeElement, 'min-width', `${window.innerWidth}px`);
+      this._renderer.setStyle(this.obj.nativeElement, 'min-height', `${window.innerHeight}px`)
+    }
+  }
+  ngOnInit(): void {
+    this._overlayRef.backdropClick().subscribe(() => this.close());
+  }
+  ngAfterViewInit(): void {
+    this.resize();
+  }
+  download() {
+    location.assign(this._url());
+  }
+  private _url(inline?: boolean): string {
+    return this._service.formatDownloadUrl(this.data.documentId, this.data.file.id, inline);
+  }
+
+  rotate() {
+    const elem = (this.isImage ? this.img : this.obj).nativeElement;
+    this._deg = this._deg === 270 ? 0 : this._deg + 90;
+    elem.style.transform = `rotate(${this._deg}deg)`;
+  }
+  onLoad(_evt: Event) {
+    this.loading = false;
+  }
+  afterClosed(): Observable<void> {
+    return this._afterClosed.asObservable();
+  }
+
+  beforeClose(): Observable<void> {
+    return this._beforeClose.asObservable();
+  }
+  @HostListener('document:keydown.escape', [])
+  close(): void {
+    // Listen for animation 'start' events
+    this.animationStateChanged.pipe(
+      filter(event => event.phaseName === 'start'),
+      take(1)
+    ).subscribe(() => {
+      this._beforeClose.next();
+      this._beforeClose.complete();
+      this._overlayRef.detachBackdrop();
+    });
+
+    // Listen for animation 'done' events
+    this.animationStateChanged.pipe(
+      filter(event => event.phaseName === 'done' && event.toState === 'leave'),
+      take(1)
+    ).subscribe(() => {
+      this._overlayRef.dispose();
+      this._afterClosed.next();
+      this._afterClosed.complete();
+    });
+
+    // Start exit animation
+    this.startExitAnimation();
+  }
+  onAnimationStart(event: AnimationEvent) {
+    this.animationStateChanged.emit(event);
+  }
+
+  onAnimationDone(event: AnimationEvent) {
+    this.animationStateChanged.emit(event);
+  }
+
+  private startExitAnimation() {
+    this.animationState = 'leave';
+  }
+}
+export interface PreviewData {
+  documentId: number;
+  file: Attachment;
+}

package/src/lib/compose/attachments/progress-button.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, ElementRef, Input, Renderer2, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core';
+
+@Directive({ selector: '[progressIndicator]' })
+export class ProgressDirective implements AfterViewInit, OnChanges {
+  @Input() progressIndicator: number;
+  private _progressDiv: HTMLDivElement;
+  constructor(elementRef: ElementRef, private renderer: Renderer2) {
+    const elem = (elementRef.nativeElement as HTMLElement);
+    this._progressDiv = document.createElement('div');
+    renderer.addClass(elem, 'progress');
+    renderer.appendChild(elem, this._progressDiv);
+  }
+  ngAfterViewInit(): void {
+  }
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.renderer.setStyle(this._progressDiv, 'width', `${this.progressIndicator}%`);
+  }
+}

package/src/lib/compose/can-deactivate-changes.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { ComposeComponent } from './compose.mobile.component';
+import { Observable, of } from 'rxjs';
+import { PromptService } from '../core/prompt.service';
+import { switchMap } from 'rxjs/operators';
+
+@Injectable()
+export class CanDeactivateCompose implements CanDeactivate<ComposeComponent> {
+  constructor(private _sb: PromptService) {
+  }
+  canDeactivate(component: ComposeComponent, _currentRoute: ActivatedRouteSnapshot, _currentState: RouterStateSnapshot, _nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    if (component.form.dirty)
+      return this._sb.ask('SaveChangesAsk', 'SaveChanges', { i18n: true, color: 'primary', ok: 'Save', cancel: 'Ignore' }).pipe(switchMap(ok => {
+        if (ok)
+          return component.form.save();
+        else
+          return of(true);
+      }));
+    else return true;
+  }
+}

package/src/lib/compose/comments/_comments-theme.scss

@@ -0,0 +1,82 @@
+@mixin comments-theme($theme) {
+  $primary: mat.get-color-from-palette($theme, primary);
+  $accent: mat.get-color-from-palette($theme, accent);
+  $warn: mat.get-color-from-palette($theme, warn);
+  $background: mat.get-color-from-palette($theme, background);
+  $foreground: mat.get-color-from-palette($theme, foreground);
+  $is-dark-theme: mat.get-color-from-palette($theme, is-dark);
+
+  .comment {
+    display: flex;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+
+    .comment-body {
+      flex: 1 1 0%;
+      margin: 8px 0;
+
+      .comment-text {
+      }
+
+      img {
+        max-width: 350px;
+        cursor: zoom-in
+      }
+    }
+
+
+    .tool {
+      opacity: 0
+    }
+
+    &:hover .tool {
+      opacity: 1
+    }
+
+    .modification {
+      font-variant: all-small-caps;
+    }
+
+    .comment-actions {
+      place-content: flex-end;
+      align-items: flex-end;
+      flex-direction: row;
+      align-self: flex-end;
+      box-sizing: border-box;
+      display: flex;
+      flex: 1;
+
+      .mat-icon-button {
+        line-height: 22px;
+        width: 22px;
+        height: 22px;
+
+        .mat-icon {
+          font-size: 13px;
+        }
+      }
+    }
+  }
+
+  .comment-score {
+    font-size: small;
+    align-self: center;
+    padding: 3px;
+    color:  mat.get-color-from-palette($primary, 700);
+    /*border: 1px solid  mat.get-color-from-palette($primary, 700);
+    border-radius: 10px 10px;*/
+    &.score-negative {
+      color:  mat.get-color-from-palette($warn, 700);
+      /*border-color:  mat.get-color-from-palette($warn, 700);*/
+    }
+  }
+
+  .voted-true {
+    color:  mat.get-color-from-palette($primary, 700)
+  }
+
+  .voted-false {
+    color:  mat.get-color-from-palette($warn, 700)
+  }
+}

package/src/lib/compose/comments/comment.component.html

@@ -0,0 +1,36 @@
+<div class="row">
+  <div class="comment-body" #body>
+    <div [innerHTML]="item.text|taggingHtml:item.resource" class="comment-text"></div>
+    <img *ngIf="item.image" [src]="'data:image/png;base64,'+item.image" alt="" (click)="preview()" />
+  </div>
+  <button mat-icon-button *ngIf="me" [matMenuTriggerFor]="menu" class="tool" (click)="$event.stopPropagation()"><mat-icon>more_vert</mat-icon></button>
+  <mat-menu #menu>
+    <ng-template matMenuContent>
+      <button mat-menu-item (click)="edit()">{{'Edit'|translate}}</button>
+      <mat-divider></mat-divider>
+      <button mat-menu-item (click)="delete()">{{'Delete'|translate}}</button>
+    </ng-template>
+  </mat-menu>
+</div>
+<div class="row">
+  <div class="column">
+    <span [innerHTML]="name | sanitizeHtml" (click)="chat($event)"></span>
+    <div>
+      <small fxFlex bizdocTooltip="{{item.edited || item.time | amCalendar }}">{{item.edited || item.time | amTimeAgo}}</small>
+      <ng-container *ngIf="item.edited">
+        &nbsp;<a (click)="edits()" class="modification">{{'Edited'| translate}}</a>
+      </ng-container>
+      <ng-container *ngIf="!me">
+        &nbsp;<a (click)="reply.emit()" class="modification">{{'Reply'| translate}}</a>
+      </ng-container>
+    </div>
+  </div>
+  <div class="comment-actions" *ngIf="voting">
+    <a *ngIf="item.votes > 0 || item.votes < 0" [class.score-negative]="item.votes < 0" class="comment-score" dir="ltr" (click)="votes()" [bizdocTooltip]="'Votes'|translate">{{item.votes}}</a>
+    <button mat-icon-button (click)="vote(1, $event)" [class.voted-true]="item.voted===1" ><mat-icon>thumb_up_alt</mat-icon></button>
+    <button mat-icon-button (click)="vote(-1, $event)" [class.voted-false]="item.voted===-1" ><mat-icon>thumb_down_alt</mat-icon></button>
+  </div>
+</div>
+<ng-template #previewTemplate>
+  <img [src]="'data:image/png;base64,'+item.image" alt="" />
+</ng-template>

package/src/lib/compose/comments/comment.component.ts

@@ -0,0 +1,160 @@
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, Inject, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import { forkJoin, merge, Observable, of } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { BizDocConfig, BIZDOC_CONFIG } from '../../core/configuration';
+import { Comment, DocumentModel, UserInfo } from '../../core/models';
+import { PromptService } from '../../core/prompt.service';
+import { MailboxService } from '../../core/mailbox.service';
+import { SessionService } from '../../core/session.service';
+import { TranslateService } from '../../core/translate.service';
+import { Popup } from "../../core/popup/popup.service";
+import { CommentData, EditCommentComponent } from './edit-comment.component';
+import { CommentEditsComponent, CommentVersionData } from './edits.component';
+import { CommentVoteData, CommentLikesComponent } from './votes.component';
+import { AccountService } from '../../core/account.service';
+import { ChatInfo } from '../../chat/chat-info';
+
+@Component({
+  selector: 'bizdoc-comment',
+  templateUrl: './comment.component.html',
+  host: {
+    class: 'comment'
+  }
+})
+/** comment component*/
+export class CommentComponent implements OnInit {
+  @Input() model!: DocumentModel<any>;
+  @Input() item!: Comment;
+  voting: boolean;
+  @Output() readonly deleted = new EventEmitter();
+  @Output() readonly reply = new EventEmitter();
+  @ViewChild('body') bodyElement: ElementRef<HTMLTextAreaElement>;
+  @ViewChild('previewTemplate') previewTemplate: TemplateRef<any>;
+  name: string = '';
+  me: boolean;
+  constructor(
+    private _session: SessionService,
+    private _ps: PromptService,
+    private _translate: TranslateService,
+    private _chat: ChatInfo,
+    private _accounts: AccountService,
+    private _popup: Popup,
+    private _overlay: Overlay,
+    private _mailbox: MailboxService,
+    private _vc: ViewContainerRef,
+    @Inject(BIZDOC_CONFIG) private _config: BizDocConfig) {
+    this.voting = !_config.comments || _config.comments.voting !== false;
+  }
+  ngOnInit(): void {
+    const me = this._session.userId, you = of('you');
+    this.me = (this.item.byId || this.item.userId) === me;
+    const whos: [Observable<any>] = [this.item.userId === me ? you : this._accounts.get(this.item.userId)];
+    if (this.item.byId)
+      whos.push(this.item.byId === me ? you : this._accounts.get(this.item.byId));
+    if (this.item.parentId) {
+      const parent = this.model.comments.find(c => c.id == this.item.parentId), who = parent.byId || parent.userId;
+      whos.push(who == me ? you : this._accounts.get(who));
+    }
+    forkJoin(whos).subscribe(this._name.bind(this));
+  }
+  private _name(us: Observable<UserInfo | 'you'>) {
+    if (us[0] === 'you')
+      this.name = this._translate.get('You');
+    else
+      this.name = this._formatUserElement(us[0] as UserInfo);
+    if (this.item.byId) {
+      if (us[1] === 'you')
+        this.name = this._translate.get('ByYou', this.name);
+      else
+        this.name = this._translate.get('By', this.name, this._formatUserElement(us[1] as UserInfo));
+    }
+    if (this.item.parentId) {
+      const who = us[2] || us[1];
+      if (who === 'you')
+        this.name = this._translate.get('ReplyingToYou', this.name);
+      else if (us[0] === 'you')
+        this.name = this._translate.get('YouRepliedTo', this._formatUserElement(who as UserInfo));
+      else
+        this.name = this._translate.get('ReplyingTo', this.name, this._formatUserElement(who as UserInfo));
+    }
+  }
+  private _formatUserElement(person: UserInfo) {
+    if (this._config.chating !== false)
+      return this._chat.format(person);
+    else
+      return person.nick || person.name;
+  }
+  /**
+   * Chat
+   * @param e
+   */
+  chat(e: MouseEvent) {
+    const userId = (e.srcElement as HTMLElement).getAttribute('data-info');
+    userId &&
+      this._chat.open(userId);
+  }
+  vote(value: number, event: MouseEvent) {
+    value = this.item.voted !== value ? value : 0;
+    this._mailbox.vote(this.model.documentId, this.item.id, value).subscribe(() => {
+      if (this.item.votes === undefined)
+        this.item.votes = value;
+      else if (value === 0)
+        this.item.votes -= this.item.voted;
+      else
+        this.item.votes += value - (this.item.voted || 0);
+      if (this.item.votes === 0) this.item.votes = undefined;
+      this.item.voted = value !== 0 ? value : undefined;
+    });
+    event.stopPropagation();
+  }
+  edit() {
+    const { id, text, resource, image } = this.item;
+    this._open(EditCommentComponent, {
+      id, text, resource, image,
+      documentId: this.model.documentId
+    } as CommentData).closed.subscribe(c => {
+      c &&
+        Object.assign(this.item, { image: null, text: null }, c)
+    });
+  }
+  private _open(component, data) {
+    return this._popup.open(component, this.bodyElement, { position: 'start', data });
+  }
+  delete() {
+    this._ps.ask('DeleteCommentAsk', null, {
+      ok: 'Delete',
+      color: 'warn'
+    }).subscribe(ok => {
+      ok && this._mailbox.removecomment(this.item.id).subscribe(() => {
+        this.item.deleted = true;
+        this.deleted.emit();
+      }, () => this._ps.error());
+    })
+  }
+  edits() {
+    this._open(CommentEditsComponent, {
+      id: this.item.id,
+      byId: this.item.byId,
+      resource: this.item.resource,
+      documentId: this.model.documentId
+    } as CommentVersionData);
+  }
+  preview() {
+    const oRef = this._overlay.create({
+      hasBackdrop: true,
+      disposeOnNavigation: true,
+      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+    });
+    oRef.attach(new TemplatePortal(this.previewTemplate, this._vc));
+    merge(oRef.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE)), oRef.backdropClick()).subscribe(() => oRef.detach());
+  }
+  votes() {
+    this._open(CommentLikesComponent, {
+      id: this.item.id,
+      documentId: this.model.documentId
+    } as CommentVoteData);
+  }
+}

package/src/lib/compose/comments/comments.component.html

@@ -0,0 +1,27 @@
+<bizdoc-none *ngIf="!model.comments.length" icon="format_quote"></bizdoc-none>
+
+<div fxLayout="column" #thread (scroll)="onScroll($event)" class="comments-thread">
+  <ng-container role="listitem" *ngFor="let c of model.comments; trackBy: trackBy">
+    <bizdoc-comment *ngIf="!c.deleted || showDeleted; else deletedMsg"
+                    [model]="model"
+                    [item]="c"
+                    (reply)="reply(c)"
+                    (deleted)="deleted(c)">
+    </bizdoc-comment>
+  </ng-container>
+</div>
+
+<div class="comments-typing" [style.visibility]="typing ? 'visible': 'hidden'">{{'Typing' | translate : typing}}</div>
+
+<div class="comments-reply" *ngIf="replyName">
+  <span [innerHTML]="replyName | sanitizeHtml" (click)="chat($event)"></span>
+  &nbsp; <a class="modification" (click)="clearReply()">{{'Cancel'|translate}}</a>
+</div>
+
+<bizdoc-edit-text (ok)="post($event)" (change)="_textChange.next()"
+                  [disabled]="sending" (focus)="onFocus()" (blur)="onBlur()">
+</bizdoc-edit-text>
+
+<ng-template #deletedMsg>
+  <a (click)="showDeleted = true" class="comment-deleted">{{'Deleted' | translate}}</a>
+</ng-template>