@bizdoc/core 1.13.0-next.2 → 1.13.0-next.6

package/fesm2020/bizdoc-core.mjs

@@ -127,7 +127,7 @@ import { Spreadsheet, isNumber, SpreadsheetModule, SelectionService as Selection
 import * as i4$1 from '@ctrl/ngx-emoji-mart';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import * as i11$1 from '@syncfusion/ej2-angular-diagrams';
-import { Diagram, UndoRedo, ConnectorDrawingTool, DiagramConstraints, DiagramTools, NodeConstraints, ConnectorConstraints, SelectorConstraints, Node, SymbolPaletteComponent, ComplexHierarchicalTree, BpmnDiagrams, DataBinding, ConnectionPointOrigin, SnapConstraints, ComplexHierarchicalTreeService, DiagramModule, SymbolPaletteModule, ConnectorBridgingService, LineRoutingService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, ToolBase } from '@syncfusion/ej2-angular-diagrams';
+import { Diagram, UndoRedo, ConnectorDrawingTool, DiagramConstraints, DiagramTools, NodeConstraints, ConnectorConstraints, SelectorConstraints, Node, SymbolPaletteComponent, ComplexHierarchicalTree, BpmnDiagrams, DataBinding, LineDistribution, ConnectionPointOrigin, SnapConstraints, ComplexHierarchicalTreeService, DiagramModule, SymbolPaletteModule, ConnectorBridgingService, LineRoutingService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, ToolBase } from '@syncfusion/ej2-angular-diagrams';
 import * as i9$2 from '@syncfusion/ej2-angular-schedule';
 import { Schedule, Day, WorkWeek, Month, MonthAgenda, Agenda, Year, ScheduleModule, ExcelExportService as ExcelExportService$2, DayService, WorkWeekService, MonthService, MonthAgendaService, ICalendarExportService, AgendaService, YearService } from '@syncfusion/ej2-angular-schedule';
 import * as i10$2 from '@syncfusion/ej2-angular-kanban';
@@ -1239,6 +1239,8 @@ class MailboxService {
         };
         messaging.new$.
             subscribe(m => {
+            if (m.userId !== _session.profile.userId)
+                return;
             _session.profile.inboxCount++;
             const folder = _session.profile.folders.find(f => f.name === m.model.folderId);
             folder.count++;
@@ -1923,7 +1925,7 @@ const STRINGS = {
         NoEstimate: '(No estimate)',
         EstimateTime: '(Estimated time {0})',
         NodeStandardTime: '(Standard time: {0})',
-        EstimateTimeRange: '(Estimated time {0} - {1})',
+        EstimateTimeRange: '(Estimated time between {0} and {1})',
         Connect: 'Connect',
         Requirments: 'Requirments',
         Anyone: 'Anyone',
@@ -2343,6 +2345,7 @@ const STRINGS = {
         Votes: 'Votes',
         Tasks: 'Tasks',
         System: 'System',
+        Everything: 'Everything',
         NothingHere: 'Nothing to see here',
         Matrix: 'Matrix',
         Working: 'Working on it...'
@@ -2379,7 +2382,7 @@ const STRINGS = {
         Skipped: '- דולג',
         Route: 'חותמים',
         Trace: 'הסטוריה',
-        Log: 'הסטוריה',
+        Everything: 'הסטוריה',
         ProfilerSearchHelp: 'הקלד/י שם משתמש ובחר/י מהרשימה כדי לסקור פעולותיו.',
         TraceSearchHelp: 'הקלד/י מספר מסמך ובחר/י כדי לעקוב אחרי תנועותיו.',
         DiagramVersion: 'גרסה {0}',
@@ -6928,7 +6931,7 @@ class ExpandedItemComponent {
         this._refreshTask = setInterval(() => this._refresh(), REFRESH_TIME);
     }
     async _note() {
-        const { ownerId, issued, substitutingId, received, replied, log, id, note, byId, action, toId } = this.item;
+        const { ownerId, issued, substitutingId, received, replied, log, id, note, byId, action, toId, escalated } = this.item;
         if (substitutingId) {
             this._accounts.get(substitutingId).subscribe(u => {
                 if (replied) {
@@ -6938,19 +6941,15 @@ class ExpandedItemComponent {
                     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 escalations = issued &&
-                        log.filter(l => l.time > issued &&
-                            l.type === 'Escalation'
-                            && l.recipientId === id);
-                    if (escalations && escalations.length) {
-                        const duration = dayjs(escalations[0].time).diff(received, 's');
-                        this.note = this._translate.personalize('EscalatedFrom', u.gender, this._formatUserElement(u), this._duration(duration));
-                    }
-                    else {
-                        const time = this._fromNow(received);
-                        this.note = this._translate.personalize('SubstitutingNote', u.gender, this._formatUserElement(u), time, note || '');
-                    }
+                    const time = this._fromNow(received);
+                    this.note = this._translate.personalize('SubstitutingNote', u.gender, this._formatUserElement(u), time, note || '');
                 }
             });
         }
@@ -6959,9 +6958,9 @@ class ExpandedItemComponent {
             if (byId) {
                 if (byId === this._session.profile.byId) {
                     if (toId)
-                        this._accounts.get(toId).subscribe(u => this.note = this._translate.get('ActionTakenByYou', this._actionName(action, 'you'), this._formatUserElement(u), this._session.profile.name, time));
+                        this._accounts.get(toId).subscribe(u => this.note = this._translate.get('ActionTakenByYouTo', this._actionName(action, 'you'), this._formatUserElement(u), this._session.profile.name, time));
                     else
-                        this.note = this._translate.get('ActionTakenByYouTo', this._actionName(action, 'you'), this._session.profile.name, time);
+                        this.note = this._translate.get('ActionTakenByYou', this._actionName(action, 'you'), this._session.profile.name, time);
                 }
                 else
                     this._accounts.get(byId).subscribe(u => {
@@ -7245,7 +7244,7 @@ class BrowseItemsComponent {
                 this._remove(item);
         });
         this._messaging.new$.pipe(takeUntil(this._destroy)).subscribe(m => {
-            if (!this.dataSource)
+            if (!this.dataSource || m.userId !== this._session.profile.userId)
                 return;
             const item = this.dataSource.data.find(c => c.id === m.model.id);
             if (!item && this.folderId === m.model.folderId) {
@@ -8450,7 +8449,7 @@ class ComposeFormComponent {
                     return this._mailbox.send(id, version, formId, model, action, params).
                         subscribe(r => {
                         if (r.toId)
-                            this._accounts.get(r.toId).subscribe(u => this._sb.toast('Sent', number, this._getActionAdjective(action), u.name));
+                            this._accounts.get(r.toId).subscribe(u => this._sb.toast('SentTo', number, this._getActionAdjective(action), u.name));
                         else
                             this._sb.toast('Sent', number, this._getActionAdjective(action));
                         this.working = false;
@@ -11925,6 +11924,7 @@ class ExploreItemsComponent {
         });
     }
     _datasource(data) {
+        this._data = data;
         this.dataSource = new MatTableDataSource(data);
         this.dataSource.sort = this.sort;
         this.dataSource.paginator = this.paginator;
@@ -11949,7 +11949,7 @@ class ExploreItemsComponent {
                     }
                 }))
             }];
-        this.dataSource.data.forEach((r, i) => rows.push({
+        this._data.forEach((r, i) => rows.push({
             index: i + 2,
             cells: this.columns.map((c, j) => {
                 const isnumber = c.type === 'Currency' || c.type === 'Number';
@@ -12054,6 +12054,7 @@ class CubeExplorePaneComponent {
                 relativeTo: this._pane,
                 queryParams: this.axes,
                 state: { item },
+                policy: OpenPolicy.Tab | OpenPolicy.Dismissable,
                 group: this._pane.group
             });
             this.loading = false;
@@ -13173,8 +13174,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 /*, 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', 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 */
@@ -13190,19 +13193,20 @@ 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,
-            verticalAlignment: 'Top',
+            horizontalAlignment: 'Center',
             connectionDirection: 'Orientation',
             orientation: this._session.inverse ? 'RightToLeft' : 'LeftToRight',
-            margin: { left: 10, right: 10, top: 10, bottom: 10 }
         };
         this.scrollSettings = {
             minZoom: .5,
+            scrollLimit: 'Limited',
             canAutoScroll: true,
             currentZoom: 1.2,
             padding: { top: 0, bottom: 0 },
@@ -13285,7 +13289,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';
@@ -13296,7 +13299,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;
         }
@@ -13391,7 +13395,7 @@ class FlowViewComponent extends TraceBase {
                                 }
                             }]
                     };
-                    if (r > 0) {
+                    if (r > 0)
                         dconnectors.forEach(c => {
                             if (c.targetId === node.id)
                                 connectors.push({
@@ -13401,7 +13405,10 @@ class FlowViewComponent extends TraceBase {
                                         estimate: c.estimate
                                     }
                                 });
-                            if (c.sourceId === node.id)
+                            if (c.sourceId === node.id) {
+                                // 
+                                if (c.virtual && c.originId !== recipient.id)
+                                    return;
                                 connectors.push({
                                     sourceID: nod.id,
                                     targetID: c.targetId,
@@ -13409,8 +13416,8 @@ class FlowViewComponent extends TraceBase {
                                         estimate: c.estimate
                                     }
                                 });
+                            }
                         });
-                    }
                     nodes.push(nod);
                     if (recipient.action) {
                         const action = this._session.profile.actions.find(a => a.name === recipient.action);
@@ -13433,56 +13440,40 @@ class FlowViewComponent extends TraceBase {
                             indicators.push(actionIndicator);
                         }
                     }
-                    if (recipient.pending && !recipient.estimate)
+                    if (recipient.fyi)
                         indicators.push({
-                            id: nod.id + 'pending',
+                            id: nod.id + 'fyi',
                             shape: {
                                 type: 'Path',
-                                data: PENDING_PATH,
-                                align: this._session.inverse ? 'XMaxYMax' : 'XMinYMax'
+                                data: FYI_PATH,
+                                align: this._session.inverse ? 'XMinYMax' : 'XMaxYMax'
                             },
                             style: {
-                                fill: this._session.getAccent(900)
+                                fill: '#1976d2'
                             },
                             addInfo: {
                                 indicator: true,
                                 parentId: nod.id
                             }
                         });
-                    if (recipient.fyi)
-                        indicators.push({
-                            id: nod.id + 'fyi',
+                    if (recipient.escalated) {
+                        const escalateIndicator = {
+                            id: nod.id + 'escalate',
                             shape: {
                                 type: 'Path',
-                                data: FYI_PATH,
+                                data: ESCALATED_PATH,
                                 align: this._session.inverse ? 'XMinYMax' : 'XMaxYMax'
                             },
                             style: {
-                                fill: '#1976d2'
+                                fill: this._session.getAccent(900)
                             },
                             addInfo: {
                                 indicator: true,
                                 parentId: nod.id
                             }
-                        });
-                    //  if (this.model.log.filter(l => l.time > this._submitted && l.type === 'Escalation' && l.recipientId === recipient.id).length) {
-                    //    const escalateIndicator = {
-                    //      id: nod.id + 'escalate',
-                    //      shape: {
-                    //        type: 'Path',
-                    //        data: ESCALATED_PATH,
-                    //        align: this._session.inverse ? 'XMinYMax' : 'XMaxYMax'
-                    //      },
-                    //      style: {
-                    //        fill: this._session.getAccent(900)
-                    //      },
-                    //      addInfo: {
-                    //        indicator: true,
-                    //        parentId: nod.id
-                    //      } as NodeInfoModel
-                    //    } as NodeModel;
-                    //    indicators.push(escalateIndicator);
-                    //  }
+                        };
+                        indicators.push(escalateIndicator);
+                    }
                 }
             }
             else {
@@ -13549,36 +13540,6 @@ class FlowViewComponent extends TraceBase {
                 }
             }
         }
-        /**
-         *
-         * @param connector
-         * @param index
-         * @param vconnectors
-         */
-        function reroute(connector, index) {
-            while (index < dconnectors.length) {
-                let dconnector = dconnectors[index];
-                if (dconnector.sourceId === connector.targetId) {
-                    if (nodes.some(n => n.id === dconnector.targetId))
-                        connectors.push({
-                            sourceID: connector.sourceId,
-                            targetID: dconnector.targetId,
-                            addInfo: {
-                                estimate: dconnector.estimate,
-                                time: dconnector.time
-                            }
-                        });
-                    else
-                        reroute({
-                            time: dconnector.time,
-                            targetId: dconnector.targetId,
-                            estimate: dconnector.estimate,
-                            sourceId: connector.sourceId
-                        }, index + 1);
-                }
-                index++;
-            }
-        }
         return { connectors, nodes, indicators };
     }
     /**
@@ -13594,7 +13555,7 @@ class FlowViewComponent extends TraceBase {
         const stateLog = log.find(l => l.type === 'StateChange');
         if (stateLog) {
             state = this._session.profile.states.find(s => s.name === stateLog.state);
-            annotation = state ? ((node.estimate ? state.future : state.past) || state.title) : stateLog.state;
+            annotation = (node.estimate ? state.future : state.past) || state.title;
         }
         if (node.type === START_NODE) {
             if (!node.estimate) {
@@ -13615,8 +13576,8 @@ class FlowViewComponent extends TraceBase {
         const { min, max } = super._estimateTime(node);
         if (max)
             return !min || min === max ?
-                this._translate.get('EstimateTime', this._duration.transform(max)) :
-                this._translate.get('EstimateTimeRange', this._duration.transform(min), this._duration.transform(max));
+                this._translate.get('EstimateTime', dayjs.duration(max).humanize()) :
+                this._translate.get('EstimateTimeRange', dayjs.duration(min).humanize(), dayjs.duration(max).humanize());
     }
     _tooltip(obj) {
         const { note, role, substituting, escalation, duration, standardTime, estimatedTime, error, fyi } = obj;
@@ -13770,11 +13731,25 @@ class FlowViewComponent extends TraceBase {
                 tooltip.substituting = this._translate.personalize('SubstitutingFor', substituting.gender, substituting.name);
             }
         }
-        const escalations = this.model.log.filter(l => l.time > this._issued && l.type === 'Escalation' && l.recipientId === recipient.id);
-        if (escalations.length) {
+        if (recipient.originId) {
+            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);
+                }
+                else {
+                    const who = await this._accounts.get(id).toPromise();
+                    tooltip.substituting = this._translate.get('By', who.name, name);
+                }
+            }
+        }
+        if (recipient.escalated) {
+            const escalations = this.model.log.filter(l => l.type === 'Escalation' && l.recipientId === recipient.id);
             const userIds = escalations.map(e => e.userId);
             const users = await this._accounts.getAll(userIds).toPromise();
-            const duration = this._duration.transform(dayjs(escalations[escalations.length - 1].time).diff(recipient.received, 's'));
+            const duration = this._duration.transform(dayjs.duration(escalations[escalations.length - 1].duration, 's'));
             tooltip.escalation = this._translate.get('EscalatedTo', this._translate.join(users.map(u => u.name)), duration);
         }
         if (recipient.replied) {
@@ -14103,30 +14078,28 @@ class TraceViewComponent extends TraceBase {
                         step.role = by.role;
                 }
             }
-            else {
+            else if (recipient.escalated) {
                 let escalations = this.model.log.filter(l => l.time > issued &&
                     l.type === 'Escalation' && l.recipientId === recipient.id);
-                if (escalations.length) {
-                    let escalate = [];
-                    for (let escalation of escalations) {
-                        let who = await profileOf(escalation.userId);
-                        escalate.push(who);
-                    }
-                    let who = await profileOf(recipient.userId);
-                    if (escalations.length === 1 && escalate[0] === this._session.userId)
-                        step.name = this._translate.get('EscalatedByYou', nameOf(who));
-                    else
-                        step.name = this._translate.get('EscalatedBy', nameOf(who), this._translate.join(escalate.map(e => nameOf(e))));
+                let escalate = [];
+                for (let escalation of escalations) {
+                    let who = await profileOf(escalation.userId);
+                    escalate.push(who);
                 }
+                let who = await profileOf(recipient.userId);
+                if (escalations.length === 1 && escalate[0] === this._session.userId)
+                    step.name = this._translate.get('EscalatedByYou', nameOf(who));
+                else
+                    step.name = this._translate.get('EscalatedBy', nameOf(who), this._translate.join(escalate.map(e => nameOf(e))));
+            }
+            else {
+                if (recipient.userId === this._session.userId)
+                    step.name = this._translate.get('You');
                 else {
-                    if (recipient.userId === this._session.userId)
-                        step.name = this._translate.get('You');
-                    else {
-                        let who = await profileOf(recipient.userId);
-                        step.name = nameOf(who);
-                        if (who.role)
-                            step.role = who.role;
-                    }
+                    let who = await profileOf(recipient.userId);
+                    step.name = nameOf(who);
+                    if (who.role)
+                        step.role = who.role;
                 }
             }
             trace.push(step);
@@ -14164,10 +14137,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: [{
@@ -17222,7 +17195,7 @@ class HomeBase {
         this._messaging.new$.subscribe(m => {
             const { model: { formId: name, subject, number } } = m;
             const form = this._session.profile.forms.find(f => f.name === name), msg = this._translate.get('NewMail', form.title, number, subject || '');
-            this._snackBar.open(msg, this._translate.get('OpenNew'), {
+            this._snackBar.open(msg, m.userId === this._session.profile.userId ? this._translate.get('OpenNew') : null, {
                 duration: 5000,
                 direction: this._session.direction,
                 politeness: 'assertive'
@@ -18655,7 +18628,7 @@ class SlotsComponent {
     }
 }
 SlotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SlotsComponent, deps: [{ token: PANES_DATA }, { token: PromptService }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PanesRouter }, { token: WindowTitleService }, { token: GuideService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SlotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SlotsComponent, selector: "bizdoc-panes", host: { listeners: { "document:keydown.escape": "collapse()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["paning"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabing"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"mat-icon-rtl-mirror\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\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: QuickToolsComponent, selector: "bizdoc-quicktools" }, { type: i9$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: NgxComponentOutlet, selector: "ngx-component-outlet", inputs: ["type", "injector", "ngxComponentOutletContent"], outputs: ["create"] }, { type: i9$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe }, animations: [panesAnimation,
+SlotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SlotsComponent, selector: "bizdoc-panes", host: { listeners: { "document:keydown.escape": "collapse()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["paning"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabing"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\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: QuickToolsComponent, selector: "bizdoc-quicktools" }, { type: i9$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: NgxComponentOutlet, selector: "ngx-component-outlet", inputs: ["type", "injector", "ngxComponentOutletContent"], outputs: ["create"] }, { type: i9$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe }, animations: [panesAnimation,
         panesTitleAnimation,
         paneAnimation,
         paramAnimation,
@@ -18672,7 +18645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         queryAnimation,
                         tabsAnimation,
                         tabAnimation
-                    ], template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"mat-icon-rtl-mirror\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"] }]
+                    ], template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PANES_DATA]
@@ -26377,7 +26350,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 args: ['attr.aria-describedby']
             }] } });
 
-dayjs.extend(relativeTime);
+// https://day.js.org/docs/en/customization/relative-time
+dayjs.extend(relativeTime, {
+    thresholds: [
+        { l: 's', r: 1 },
+        { l: 'm', r: 1 },
+        { l: 'mm', r: 59, d: 'minute' },
+        { l: 'h', r: 1 },
+        { l: 'hh', r: 24, d: 'hour' },
+        { l: 'd', r: 1 },
+        { l: 'dd', r: 29, d: 'day' },
+        { l: 'M', r: 1 },
+        { l: 'MM', r: 11, d: 'month' },
+        { l: 'y' },
+        { l: 'yy', d: 'year' }
+    ]
+});
 dayjs.extend(duration);
 dayjs.extend(calendar);
 const CORE_COMPONENTS = [CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
@@ -26759,34 +26747,30 @@ class TraceElementComponent {
             this.none = log.length === 0,
             this.nodeType = this._session.profile.nodes.find(n => n.name === addInfo.nodeType);
     }
-    recipientInfo(recipient) {
-        const observables = [], observe = this._accounts.get(recipient.userId);
-        observables.push(observe);
-        const escalations = this.timeline.log.filter(l => l.time > this.timeline.startDate && l.type === 'Escalation' && l.recipientId === recipient.id);
-        if (escalations.length)
-            escalations.forEach(e => {
-                const observe = this._accounts.get(e.userId);
-                observables.push(observe);
-            });
-        else if (recipient.byId) {
-            const observe = this._accounts.get(recipient.byId);
-            observables.push(observe);
+    async recipientInfo(recipient) {
+        const info = [];
+        const who = await this._accounts.get(recipient.userId).toPromise();
+        if (recipient.escalated) {
+            const escalations = this.timeline.log.filter(l => l.type === 'Escalation' && l.recipientId === recipient.id);
+            const escalate = await this._accounts.get(escalations[0].userId).toPromise();
+            info.push(this._translate.get('EscalatedBy', this._chat.format(escalate), this._chat.format(who)));
         }
         if (recipient.substitutingId) {
-            const observe = this._accounts.get(recipient.substitutingId);
-            observables.push(observe);
+            const substitute = await this._accounts.get(recipient.substitutingId).toPromise();
+            if (recipient.byId) {
+                const by = await this._accounts.get(recipient.byId).toPromise();
+                info.push(this._translate.get('SubstitutingBy', this._chat.format(who), this._chat.format(substitute), this._chat.format(by)));
+            }
+            else
+                info.push(this._translate.get('Substituting', this._chat.format(who), this._chat.format(substitute)));
         }
-        return forkJoin(observables).pipe(map(us => us.map(u => this._chat.format(u))), map(us => {
-            if (escalations.length)
-                return this._translate.get('EscalatedBy', us[0], this._translate.join(us.slice(1)));
-            else if (recipient.byId && recipient.substitutingId)
-                return this._translate.get('SubstitutingBy', us[0], us[2], us[1]);
-            else if (recipient.substitutingId)
-                return this._translate.get('Substituting', us[0], us[1]);
-            else if (recipient.byId)
-                return this._translate.get('By', us[0], us[1]);
-            return us[0];
-        }));
+        else if (recipient.byId) {
+            const by = await this._accounts.get(recipient.byId).toPromise();
+            info.push(this._translate.get('By', this._chat.format(who), this._chat.format(by)));
+        }
+        else
+            info.push(this._chat.format(who));
+        return info.join(this._translate.comma);
     }
     logInfo(log) {
         const observables = [];