@bizdoc/core 1.13.11 → 1.13.12

package/src/lib/compose/action/action.pane.dialog.html

@@ -0,0 +1,12 @@
+<h2 mat-dialog-title>{{action.title}}</h2>
+<mat-dialog-content>
+  <p *ngIf="!action.arguments.length">
+    {{ 'ActionAsk' | translate : (action.verb || action.title).toLowerCase() }}
+  </p>
+  <ng-container #container>
+  </ng-container>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button type="submit" [disabled]="!valid" (click)="ok()" color="primary">{{'Yes'|translate}}</button>
+  <button mat-button (click)='close()'>{{'No' | translate}}</button>
+</mat-dialog-actions>

package/src/lib/compose/action/assign-action.component.html

@@ -0,0 +1,35 @@
+<form autocomplete="off" fxLayout="column" [formGroup]="form">
+  <mat-form-field>
+    <mat-chip-list #chipList [attr.aria-label]="'AssignTo'|translate">
+      <mat-chip *ngFor="let u of form.value.userIds"
+                [selectable]="true"
+                [removable]="true"
+                (removed)="removed(u)">
+        {{u | userName | async }}
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+      <input required [placeholder]="'AssignTo'|translate"
+             [formControl]=userIds
+             cdkFocusInitial 
+             #nameInput
+             [matAutocomplete]="auto"
+             [matChipInputFor]="chipList"
+             [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
+    </mat-chip-list>
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="userSelected(nameInput, $event)">
+      <mat-option *ngFor="let u of users$ | async" [value]="u.id">
+        {{u.name}}
+        <span *ngIf="u.email">&nbsp; - {{u.email}}</span>
+      </mat-option>
+    </mat-autocomplete>
+    <mat-error *ngIf="form.controls.userIds.hasError('required')">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>
+  </mat-form-field>
+  <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>
+  <!--<mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>-->
+  <mat-form-field>
+    <textarea matInput cdkTextareaAutosize formControlName="note" [placeholder]="'Note'|translate" maxlength="200">
+    </textarea>
+    <mat-hint align="end">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>
+    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>
+  </mat-form-field>
+</form>

package/src/lib/compose/action/assign-action.component.ts

@@ -0,0 +1,77 @@
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { debounceTime, Observable, Subject } from 'rxjs';
+import { takeUntil, filter, map, switchMap } from 'rxjs/operators';
+import { isString } from '../../core/functions';
+import { BizDoc } from '../../core/decorators';
+import { UserInfo } from '../../core/models';
+import { ArgumentsComponent } from '../../core/base';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+
+@Component({
+  templateUrl: './assign-action.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-action-assign'
+})
+export class AssignActionComponent implements ArgumentsComponent, OnInit, OnDestroy {
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+  @ViewChild('nameInput', { static: true, read: ElementRef }) nameInput: ElementRef<HTMLInputElement>;
+  readonly form = this._fb.group({
+    userIds: this._fb.control(null, Validators.required),
+    fyi: this._fb.control(false),
+    roundtrip: this._fb.control(false),
+    note: this._fb.control(null, Validators.maxLength(200))
+  });
+  readonly userIds = this._fb.control([]);
+  users$: Observable<UserInfo[]>;
+  private _destroy = new Subject<void>();
+  constructor(private _fb: FormBuilder, private _session: SessionService, private _accounts: AccountService) {
+  }
+  ngOnInit(): void {
+    const me = this._session.userId;
+    this.users$ = this.userIds.valueChanges.
+      pipe(
+        debounceTime(200),
+        takeUntil(this._destroy),
+        switchMap(v =>
+          this._accounts.findAll(v, { take: 20 }).
+            pipe(map(r =>
+              r.filter(u => u.id !== me)))));
+  }
+  /**
+   *
+   * @param inp
+   * @param event
+   */
+  userSelected(inp: HTMLInputElement, event: MatAutocompleteSelectedEvent): void {
+    const userIds = this.form.controls['userIds'].value as string[] || [];
+    userIds.push(event.option.value);
+    this.form.controls['userIds'].setValue(userIds);
+    inp.value = '';
+  }
+  /**
+   *
+   * @param id
+   */
+  removed(id: string): void {
+    const userIds = this.form.controls['userIds'].value as string[];
+
+    const index = userIds.indexOf(id);
+
+    if (userIds.length > 1) {
+      index >= 0 &&
+        userIds.splice(index, 1);
+
+      this.form.updateValueAndValidity();
+    }
+    else 
+      this.form.controls['userIds'].setValue(null);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+  }
+}

package/src/lib/compose/action/return-action.component.html

@@ -0,0 +1,13 @@
+<form autocomplete="off" fxLayout="column" [formGroup]="form">
+  <mat-form-field>
+    <mat-select formControlName="recipientId" cdkFocusInitial [placeholder]="'User'|translate" required>
+      <mat-option *ngFor="let r of recipients" [value]="r.id">{{r.userId | userName | async }}</mat-option>
+    </mat-select>
+    <mat-error *ngIf="form.controls.recipientId.hasError('required')">{{'Required'|translate:('User'|translate)}}</mat-error>
+  </mat-form-field>
+  <mat-form-field>
+    <textarea matInput cdkTextareaAutosize formControlName="note" [placeholder]="'Note'|translate" maxlength="200">
+    </textarea>
+    <mat-hint align="end">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>
+  </mat-form-field>
+</form>

package/src/lib/compose/action/return-action.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { BizDoc } from '../../core/decorators';
+import { ArgumentsComponent } from '../../core/base';
+import { Recipient } from '../../core/models';
+import { ActionRef } from './action-ref';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+import { OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: './return-action.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-action-return'
+})
+export class ReturnActionComponent implements ArgumentsComponent, OnInit {
+  readonly recipients: Recipient[] = [];
+  constructor(private _fb: FormBuilder, actionRef: ActionRef, session: SessionService, accounts: AccountService) {
+    actionRef.item.recipients.slice(1).
+      filter(r => r.userId !== session.profile.userId && !r.estimate && !r.pending
+        && r.received >= actionRef.item.issued).
+      reverse().forEach(r =>
+        this.recipients.findIndex(i => i.userId === r.userId) < 0 &&
+        this.recipients.push(r)
+      );
+  }
+  ngOnInit(): void {
+    if (this.recipients.length === 1) {
+      this.form.patchValue({ recipientId: this.recipients[0].id });
+      this.form.updateValueAndValidity();
+    }
+  }
+  readonly form = this._fb.group({
+    recipientId: this._fb.control(null, Validators.required),
+    note: null
+  });
+}

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

