@bizdoc/core 1.13.0-next.4 → 1.13.0-next.8

package/fesm2015/bizdoc-core.mjs

@@ -1566,20 +1566,43 @@ function isHttpProgressEvent(event) {
 }
 function calculateState(upload, event) {
     if (isHttpProgressEvent(event)) {
-        return {
+        return new UploadEvent({
             progress: event.total
                 ? Math.round((100 * event.loaded) / event.total)
                 : upload.progress,
             state: 'progress',
-        };
+        });
     }
     if (isHttpResponse(event)) {
-        return {
+        return new UploadEvent({
             progress: 100,
             state: 'done',
-        };
+        });
     }
     return upload;
+}
+class UploadEvent {
+    constructor(options) { }
+}
+function reportprogress(filename) {
+    return (source) => source.pipe(map(r => {
+        //if (event instanceof ProgressEvent) {
+        //  observe.next(new UploadEvent(
+        //    file.name,
+        //    (event as ProgressEvent).loaded,
+        //    (event as ProgressEvent).total
+        //  ));
+        //} else if (event instanceof HttpResponse) {
+        //  const res = event as HttpResponse<any>;
+        //  if (res.status === 200) {
+        //    const model = res.body as Attachment;
+        //    observe.next(model);
+        //  }
+        //  else
+        //    observe.error({ status: res.status, error: res.body });
+        //  observe.complete();
+        return r;
+    }));
 }
 
 class ActionRef {
@@ -2079,6 +2102,9 @@ const STRINGS = {
         YouRepliedTo: 'You replied {0}',
         ReplyingToYou: '{0} in reply to you',
         ByYou: '{0} by you',
+        ActionBy: '{0} by {1}',
+        ActionByBy: '{0} by {1} on behalf of {2}',
+        ActionByYou: '{0} by you',
         Received: 'Received',
         ChangeLanguage: 'Language',
         NewMail: 'New {0} #{1} {2}',
@@ -2350,6 +2376,7 @@ const STRINGS = {
         Votes: 'Votes',
         Tasks: 'Tasks',
         System: 'System',
+        Everything: 'Everything',
         NothingHere: 'Nothing to see here',
         Matrix: 'Matrix',
         Working: 'Working on it...'
@@ -2386,7 +2413,7 @@ const STRINGS = {
         Skipped: '- דולג',
         Route: 'חותמים',
         Trace: 'הסטוריה',
-        Log: 'הסטוריה',
+        Everything: 'הסטוריה',
         ProfilerSearchHelp: 'הקלד/י שם משתמש ובחר/י מהרשימה כדי לסקור פעולותיו.',
         TraceSearchHelp: 'הקלד/י מספר מסמך ובחר/י כדי לעקוב אחרי תנועותיו.',
         DiagramVersion: 'גרסה {0}',
@@ -2747,6 +2774,9 @@ const STRINGS = {
         YouRepliedTo: '{0}השבת ל',
         ReplyingToYou: '{0} השיב לך',
         ByYou: '{0} דרכך',
+        ActionByYou: '{0} דרכך',
+        ActionByBy: '{0} דרך {1} בשם {2}',
+        ActionBy: '{0} דרך {1}',
         EscalatedTo: 'החרפה אל {0} אחרי <em>{1}</em>',
         EscalatedFrom: 'החרפה מ-{0} אחרי <em>{1}</em>',
         EscalatedBy: '{0} הועבר אל {1}',
@@ -6919,15 +6949,15 @@ function getSecondsUntilUpdate(time) {
 
 const REFRESH_TIME = 30000, TYPING_HINT_TIME = 1500;
 class ExpandedItemComponent {
-    constructor(_sb, _chat, _accounts, _dir, _translate, _mailbox, _dialog, _session, _messaging) {
+    constructor(_sb, _chat, _accounts, _mailbox, _session, _dir, _dialog, _translate, _messaging) {
         this._sb = _sb;
         this._chat = _chat;
         this._accounts = _accounts;
-        this._dir = _dir;
-        this._translate = _translate;
         this._mailbox = _mailbox;
-        this._dialog = _dialog;
         this._session = _session;
+        this._dir = _dir;
+        this._dialog = _dialog;
+        this._translate = _translate;
         this._messaging = _messaging;
         this.sent = new EventEmitter();
         this._destroy = new Subject();
@@ -6935,22 +6965,22 @@ class ExpandedItemComponent {
     ngOnInit() {
         this._messaging.comment$.pipe(takeUntil(this._destroy)).
             subscribe(e => {
-            if (e.id === this.item.id && (e.model.byId || e.model.userId) !== this._session.userId) {
+            if (e.id === this.model.id && (e.model.byId || e.model.userId) !== this._session.userId) {
                 this._comments();
                 this._accounts.get(e.model.userId).subscribe(u => this._sb.toast('Commented', u.gender, u.name));
             }
         });
         this._messaging.update$.pipe(takeUntil(this._destroy)).subscribe(e => {
-            if (e.model.id === this.item.id) {
+            if (e.model.id === this.model.id) {
                 this._refresh();
-                (e.userId !== this._session.userId) && this._accounts.get(e.userId).subscribe(u => this._sb.toast('MailVersionUpdate', this.item.number, u.name));
+                (e.userId !== this._session.userId) && this._accounts.get(e.userId).subscribe(u => this._sb.toast('MailVersionUpdate', this.model.number, u.name));
             }
         });
         this._mailbox.changed.pipe(takeUntil(this._destroy)).subscribe(e => {
-            if (e.id === this.item.id)
+            if (e.id === this.model.id)
                 this._refresh();
         });
-        this._messaging.commentTyping$.pipe(takeUntil(this._destroy), filter$1(e => e.id === this.item.documentId)).subscribe(c => {
+        this._messaging.commentTyping$.pipe(takeUntil(this._destroy), filter$1(e => e.id === this.model.documentId)).subscribe(c => {
             this.typing = true;
             clearTimeout(this._typingTask);
             this._typingTask = setTimeout(() => this.typing = false, TYPING_HINT_TIME);
@@ -6960,27 +6990,28 @@ class ExpandedItemComponent {
     }
     _note() {
         return __awaiter(this, void 0, void 0, function* () {
-            const { ownerId, issued, substitutingId, received, replied, log, id, note, byId, action, toId, escalated } = this.item;
+            const { ownerId, issued, substitutingId, received, replied, log, id, note, byId, action, toId, escalated, originId } = this.model;
             if (substitutingId) {
-                this._accounts.get(substitutingId).subscribe(u => {
-                    if (replied) {
-                        const time = this._fromNow(replied), action = this._session.profile.actions.find(a => a.name === action), adjective = (action.adjective || action.title).toLowerCase();
-                        if (toId)
-                            this._accounts.get(toId).subscribe(t => this.note = this._translate.personalize('YouSubstituteActionTakenTo', u.gender, adjective, this._formatUserElement(t), this._formatUserElement(u), time));
-                        else
-                            this.note = this._translate.personalize('YouSubstituteActionTaken', u.gender, adjective, this._formatUserElement(u), time);
-                    }
-                    else if (escalated) {
-                        const escalations = log.filter(l => l.time > issued &&
-                            l.type === 'Escalation'
-                            && l.recipientId === id);
-                        this.note = this._translate.personalize('EscalatedFrom', u.gender, this._formatUserElement(u), this._duration(escalations[0].duration));
-                    }
-                    else {
-                        const time = this._fromNow(received);
-                        this.note = this._translate.personalize('SubstitutingNote', u.gender, this._formatUserElement(u), time, note || '');
+                const substituting = yield this._accounts.get(substitutingId).toPromise();
+                if (replied) {
+                    const time = this._fromNow(replied), action = this._session.profile.actions.find(a => a.name === action), adjective = (action.adjective || action.title).toLowerCase();
+                    if (toId) {
+                        const to = yield this._accounts.get(toId).toPromise();
+                        this.note = this._translate.personalize('YouSubstituteActionTakenTo', substituting.gender, adjective, this._formatUserElement(to), this._formatUserElement(substituting), time);
                     }
-                });
+                    else
+                        this.note = this._translate.personalize('YouSubstituteActionTaken', substituting.gender, adjective, this._formatUserElement(substituting), time);
+                }
+                else if (escalated) {
+                    const escalations = log.filter(l => l.time > issued &&
+                        l.type === 'Escalation'
+                        && l.recipientId === id);
+                    this.note = this._translate.personalize('EscalatedFrom', substituting.gender, this._formatUserElement(substituting), this._duration(escalations[0].duration));
+                }
+                else {
+                    const time = this._fromNow(received);
+                    this.note = this._translate.personalize('SubstitutingNote', substituting.gender, this._formatUserElement(substituting), time, note || '');
+                }
             }
             else if (replied) {
                 const time = this._fromNow(replied);
@@ -7014,6 +7045,23 @@ class ExpandedItemComponent {
             }
             else if (note)
                 this.note = note;
+            else if (originId) {
+                const origin = this.model.recipients.find(r => r.id === originId);
+                if (origin.toId) {
+                    const action = this._session.profile.actions.find(a => a.name === origin.action), adjective = action.adjective || action.past || action.title;
+                    if ((origin.byId || origin.userId) === this._session.userId)
+                        this.note = this._translate.get('ActionByYou', adjective);
+                    else if (origin.byId) {
+                        const who = yield this._accounts.get(origin.userId).toPromise();
+                        const by = yield this._accounts.get(origin.byId).toPromise();
+                        this.note = this._translate.get('ActionByBy', adjective, by.name, who.name);
+                    }
+                    else {
+                        const who = yield this._accounts.get(origin.userId).toPromise();
+                        this.note = this._translate.get('ActionBy', adjective, who.name);
+                    }
+                }
+            }
             else if (ownerId === this._session.profile.userId && issued) {
                 const time = this._fromNow(issued);
                 if (byId) {
@@ -7056,9 +7104,9 @@ class ExpandedItemComponent {
     /** */
     _refresh() {
         return __awaiter(this, void 0, void 0, function* () {
-            const { actions } = this.item;
+            const { actions } = this.model;
             this.actions = actions && actions.length ? this._session.profile.actions.filter(a => actions.indexOf(a.name) > -1) : null;
-            const { senderId } = this.item;
+            const { senderId } = this.model;
             // sender
             if (senderId && (senderId !== this._session.userId)) {
                 const who = yield this._accounts.get(senderId).toPromise();
@@ -7070,14 +7118,14 @@ class ExpandedItemComponent {
         });
     }
     _comments() {
-        const { viewed, comments } = this.item;
+        const { viewed, comments } = this.model;
         this.newComments = viewed ?
             comments.filter(c => c.time > viewed && (c.byId || c.userId) !== this._session.userId).length || null : null;
     }
     _awaiting() {
         return __awaiter(this, void 0, void 0, function* () {
             //awaiting
-            let recipients = this.item.recipients.filter(r => r.pending && !r.estimate).
+            let recipients = this.model.recipients.filter(r => r.pending && !r.estimate).
                 sort((r0, r1) => r0.received > r1.received ? 1 : -1).
                 map(r => r.userId);
             recipients = recipients.filter((r, i) => recipients.indexOf(r) === i); /* unique */
@@ -7109,10 +7157,10 @@ class ExpandedItemComponent {
      * @param action
      */
     send(action) {
-        const { id, number, version, formId } = this.item;
+        const { id, number, version, formId } = this.model;
         const data = {
             action,
-            item: this.item
+            item: this.model
         };
         this._dialog.open(ActionDialog, {
             data,
@@ -7126,10 +7174,10 @@ class ExpandedItemComponent {
                         this._accounts.get(r.toId).subscribe(u => this._sb.toast('SentTo', number, adjective.toLowerCase(), u.name));
                     else
                         this._sb.toast('Sent', number, adjective.toLowerCase());
-                    this.sent.emit(this.item);
+                    this.sent.emit(this.model);
                     this.mode = 'done';
                 }, e => {
-                    this._handleResponse(e, this.item, 'SendErr');
+                    this._handleResponse(e, this.model, 'SendErr');
                     this.mode = 'failed';
                 });
             }
@@ -7173,12 +7221,12 @@ class ExpandedItemComponent {
         this._typingTask && clearTimeout(this._typingTask);
     }
 }
-ExpandedItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ExpandedItemComponent, deps: [{ token: PromptService }, { token: ChatInfo }, { token: AccountService }, { token: i7$2.Directionality }, { token: TranslateService }, { token: MailboxService }, { token: i3$2.MatDialog }, { token: SessionService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component });
-ExpandedItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: { item: "item" }, outputs: { sent: "sent" }, ngImport: i0, template: "<div class=\"summary\" *ngIf=\"item.summary\" [innerHTML]=\"item.summary\">\r\n</div>\r\n<div>\r\n  <bizdoc-attachments [model]=\"item\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"item\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  <ng-container *ngFor=\"let a of actions\">\r\n    <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" *ngIf=\"a.icon\" class=\"tool\">\r\n      <mat-icon>{{a.icon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small\" fxLayout=\"row\">\r\n    <span>{{item.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div fxLayoutAlign=\"center center\">\r\n    <span class=\"mat-small\" *ngIf=\"typing\">{{'SomeoneTyping'|translate}}</span>\r\n    <div *ngIf=\"item.comments.length\" class=\"mat-small\">\r\n      <span *ngIf=\"!newComments; else newcomments\">{{item.comments.length > 1 ? ('CommentsCount' | translate : item.comments.length) : 'OneComment' | translate }}</span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"item.tags\">\r\n    <span *ngFor=\"let tag of item.tags\" class=\"mat-chip mat-standard-chip small-chip\">{{tag}}</span>\r\n  </div>\r\n</div>\r\n<ng-template #newcomments>\r\n  <span [innerHTML]=\"'NewCommentsCount' | translate : item.comments.length : newComments | sanitizeHtml\"></span>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:-moz-fit-content;max-width:fit-content}\n"], components: [{ type: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }, { type: DocumentEventsComponent, selector: "bizdoc-events", inputs: ["model"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }], pipes: { "sanitizeHtml": SanitizeHtmlPipe, "state": StatePipe, "amCalendar": CalendarPipe, "amTimeAgo": TimeAgoPipe, "translate": TranslatePipe } });
+ExpandedItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ExpandedItemComponent, deps: [{ token: PromptService }, { token: ChatInfo }, { token: AccountService }, { token: MailboxService }, { token: SessionService }, { token: i7$2.Directionality }, { token: i3$2.MatDialog }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component });
+ExpandedItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: { model: "model" }, outputs: { sent: "sent" }, ngImport: i0, template: "<div class=\"summary\" *ngIf=\"model.summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  <ng-container *ngFor=\"let a of actions\">\r\n    <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" *ngIf=\"a.icon\" class=\"tool\">\r\n      <mat-icon>{{a.icon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small\" fxLayout=\"row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div fxLayoutAlign=\"center center\">\r\n    <span class=\"mat-small\" *ngIf=\"typing\">{{'SomeoneTyping'|translate}}</span>\r\n    <div *ngIf=\"model.comments.length\" class=\"mat-small\">\r\n      <span *ngIf=\"!newComments; else newcomments\">{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"model.tags\">\r\n    <span *ngFor=\"let tag of model.tags\" class=\"mat-chip mat-standard-chip small-chip\">{{tag}}</span>\r\n  </div>\r\n</div>\r\n<ng-template #newcomments>\r\n  <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:-moz-fit-content;max-width:fit-content}\n"], components: [{ type: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }, { type: DocumentEventsComponent, selector: "bizdoc-events", inputs: ["model"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }], pipes: { "sanitizeHtml": SanitizeHtmlPipe, "state": StatePipe, "amCalendar": CalendarPipe, "amTimeAgo": TimeAgoPipe, "translate": TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ExpandedItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-expanded-item', template: "<div class=\"summary\" *ngIf=\"item.summary\" [innerHTML]=\"item.summary\">\r\n</div>\r\n<div>\r\n  <bizdoc-attachments [model]=\"item\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"item\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  <ng-container *ngFor=\"let a of actions\">\r\n    <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" *ngIf=\"a.icon\" class=\"tool\">\r\n      <mat-icon>{{a.icon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small\" fxLayout=\"row\">\r\n    <span>{{item.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div fxLayoutAlign=\"center center\">\r\n    <span class=\"mat-small\" *ngIf=\"typing\">{{'SomeoneTyping'|translate}}</span>\r\n    <div *ngIf=\"item.comments.length\" class=\"mat-small\">\r\n      <span *ngIf=\"!newComments; else newcomments\">{{item.comments.length > 1 ? ('CommentsCount' | translate : item.comments.length) : 'OneComment' | translate }}</span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"item.tags\">\r\n    <span *ngFor=\"let tag of item.tags\" class=\"mat-chip mat-standard-chip small-chip\">{{tag}}</span>\r\n  </div>\r\n</div>\r\n<ng-template #newcomments>\r\n  <span [innerHTML]=\"'NewCommentsCount' | translate : item.comments.length : newComments | sanitizeHtml\"></span>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:-moz-fit-content;max-width:fit-content}\n"] }]
-        }], ctorParameters: function () { return [{ type: PromptService }, { type: ChatInfo }, { type: AccountService }, { type: i7$2.Directionality }, { type: TranslateService }, { type: MailboxService }, { type: i3$2.MatDialog }, { type: SessionService }, { type: HubService }]; }, propDecorators: { item: [{
+            args: [{ selector: 'bizdoc-expanded-item', template: "<div class=\"summary\" *ngIf=\"model.summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  <ng-container *ngFor=\"let a of actions\">\r\n    <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" *ngIf=\"a.icon\" class=\"tool\">\r\n      <mat-icon>{{a.icon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small\" fxLayout=\"row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div fxLayoutAlign=\"center center\">\r\n    <span class=\"mat-small\" *ngIf=\"typing\">{{'SomeoneTyping'|translate}}</span>\r\n    <div *ngIf=\"model.comments.length\" class=\"mat-small\">\r\n      <span *ngIf=\"!newComments; else newcomments\">{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"model.tags\">\r\n    <span *ngFor=\"let tag of model.tags\" class=\"mat-chip mat-standard-chip small-chip\">{{tag}}</span>\r\n  </div>\r\n</div>\r\n<ng-template #newcomments>\r\n  <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:-moz-fit-content;max-width:fit-content}\n"] }]
+        }], ctorParameters: function () { return [{ type: PromptService }, { type: ChatInfo }, { type: AccountService }, { type: MailboxService }, { type: SessionService }, { type: i7$2.Directionality }, { type: i3$2.MatDialog }, { type: TranslateService }, { type: HubService }]; }, propDecorators: { model: [{
                 type: Input
             }], sent: [{
                 type: Output
@@ -7611,7 +7659,7 @@ class BrowseItemsComponent {
     }
 }
 BrowseItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BrowseItemsComponent, deps: [{ token: MailboxService }, { token: AccountService }, { token: CubeService }, { token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }, { token: RouterImpl }, { token: HubService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-BrowseItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: { folderId: "folderId", filterType: "filterType", filters: "filters" }, outputs: { onopen: "open", onview: "view" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<bizdoc-none *ngIf=\"dataSource?.data.length === 0\" title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<mat-table cdkDropList class=\"data-table\"\r\n           [cdkDropListDisabled]=\"isMobile\"\r\n           [cdkDropListData]=\"dataSource?.data\"\r\n           cdkDropListConnectedTo=\"folders\"\r\n           cdkDropListSortingDisabled\r\n           [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n           id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n                    (change)=\"$event ? selection.toggle(item) : null\"\r\n                    [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n              (mousedown)=\"dragDisabled = false\"\r\n              (mouseup)=\"dragDisabled = true\"\r\n              (touchstart)=\"dragDisabled = false\"\r\n              (touchend)=\"dragDisabled = true\"\r\n              class=\"drag\" aria-disabled=\"true\" fxHide.xs>\r\n        <mat-icon>drag_indicator</mat-icon>\r\n      </button>-->\r\n      <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <!-- Number column -->\r\n  <ng-container matColumnDef=\"number\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- Subject column -->\r\n  <ng-container matColumnDef=\"subject\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"owner\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-identity-name *ngIf=\"item.ownerId\" [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"sender\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-identity-name *ngIf=\"item.senderId\" [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"received\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.received | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"receivedAgo\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"replied\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.replied | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"issued\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.issued | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"issuedAgo\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\" [bizdocTooltip]=\"item.issued | amCalendar\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"customColumns\">\r\n    <ng-container *ngFor=\"let c of customColumns\" [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n        <ng-container [ngSwitch]=\"c.type\">\r\n          <span *ngSwitchCase=\"'Date'\">\r\n            {{item.model[c.name] | amCalendar }}\r\n          </span>\r\n          <span *ngSwitchCase=\"'Decimal'\">\r\n            {{item.model[c.name] | number }}\r\n          </span>\r\n          <span *ngSwitchCase=\"'Boolean'\">\r\n            <mat-checkbox [checked]=\"item.model[c.name]\" [disabled]=\"true\"></mat-checkbox>\r\n          </span>\r\n          <span *ngSwitchDefault>\r\n            {{item.model[c.name]}}z\r\n          </span>\r\n        </ng-container>\r\n      </mat-cell>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <!-- Value column -->\r\n  <ng-container matColumnDef=\"value\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- options column -->\r\n  <ng-container matColumnDef=\"options\">\r\n    <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.document-flag]=\"item.flag\">{{item.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n      <button mat-icon-button (click)=\"view(item, $event)\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\" *ngIf=\"enableAnalysis\"><mat-icon>data_usage</mat-icon></button>\r\n      <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" fxHide.xs [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool\"><mat-icon>more_vert</mat-icon></button>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <!-- Expanded Content Column -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n              [class.read-row]=\"item.read\">\r\n      <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n        <bizdoc-expanded-item [item]=\"item\" *ngIf=\"item == expandedElement\"></bizdoc-expanded-item>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n  <mat-row @item [@updated]=\"item == updatedElement\"\r\n           *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n           cdkDrag [cdkDragData]=\"item\"\r\n           [cdkDragDisabled]=\"dragDisabled\"\r\n           (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selecteded-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n           (click)=\"open(item, $event)\">\r\n    <div *cdkDragPreview>\r\n      <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n    </div>\r\n    <div *cdkDragPlaceholder>\r\n      <!-- none -->\r\n    </div>\r\n  </mat-row>\r\n  <mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n           class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selecteded-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-row .tool{opacity:.05}.mat-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"], components: [{ type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { type: i10$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["item"], outputs: ["sent"] }, { type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i18.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i8$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i22.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5$1.MatCellDef, selector: "[matCellDef]" }, { type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i25.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i22.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i25.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i22.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { type: i22.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { type: i8$2.MatMenuContent, selector: "ng-template[matMenuContent]" }], pipes: { "translate": TranslatePipe, "amCalendar": CalendarPipe, "amTimeAgo": TimeAgoPipe, "number": i10.DecimalPipe, "currency": i10.CurrencyPipe }, animations: [
+BrowseItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: { folderId: "folderId", filterType: "filterType", filters: "filters" }, outputs: { onopen: "open", onview: "view" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<bizdoc-none *ngIf=\"dataSource?.data.length === 0\" title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<mat-table cdkDropList class=\"data-table\"\r\n           [cdkDropListDisabled]=\"isMobile\"\r\n           [cdkDropListData]=\"dataSource?.data\"\r\n           cdkDropListConnectedTo=\"folders\"\r\n           cdkDropListSortingDisabled\r\n           [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n           id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n                    (change)=\"$event ? selection.toggle(item) : null\"\r\n                    [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n              (mousedown)=\"dragDisabled = false\"\r\n              (mouseup)=\"dragDisabled = true\"\r\n              (touchstart)=\"dragDisabled = false\"\r\n              (touchend)=\"dragDisabled = true\"\r\n              class=\"drag\" aria-disabled=\"true\" fxHide.xs>\r\n        <mat-icon>drag_indicator</mat-icon>\r\n      </button>-->\r\n      <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <!-- Number column -->\r\n  <ng-container matColumnDef=\"number\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- Subject column -->\r\n  <ng-container matColumnDef=\"subject\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"owner\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-identity-name *ngIf=\"item.ownerId\" [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"sender\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-identity-name *ngIf=\"item.senderId\" [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"received\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.received | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"receivedAgo\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"replied\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.replied | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"issued\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.issued | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"issuedAgo\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\" [bizdocTooltip]=\"item.issued | amCalendar\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"customColumns\">\r\n    <ng-container *ngFor=\"let c of customColumns\" [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n        <ng-container [ngSwitch]=\"c.type\">\r\n          <span *ngSwitchCase=\"'Date'\">\r\n            {{item.model[c.name] | amCalendar }}\r\n          </span>\r\n          <span *ngSwitchCase=\"'Decimal'\">\r\n            {{item.model[c.name] | number }}\r\n          </span>\r\n          <span *ngSwitchCase=\"'Boolean'\">\r\n            <mat-checkbox [checked]=\"item.model[c.name]\" [disabled]=\"true\"></mat-checkbox>\r\n          </span>\r\n          <span *ngSwitchDefault>\r\n            {{item.model[c.name]}}z\r\n          </span>\r\n        </ng-container>\r\n      </mat-cell>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <!-- Value column -->\r\n  <ng-container matColumnDef=\"value\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- options column -->\r\n  <ng-container matColumnDef=\"options\">\r\n    <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.document-flag]=\"item.flag\">{{item.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n      <button mat-icon-button (click)=\"view(item, $event)\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\" *ngIf=\"enableAnalysis\"><mat-icon>data_usage</mat-icon></button>\r\n      <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" fxHide.xs [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool\"><mat-icon>more_vert</mat-icon></button>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <!-- Expanded Content Column -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n              [class.read-row]=\"item.read\">\r\n      <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n        <bizdoc-expanded-item [model]=\"item\" *ngIf=\"item == expandedElement\"></bizdoc-expanded-item>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n  <mat-row @item [@updated]=\"item == updatedElement\"\r\n           *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n           cdkDrag [cdkDragData]=\"item\"\r\n           [cdkDragDisabled]=\"dragDisabled\"\r\n           (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selecteded-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n           (click)=\"open(item, $event)\">\r\n    <div *cdkDragPreview>\r\n      <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n    </div>\r\n    <div *cdkDragPlaceholder>\r\n      <!-- none -->\r\n    </div>\r\n  </mat-row>\r\n  <mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n           class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selecteded-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-row .tool{opacity:.05}.mat-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"], components: [{ type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { type: i10$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["model"], outputs: ["sent"] }, { type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i18.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i8$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i22.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5$1.MatCellDef, selector: "[matCellDef]" }, { type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i25.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i22.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i25.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i22.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { type: i22.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { type: i8$2.MatMenuContent, selector: "ng-template[matMenuContent]" }], pipes: { "translate": TranslatePipe, "amCalendar": CalendarPipe, "amTimeAgo": TimeAgoPipe, "number": i10.DecimalPipe, "currency": i10.CurrencyPipe }, animations: [
         listAnimation,
         itemAnimation,
         expandListItemAnimation,
@@ -7624,7 +7672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         itemAnimation,
                         expandListItemAnimation,
                         listItemUpdatedAnimation
-                    ], template: "<bizdoc-none *ngIf=\"dataSource?.data.length === 0\" title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<mat-table cdkDropList class=\"data-table\"\r\n           [cdkDropListDisabled]=\"isMobile\"\r\n           [cdkDropListData]=\"dataSource?.data\"\r\n           cdkDropListConnectedTo=\"folders\"\r\n           cdkDropListSortingDisabled\r\n           [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n           id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n                    (change)=\"$event ? selection.toggle(item) : null\"\r\n                    [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n              (mousedown)=\"dragDisabled = false\"\r\n              (mouseup)=\"dragDisabled = true\"\r\n              (touchstart)=\"dragDisabled = false\"\r\n              (touchend)=\"dragDisabled = true\"\r\n              class=\"drag\" aria-disabled=\"true\" fxHide.xs>\r\n        <mat-icon>drag_indicator</mat-icon>\r\n      </button>-->\r\n      <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <!-- Number column -->\r\n  <ng-container matColumnDef=\"number\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- Subject column -->\r\n  <ng-container matColumnDef=\"subject\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"owner\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-identity-name *ngIf=\"item.ownerId\" [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"sender\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-identity-name *ngIf=\"item.senderId\" [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"received\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.received | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"receivedAgo\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"replied\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.replied | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"issued\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.issued | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"issuedAgo\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\" [bizdocTooltip]=\"item.issued | amCalendar\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"customColumns\">\r\n    <ng-container *ngFor=\"let c of customColumns\" [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n        <ng-container [ngSwitch]=\"c.type\">\r\n          <span *ngSwitchCase=\"'Date'\">\r\n            {{item.model[c.name] | amCalendar }}\r\n          </span>\r\n          <span *ngSwitchCase=\"'Decimal'\">\r\n            {{item.model[c.name] | number }}\r\n          </span>\r\n          <span *ngSwitchCase=\"'Boolean'\">\r\n            <mat-checkbox [checked]=\"item.model[c.name]\" [disabled]=\"true\"></mat-checkbox>\r\n          </span>\r\n          <span *ngSwitchDefault>\r\n            {{item.model[c.name]}}z\r\n          </span>\r\n        </ng-container>\r\n      </mat-cell>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <!-- Value column -->\r\n  <ng-container matColumnDef=\"value\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- options column -->\r\n  <ng-container matColumnDef=\"options\">\r\n    <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.document-flag]=\"item.flag\">{{item.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n      <button mat-icon-button (click)=\"view(item, $event)\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\" *ngIf=\"enableAnalysis\"><mat-icon>data_usage</mat-icon></button>\r\n      <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" fxHide.xs [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool\"><mat-icon>more_vert</mat-icon></button>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <!-- Expanded Content Column -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n              [class.read-row]=\"item.read\">\r\n      <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n        <bizdoc-expanded-item [item]=\"item\" *ngIf=\"item == expandedElement\"></bizdoc-expanded-item>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n  <mat-row @item [@updated]=\"item == updatedElement\"\r\n           *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n           cdkDrag [cdkDragData]=\"item\"\r\n           [cdkDragDisabled]=\"dragDisabled\"\r\n           (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selecteded-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n           (click)=\"open(item, $event)\">\r\n    <div *cdkDragPreview>\r\n      <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n    </div>\r\n    <div *cdkDragPlaceholder>\r\n      <!-- none -->\r\n    </div>\r\n  </mat-row>\r\n  <mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n           class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selecteded-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-row .tool{opacity:.05}.mat-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"] }]
+                    ], template: "<bizdoc-none *ngIf=\"dataSource?.data.length === 0\" title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<mat-table cdkDropList class=\"data-table\"\r\n           [cdkDropListDisabled]=\"isMobile\"\r\n           [cdkDropListData]=\"dataSource?.data\"\r\n           cdkDropListConnectedTo=\"folders\"\r\n           cdkDropListSortingDisabled\r\n           [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n           id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n                    (change)=\"$event ? selection.toggle(item) : null\"\r\n                    [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n              (mousedown)=\"dragDisabled = false\"\r\n              (mouseup)=\"dragDisabled = true\"\r\n              (touchstart)=\"dragDisabled = false\"\r\n              (touchend)=\"dragDisabled = true\"\r\n              class=\"drag\" aria-disabled=\"true\" fxHide.xs>\r\n        <mat-icon>drag_indicator</mat-icon>\r\n      </button>-->\r\n      <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <!-- Number column -->\r\n  <ng-container matColumnDef=\"number\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- Subject column -->\r\n  <ng-container matColumnDef=\"subject\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"owner\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-identity-name *ngIf=\"item.ownerId\" [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"sender\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-identity-name *ngIf=\"item.senderId\" [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"received\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.received | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"receivedAgo\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"replied\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.replied | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"issued\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.issued | amCalendar}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"issuedAgo\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\" [bizdocTooltip]=\"item.issued | amCalendar\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n      <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"customColumns\">\r\n    <ng-container *ngFor=\"let c of customColumns\" [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n        <ng-container [ngSwitch]=\"c.type\">\r\n          <span *ngSwitchCase=\"'Date'\">\r\n            {{item.model[c.name] | amCalendar }}\r\n          </span>\r\n          <span *ngSwitchCase=\"'Decimal'\">\r\n            {{item.model[c.name] | number }}\r\n          </span>\r\n          <span *ngSwitchCase=\"'Boolean'\">\r\n            <mat-checkbox [checked]=\"item.model[c.name]\" [disabled]=\"true\"></mat-checkbox>\r\n          </span>\r\n          <span *ngSwitchDefault>\r\n            {{item.model[c.name]}}z\r\n          </span>\r\n        </ng-container>\r\n      </mat-cell>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <!-- Value column -->\r\n  <ng-container matColumnDef=\"value\">\r\n    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n  </ng-container>\r\n\r\n  <!-- options column -->\r\n  <ng-container matColumnDef=\"options\">\r\n    <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.document-flag]=\"item.flag\">{{item.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n      <button mat-icon-button (click)=\"view(item, $event)\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\" *ngIf=\"enableAnalysis\"><mat-icon>data_usage</mat-icon></button>\r\n      <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" fxHide.xs [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool\"><mat-icon>more_vert</mat-icon></button>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <!-- Expanded Content Column -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n              [class.read-row]=\"item.read\">\r\n      <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n        <bizdoc-expanded-item [model]=\"item\" *ngIf=\"item == expandedElement\"></bizdoc-expanded-item>\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n  <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n  <mat-row @item [@updated]=\"item == updatedElement\"\r\n           *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n           cdkDrag [cdkDragData]=\"item\"\r\n           [cdkDragDisabled]=\"dragDisabled\"\r\n           (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selecteded-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n           (click)=\"open(item, $event)\">\r\n    <div *cdkDragPreview>\r\n      <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n    </div>\r\n    <div *cdkDragPlaceholder>\r\n      <!-- none -->\r\n    </div>\r\n  </mat-row>\r\n  <mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n           class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selecteded-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-row .tool{opacity:.05}.mat-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"] }]
         }], ctorParameters: function () {
         return [{ type: MailboxService }, { type: AccountService }, { type: CubeService }, { type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }, { type: RouterImpl }, { type: HubService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -13228,9 +13276,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             args: [{ name: 'amDurationFormat' }]
         }], ctorParameters: function () { return [{ type: TranslateService }]; } });
 
-Diagram.Inject(ComplexHierarchicalTree, BpmnDiagrams, DataBinding, LineDistribution /*, LayoutAnimation, LineRouting, ConnectorBridging*/);
-const //PENDING_PATH = 'M18,22l-0.01-6L14,12l3.99-4.01L18,2H6v6l4,4l-4,3.99V22H18z M8,7.5V4h8v3.5l-4,4L8,7.5z',
-ELLIPSIS = 'M 650, 150 a 75,150 0 1,0 1,0 z', FYI_PATH = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z', ESCALATED_PATH = 'M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z', WARNNING_PATH$1 = 'M 13.763735,1.8433735 H 6.3037349 l -5.27,5.27 v 7.4599995 l 5.27,5.27 h 7.4600001 l 5.27,-5.27 V 7.1133735 Z m -3.73,14.2999995 c -0.7200001,0 -1.3000001,-0.58 -1.3000001,-1.3 0,-0.72 0.58,-1.3 1.3000001,-1.3 0.72,0 1.3,0.58 1.3,1.3 0,0.72 -0.58,1.3 -1.3,1.3 z m 1,-4.3 H 9.0337349 V 5.8433735 h 2.0000001 z';
+Diagram.Inject(ComplexHierarchicalTree, BpmnDiagrams, DataBinding, LineDistribution /*, LineRouting, ConnectorBridging, LayoutAnimation, LineRouting, ConnectorBridging*/);
+const 
+//ELLIPSIS = 'M 650, 150 a 75,150 0 1,0 1,0 z',
+FYI_PATH = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z', ESCALATED_PATH = 'M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z', WARNNING_PATH$1 = 'M 13.763735,1.8433735 H 6.3037349 l -5.27,5.27 v 7.4599995 l 5.27,5.27 h 7.4600001 l 5.27,-5.27 V 7.1133735 Z m -3.73,14.2999995 c -0.7200001,0 -1.3000001,-0.58 -1.3000001,-1.3 0,-0.72 0.58,-1.3 1.3000001,-1.3 0.72,0 1.3,0.58 1.3,1.3 0,0.72 -0.58,1.3 -1.3,1.3 z m 1,-4.3 H 9.0337349 V 5.8433735 h 2.0000001 z';
 /** flow-view component*/
 class FlowViewComponent extends TraceBase {
     /** workflow-view ctor */
@@ -13246,14 +13295,13 @@ class FlowViewComponent extends TraceBase {
         this.diagramConstraints = DiagramConstraints.Default |
             DiagramConstraints.Pan |
             DiagramConstraints.LineRouting |
-            DiagramConstraints.Bridging;
+            DiagramConstraints.Zoom;
         this.layout = {
             type: 'ComplexHierarchicalTree',
             connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
             horizontalSpacing: 50,
+            enableRouting: true,
             verticalSpacing: 50,
-            //connectorSegments: 'Layout',
-            //arrangement: ChildArrangement.Linear,
             horizontalAlignment: 'Center',
             connectionDirection: 'Orientation',
             orientation: this._session.inverse ? 'RightToLeft' : 'LeftToRight',
@@ -13345,7 +13393,6 @@ class FlowViewComponent extends TraceBase {
             obj.style.strokeWidth = 0;
         }
         else {
-            // obj.shape = { type: 'Bpmn', shape: 'Event' } as BpmnShapeModel;
             obj.width = obj.height = 50;
             if (obj.annotations && obj.annotations.length)
                 obj.annotations[0].style.color = this._session.theme.dark ? 'white' : 'black';
@@ -13356,7 +13403,8 @@ class FlowViewComponent extends TraceBase {
             }
             else {
                 obj.style.strokeColor = this._accentColor;
-                obj.style.fill = recipient && recipient.pending ? this._session.getAccent(400) : 'transparent';
+                obj.style.fill = recipient && recipient.pending ?
+                    this._session.getAccent(recipient.userId === this._session.userId ? 500 : 400) : 'transparent';
             }
             obj.style.strokeWidth = 2;
         }
@@ -13464,7 +13512,7 @@ class FlowViewComponent extends TraceBase {
                                     });
                                 if (c.sourceId === node.id) {
                                     // 
-                                    if (c.virtualizing && c.originId !== recipient.id)
+                                    if (c.virtual && c.originId !== recipient.id)
                                         return;
                                     connectors.push({
                                         sourceID: nod.id,
@@ -13692,99 +13740,104 @@ class FlowViewComponent extends TraceBase {
             const tooltip = {};
             let annotation;
             // you
-            if ((recipient.byId || recipient.userId) === this._session.userId) {
-                annotation = this._session.isImpersonating ? this._session.profile.name : this._translate.get('You');
-                if (recipient.replied) {
-                    const time = this._fromNow(recipient.replied);
-                    if (recipient.byId) {
-                        if (recipient.byId === this._session.profile.byId) {
-                            const action = this._action(recipient.action, this._session.gender);
+            if (recipient.userId === this._session.userId) {
+                if (this._session.isImpersonating)
+                    annotation = this._session.profile.name;
+                else
+                    annotation = this._translate.get('You');
+                if (recipient.role) {
+                    const role = this._session.profile.roles.find(o => o.name === recipient.role);
+                    if (role)
+                        tooltip.role = `- ${role.title}`;
+                }
+            }
+            else 
+            // someone else
+            {
+                const who = yield this._accounts.get(recipient.userId).toPromise();
+                annotation = who.name;
+                if (who.role)
+                    tooltip.role = `- ${who.role}`;
+                else if (recipient.role) {
+                    const role = this._session.profile.roles.find(o => o.name === recipient.role);
+                    if (role)
+                        tooltip.role = `- ${role.title}`;
+                }
+            }
+            if (recipient.replied) {
+                const time = this._fromNow(recipient.replied);
+                if (recipient.byId) {
+                    if (recipient.byId === this._session.profile.byId) {
+                        const action = this._action(recipient.action, this._session.gender);
+                        if (recipient.toId) {
+                            const to = yield this._accounts.get(recipient.toId).toPromise();
+                            tooltip.note = this._translate.get('ActionTakenByYouTo', action, to.name, this._session.profile.name, time);
+                        }
+                        else
+                            tooltip.note = this._translate.get('ActionTakenByYou', action, this._session.profile.name, time);
+                    }
+                    else {
+                        const by = yield this._accounts.get(recipient.byId).toPromise();
+                        const action = this._action(recipient.action, by.gender);
+                        if (recipient.userId === this._session.profile.userId) {
                             if (recipient.toId) {
                                 const to = yield this._accounts.get(recipient.toId).toPromise();
-                                tooltip.note = this._translate.get('ActionTakenByYouTo', action, to.name, this._session.profile.name, time);
+                                tooltip.note = this._translate.get('YouTakenActionByTo', by.name, action, to.name, time);
                             }
                             else
-                                tooltip.note = this._translate.get('ActionTakenByYou', action, this._session.profile.name, time);
+                                tooltip.note = this._translate.get('YouTakenActionBy', by.name, action, time);
                         }
                         else {
-                            const by = yield this._accounts.get(recipient.byId).toPromise();
-                            const action = this._action(recipient.action, by.gender);
+                            const who = yield this._accounts.get(recipient.userId).toPromise();
                             if (recipient.toId) {
                                 const to = yield this._accounts.get(recipient.toId).toPromise();
-                                tooltip.note = this._translate.get('YouTakenActionByTo', by.name, action, to.name, time);
+                                tooltip.note = this._translate.get('ActionTakenByTo', by.name, action, to.name, who.name, time);
                             }
                             else
-                                tooltip.note = this._translate.get('YouTakenActionBy', by.name, action, time);
+                                tooltip.note = this._translate.get('ActionTakenBy', by.name, action, who.name, time);
                         }
                     }
-                    else if (recipient.toId) {
-                        const to = yield this._accounts.get(recipient.toId).toPromise();
+                }
+                else if (recipient.toId) {
+                    const to = yield this._accounts.get(recipient.toId).toPromise();
+                    if (recipient.userId === this._session.profile.userId) {
                         const action = this._action(recipient.action, this._session.profile.gender);
                         if (this._session.isImpersonating)
                             tooltip.note = this._translate.get('ActionTakenTo', this._session.profile.name, action, to.name, time);
                         else
                             tooltip.note = this._translate.get('YouTakenActionTo', action, to.name, time);
                     }
-                    else if (this._session.isImpersonating) {
-                        const action = this._action(recipient.action, this._session.profile.gender);
-                        tooltip.note = this._translate.get('ActionTaken', this._session.profile.name, action, time);
-                    }
                     else {
-                        const action = this._action(recipient.action, You);
-                        tooltip.note = this._translate.get('YouTakenAction', action, time);
+                        const who = yield this._accounts.get(recipient.userId).toPromise();
+                        const action = this._action(recipient.action, who.gender);
+                        tooltip.note = this._translate.get('ActionTakenTo', who.name, action, to.name);
                     }
                 }
-                else if (!node.estimate) {
-                    const time = this._fromNow(recipient.received);
-                    if (this._session.isImpersonating)
-                        tooltip.note = this._translate.personalize('ReceivedBy', this._session.profile.gender, this._session.profile.name, time);
-                    else
-                        tooltip.note = this._translate.get('YouReceived', time);
+                else if (this._session.isImpersonating) {
+                    const action = this._action(recipient.action, this._session.profile.gender);
+                    tooltip.note = this._translate.get('ActionTaken', this._session.profile.name, action, time);
                 }
-                if (recipient.role) {
-                    const crole = this._session.profile.roles.find(o => o.name === recipient.role);
-                    if (crole)
-                        tooltip.role = `- ${crole.title}`;
+                else if (recipient.userId === this._session.profile.userId) {
+                    const action = this._action(recipient.action, You);
+                    tooltip.note = this._translate.get('YouTakenAction', action, time);
+                }
+                else {
+                    const who = yield this._accounts.get(recipient.userId).toPromise();
+                    const action = this._action(recipient.action, who.gender);
+                    tooltip.note = this._translate.get('ActionTaken', who.name, action, time);
                 }
             }
-            else 
-            // someone else
-            {
+            else if (!node.estimate) {
+                const time = this._fromNow(recipient.received);
+                if (this._session.isImpersonating)
+                    tooltip.note = this._translate.personalize('ReceivedBy', this._session.profile.gender, this._session.profile.name, time);
+                else
+                    tooltip.note = this._translate.get('YouReceived', time);
+            }
+            else if (!recipient.estimate) {
                 const who = yield this._accounts.get(recipient.userId).toPromise();
-                annotation = who.name;
-                if (who.role)
-                    tooltip.role = `- ${who.role}`;
-                else if (recipient.role) {
-                    const crole = this._session.profile.roles.find(o => o.name === recipient.role);
-                    if (crole)
-                        tooltip.role = `- ${crole.title}`;
-                }
-                if (recipient.replied) {
-                    const time = this._fromNow(recipient.replied);
-                    if (recipient.byId) {
-                        const by = yield this._accounts.get(recipient.byId).toPromise();
-                        const action = this._action(recipient.action, by.gender);
-                        if (recipient.toId) {
-                            const to = yield this._accounts.get(recipient.toId).toPromise();
-                            tooltip.note = this._translate.get('ActionTakenByTo', by.name, action, to.name, who.name, time);
-                        }
-                        else
-                            tooltip.note = this._translate.get('ActionTakenBy', by.name, action, who.name, time);
-                    }
-                    else if (recipient.toId) {
-                        const to = yield this._accounts.get(recipient.toId).toPromise();
-                        const action = this._action(recipient.action, who.gender);
-                        tooltip.note = this._translate.get('ActionTakenTo', who.name, action, to.name);
-                    }
-                    else {
-                        const action = this._action(recipient.action, who.gender);
-                        tooltip.note = this._translate.get('ActionTaken', who.name, action, time);
-                    }
-                }
-                else if (!recipient.estimate) {
-                    const time = this._fromNow(recipient.received);
-                    tooltip.note = this._translate.personalize('ReceivedTime', who.gender, time);
-                }
+                const time = this._fromNow(recipient.received);
+                tooltip.note = this._translate.personalize('ReceivedTime', who.gender, time);
             }
             if (recipient.substitutingId) {
                 if (recipient.substitutingId === this._session.userId)
@@ -13794,17 +13847,20 @@ class FlowViewComponent extends TraceBase {
                     tooltip.substituting = this._translate.personalize('SubstitutingFor', substituting.gender, substituting.name);
                 }
             }
-            if (recipient.originId) {
+            if (recipient.originId && !recipient.replied) {
                 const origin = this.model.recipients.find(r => r.id === recipient.originId);
                 if (origin.toId) {
-                    const action = this._session.profile.actions.find(a => a.name === origin.action);
-                    const id = origin.byId || origin.userId, name = action.adjective || action.past || action.title;
-                    if (id === this._session.userId) {
-                        tooltip.substituting = this._translate.get('ByYou', name);
+                    const action = this._session.profile.actions.find(a => a.name === origin.action), adjective = action.adjective || action.past || action.title;
+                    if ((origin.byId || origin.userId) === this._session.userId)
+                        tooltip.substituting = this._translate.get('ActionByYou', adjective);
+                    else if (origin.byId) {
+                        const who = yield this._accounts.get(origin.userId).toPromise();
+                        const by = yield this._accounts.get(origin.byId).toPromise();
+                        tooltip.substituting = this._translate.get('ActionByBy', adjective, by.name, who.name);
                     }
                     else {
-                        const who = yield this._accounts.get(id).toPromise();
-                        tooltip.substituting = this._translate.get('By', who.name, name);
+                        const who = yield this._accounts.get(origin.userId).toPromise();
+                        tooltip.substituting = this._translate.get('ActionBy', adjective, who.name);
                     }
                 }
             }
@@ -14033,22 +14089,16 @@ class TraceViewComponent extends TraceBase {
                         }
                     }
                     else if (recipient.byId) {
-                        let who = yield profileOf(recipient.userId);
-                        if (recipient.byId === this._session.userId) {
+                        let who = yield profileOf(recipient.userId), by = yield profileOf(recipient.byId);
+                        if (recipient.byId === this._session.userId)
                             step.name = this._translate.get('ByYou', nameOf(who));
-                            if (action)
-                                step.action = yield actionBy(action, You, recipient.toId);
-                        }
                         else {
-                            let by = yield profileOf(recipient.byId);
                             step.name = this._translate.get('By', nameOf(who), nameOf(by));
                             if (by.role)
                                 step.role = by.role;
-                            if (action)
-                                step.action = yield actionBy(action, by.gender, recipient.toId);
                         }
                         if (action)
-                            step.action = yield actionBy(action, who.gender, recipient.toId);
+                            step.action = yield actionBy(action, by.gender, recipient.toId);
                     }
                     else {
                         if (recipient.userId === this._session.userId)
@@ -14208,10 +14258,10 @@ class TraceViewComponent extends TraceBase {
     }
 }
 TraceViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TraceViewComponent, deps: [{ token: SessionService }, { token: TranslateService }, { token: AccountService }, { token: ChatInfo }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component });
-TraceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TraceViewComponent, selector: "bizdoc-trace", inputs: { model: "model" }, outputs: { versionSelected: "versionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav-toolbar row\">\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" [bizdocTooltip]=\"'ShowAll'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n  <mat-menu #menu> \r\n    <button mat-menu-item (click)=\"showAll=false\">\r\n      <mat-icon>{{ !showAll?'check':'' }}</mat-icon>\r\n      <span>{{'Route' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showAll=true\">\r\n      <mat-icon>{{showAll?'check':''}}</mat-icon>\r\n      <span>{{'Log' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n<table class=\"mat-table\" @list>\r\n  <tbody role=\"rowgroup\">\r\n    <tr class=\"mat-row\" *ngFor=\"let l of data\" @item>\r\n      <td class=\"mat-cell\">\r\n        <span [innerHTML]=\"l.name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n        <span *ngIf=l.role>{{'JoinComma'|translate}}{{l.role}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <ng-container [ngSwitch]=\"l.type\">\r\n          <ng-container *ngSwitchCase=\"'ActionTaken'\">\r\n            <span [innerHTML]=\"l.action | sanitizeHtml\" (click)=\"chat($event)\" class=\"to\"></span>\r\n          </ng-container>\r\n          <span *ngSwitchCase=\"'Submit'\">{{'Issued' | translate}}</span>\r\n          <span *ngSwitchCase=\"'Pending'\">{{'IsPending' | translate}}</span>\r\n          <span *ngSwitchCase=\"'CheckOut'\">{{'CheckedIn' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'CheckIn'\">{{'CheckedOut' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'Estimate'\">{{'Estimate' | translate}}</span>\r\n          <span *ngSwitchCase=\"'ModelChange'\">{{'Changed' | translate}}</span>\r\n        </ng-container>\r\n        <span *ngIf=\"l.fyi\">&nbsp;{{'FYI'|translate}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\" [ngSwitch]=\"l.estimate\">\r\n        <ng-container *ngSwitchCase=\"true\">\r\n          <span *ngIf=\"l.durationMax && l.durationMax === l.durationMin\" [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>\r\n          <span *ngIf=\"l.durationMax && l.durationMax !== l.durationMin\"\r\n                [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTimeRange'| translate : (l.durationMin | amDuration:'s') : (l.durationMax | amDuration:'s')}}</span>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <span>{{l.time | amCalendar : null : CALENDAR_SPEC }}</span>\r\n          <span *ngIf=\"l.duration\" [bizdocTooltip]=\"l.duration|amDurationFormat\" class=\"duration\">&nbsp;({{l.duration | amDuration:'s'}})</span>\r\n        </ng-container>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"l.note\">{{l.note}}</span>\r\n        <button mat-icon-button *ngIf=\"l.type==='ModelChange'\" (click)=\"compare(l)\" [bizdocTooltip]=\"'Compare'|translate\" bizdocTooltipPosition=\"start\"><mat-icon>more_horiz</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{width:100%}table{width:100%;background:transparent}table td{padding:0 4px}.duration{white-space:nowrap}\n"], components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "translate": TranslatePipe, "sanitizeHtml": SanitizeHtmlPipe, "amDurationFormat": DurationFormatPipe, "amDuration": DurationPipe, "amCalendar": CalendarPipe }, animations: [listAnimation, itemAnimation] });
+TraceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TraceViewComponent, selector: "bizdoc-trace", inputs: { model: "model" }, outputs: { versionSelected: "versionSelected" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"nav-toolbar row\">\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" [bizdocTooltip]=\"'ShowAll'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n  <mat-menu #menu> \r\n    <button mat-menu-item (click)=\"showAll=false\">\r\n      <mat-icon>{{ !showAll?'check':'' }}</mat-icon>\r\n      <span>{{'Route' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showAll=true\">\r\n      <mat-icon>{{showAll?'check':''}}</mat-icon>\r\n      <span>{{'Everything' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n<table class=\"mat-table\" @list>\r\n  <tbody role=\"rowgroup\">\r\n    <tr class=\"mat-row\" *ngFor=\"let l of data\" @item>\r\n      <td class=\"mat-cell\">\r\n        <span [innerHTML]=\"l.name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n        <span *ngIf=l.role>{{'JoinComma'|translate}}{{l.role}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <ng-container [ngSwitch]=\"l.type\">\r\n          <ng-container *ngSwitchCase=\"'ActionTaken'\">\r\n            <span [innerHTML]=\"l.action | sanitizeHtml\" (click)=\"chat($event)\" class=\"to\"></span>\r\n          </ng-container>\r\n          <span *ngSwitchCase=\"'Submit'\">{{'Issued' | translate}}</span>\r\n          <span *ngSwitchCase=\"'Pending'\">{{'IsPending' | translate}}</span>\r\n          <span *ngSwitchCase=\"'CheckOut'\">{{'CheckedIn' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'CheckIn'\">{{'CheckedOut' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'Estimate'\">{{'Estimate' | translate}}</span>\r\n          <span *ngSwitchCase=\"'ModelChange'\">{{'Changed' | translate}}</span>\r\n        </ng-container>\r\n        <span *ngIf=\"l.fyi\">&nbsp;{{'FYI'|translate}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\" [ngSwitch]=\"l.estimate\">\r\n        <ng-container *ngSwitchCase=\"true\">\r\n          <span *ngIf=\"l.durationMax && l.durationMax === l.durationMin\" [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>\r\n          <span *ngIf=\"l.durationMax && l.durationMax !== l.durationMin\"\r\n                [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTimeRange'| translate : (l.durationMin | amDuration:'s') : (l.durationMax | amDuration:'s')}}</span>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <span>{{l.time | amCalendar : null : CALENDAR_SPEC }}</span>\r\n          <span *ngIf=\"l.duration\" [bizdocTooltip]=\"l.duration|amDurationFormat\" class=\"duration\">&nbsp;({{l.duration | amDuration:'s'}})</span>\r\n        </ng-container>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"l.note\">{{l.note}}</span>\r\n        <button mat-icon-button *ngIf=\"l.type==='ModelChange'\" (click)=\"compare(l)\" [bizdocTooltip]=\"'Compare'|translate\" bizdocTooltipPosition=\"start\"><mat-icon>more_horiz</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{width:100%}table{width:100%;background:transparent}table td{padding:0 4px}.duration{white-space:nowrap}\n"], components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "translate": TranslatePipe, "sanitizeHtml": SanitizeHtmlPipe, "amDurationFormat": DurationFormatPipe, "amDuration": DurationPipe, "amCalendar": CalendarPipe }, animations: [listAnimation, itemAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TraceViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-trace', animations: [listAnimation, itemAnimation], template: "<div class=\"nav-toolbar row\">\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" [bizdocTooltip]=\"'ShowAll'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n  <mat-menu #menu> \r\n    <button mat-menu-item (click)=\"showAll=false\">\r\n      <mat-icon>{{ !showAll?'check':'' }}</mat-icon>\r\n      <span>{{'Route' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showAll=true\">\r\n      <mat-icon>{{showAll?'check':''}}</mat-icon>\r\n      <span>{{'Log' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n<table class=\"mat-table\" @list>\r\n  <tbody role=\"rowgroup\">\r\n    <tr class=\"mat-row\" *ngFor=\"let l of data\" @item>\r\n      <td class=\"mat-cell\">\r\n        <span [innerHTML]=\"l.name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n        <span *ngIf=l.role>{{'JoinComma'|translate}}{{l.role}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <ng-container [ngSwitch]=\"l.type\">\r\n          <ng-container *ngSwitchCase=\"'ActionTaken'\">\r\n            <span [innerHTML]=\"l.action | sanitizeHtml\" (click)=\"chat($event)\" class=\"to\"></span>\r\n          </ng-container>\r\n          <span *ngSwitchCase=\"'Submit'\">{{'Issued' | translate}}</span>\r\n          <span *ngSwitchCase=\"'Pending'\">{{'IsPending' | translate}}</span>\r\n          <span *ngSwitchCase=\"'CheckOut'\">{{'CheckedIn' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'CheckIn'\">{{'CheckedOut' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'Estimate'\">{{'Estimate' | translate}}</span>\r\n          <span *ngSwitchCase=\"'ModelChange'\">{{'Changed' | translate}}</span>\r\n        </ng-container>\r\n        <span *ngIf=\"l.fyi\">&nbsp;{{'FYI'|translate}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\" [ngSwitch]=\"l.estimate\">\r\n        <ng-container *ngSwitchCase=\"true\">\r\n          <span *ngIf=\"l.durationMax && l.durationMax === l.durationMin\" [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>\r\n          <span *ngIf=\"l.durationMax && l.durationMax !== l.durationMin\"\r\n                [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTimeRange'| translate : (l.durationMin | amDuration:'s') : (l.durationMax | amDuration:'s')}}</span>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <span>{{l.time | amCalendar : null : CALENDAR_SPEC }}</span>\r\n          <span *ngIf=\"l.duration\" [bizdocTooltip]=\"l.duration|amDurationFormat\" class=\"duration\">&nbsp;({{l.duration | amDuration:'s'}})</span>\r\n        </ng-container>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"l.note\">{{l.note}}</span>\r\n        <button mat-icon-button *ngIf=\"l.type==='ModelChange'\" (click)=\"compare(l)\" [bizdocTooltip]=\"'Compare'|translate\" bizdocTooltipPosition=\"start\"><mat-icon>more_horiz</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{width:100%}table{width:100%;background:transparent}table td{padding:0 4px}.duration{white-space:nowrap}\n"] }]
+            args: [{ selector: 'bizdoc-trace', animations: [listAnimation, itemAnimation], template: "<div class=\"nav-toolbar row\">\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"menu\" [bizdocTooltip]=\"'ShowAll'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n  <mat-menu #menu> \r\n    <button mat-menu-item (click)=\"showAll=false\">\r\n      <mat-icon>{{ !showAll?'check':'' }}</mat-icon>\r\n      <span>{{'Route' | translate }}</span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"showAll=true\">\r\n      <mat-icon>{{showAll?'check':''}}</mat-icon>\r\n      <span>{{'Everything' | translate }}</span>\r\n    </button>\r\n  </mat-menu>\r\n</div>\r\n<table class=\"mat-table\" @list>\r\n  <tbody role=\"rowgroup\">\r\n    <tr class=\"mat-row\" *ngFor=\"let l of data\" @item>\r\n      <td class=\"mat-cell\">\r\n        <span [innerHTML]=\"l.name | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n        <span *ngIf=l.role>{{'JoinComma'|translate}}{{l.role}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <ng-container [ngSwitch]=\"l.type\">\r\n          <ng-container *ngSwitchCase=\"'ActionTaken'\">\r\n            <span [innerHTML]=\"l.action | sanitizeHtml\" (click)=\"chat($event)\" class=\"to\"></span>\r\n          </ng-container>\r\n          <span *ngSwitchCase=\"'Submit'\">{{'Issued' | translate}}</span>\r\n          <span *ngSwitchCase=\"'Pending'\">{{'IsPending' | translate}}</span>\r\n          <span *ngSwitchCase=\"'CheckOut'\">{{'CheckedIn' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'CheckIn'\">{{'CheckedOut' | translate : l.fileName}}</span>\r\n          <span *ngSwitchCase=\"'Estimate'\">{{'Estimate' | translate}}</span>\r\n          <span *ngSwitchCase=\"'ModelChange'\">{{'Changed' | translate}}</span>\r\n        </ng-container>\r\n        <span *ngIf=\"l.fyi\">&nbsp;{{'FYI'|translate}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\" [ngSwitch]=\"l.estimate\">\r\n        <ng-container *ngSwitchCase=\"true\">\r\n          <span *ngIf=\"l.durationMax && l.durationMax === l.durationMin\" [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>\r\n          <span *ngIf=\"l.durationMax && l.durationMax !== l.durationMin\"\r\n                [bizdocTooltip]=\"l.durationMax|amDurationFormat\">{{'EstimateTimeRange'| translate : (l.durationMin | amDuration:'s') : (l.durationMax | amDuration:'s')}}</span>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <span>{{l.time | amCalendar : null : CALENDAR_SPEC }}</span>\r\n          <span *ngIf=\"l.duration\" [bizdocTooltip]=\"l.duration|amDurationFormat\" class=\"duration\">&nbsp;({{l.duration | amDuration:'s'}})</span>\r\n        </ng-container>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"l.note\">{{l.note}}</span>\r\n        <button mat-icon-button *ngIf=\"l.type==='ModelChange'\" (click)=\"compare(l)\" [bizdocTooltip]=\"'Compare'|translate\" bizdocTooltipPosition=\"start\"><mat-icon>more_horiz</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{width:100%}table{width:100%;background:transparent}table td{padding:0 4px}.duration{white-space:nowrap}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: TranslateService }, { type: AccountService }, { type: ChatInfo }, { type: HubService }]; }, propDecorators: { model: [{
                 type: Input
             }], versionSelected: [{