@@ -0,0 +1,23 @@
+<div *ngFor="let a of attachments">
+  <button mat-button class="attachment-link" [matMenuTriggerFor]="attachment" [bizdocTooltip]="a.time | amCalendar" [progressIndicator]="a.progress">
+    <mat-icon *ngIf="viewedIndicator && a.viewed">done_all</mat-icon>
+    <!--[bizdocTooltip]="a.viewed | amCalendar"-->
+    <mat-icon>attachment</mat-icon>&nbsp;
+    <span [class.deleted]="a.deleted" [class.failed]="a.failed">{{a.fileName}}</span>
+  </button>
+  <mat-menu #attachment>
+    <ng-container *ngIf="!a.failed">
+      <button mat-menu-item (click)="download(a)">{{"Download" | translate}}</button>
+      <button mat-menu-item *ngIf="canPreview(a)" (click)="preview(a)"><mat-icon>landscape</mat-icon> {{"Preview" | translate}}</button>
+      <ng-container *ngIf="hasVersion(a)">
+        <mat-divider></mat-divider>
+        <button mat-menu-item *ngFor="let v of getVersions(a)" (click)="previewOrDownload(v)">{{v.time |  amCalendar}}</button>
+      </ng-container>
+      <ng-container *ngIf="canDelete(a)">
+        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="discard(a)">{{"Discard" | translate}}</button>
+      </ng-container>
+    </ng-container>
+    <button mat-menu-item (click)="cancel(a)" *ngIf="a.failed">{{"Cancel" | translate}}</button>
+  </mat-menu>
+</div>

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

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  flex-flow: wrap;
+}
+.attachment-link {
+
+  &.failed {
+    color: red
+  }
+
+  .loading {
+  }
+  .deleted {
+    text-decoration:line-through
+  }
+}
+::ng-deep button .progress {
+  background-color: dimgray;
+  position: absolute;
+  height: 100%;
+}

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,15 @@
+<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></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());
+    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(): string {
+    return this._service.formatDownloadUrl(this.data.documentId, this.data.file.id);
+  }
+
+  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(true);
+        else
+          return of(true);
+      }));
+    else return true;
+  }
+}

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

@@ -0,0 +1,82 @@
+@mixin comments-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($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)
+  }
+}