@bizdoc/core 1.13.34 → 1.13.36

package/fesm2015/bizdoc-core.mjs

@@ -121,7 +121,7 @@ import { Platform } from '@angular/cdk/platform';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i25 from '@angular/flex-layout/extended';
 import * as i8$3 from '@syncfusion/ej2-angular-charts';
-import { AccumulationChart, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationLegend, Export, PieSeries, Chart as Chart$1, Category, DateTime, Tooltip as Tooltip$1, Legend, BarSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, ChartModule, AccumulationChartAllModule, SparklineAllModule, AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService, SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService, StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService, BarSeriesService, StackingBarSeriesService, RangeColumnSeriesService, BubbleSeriesService, TooltipService, CrosshairService, CategoryService, DateTimeService, LogarithmicService, LegendService, ZoomService, DataLabelService, SelectionService, ChartAnnotationService, WaterfallSeriesService, RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService, MultiLevelLabelService, ParetoSeriesService, TooltipRenderService, ExportService, AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService, AccumulationChartComponent, ChartComponent } from '@syncfusion/ej2-angular-charts';
+import { AccumulationChart, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationLegend, Export, PieSeries, Chart as Chart$1, Category, DateTime, Tooltip as Tooltip$1, Legend, BarSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule, RangeTooltipService, AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService, SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService, StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService, BarSeriesService, StackingBarSeriesService, RangeColumnSeriesService, BubbleSeriesService, TooltipService, CrosshairService, CategoryService, DateTimeService, LogarithmicService, LegendService, ZoomService, DataLabelService, SelectionService, ChartAnnotationService, WaterfallSeriesService, RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService, MultiLevelLabelService, ParetoSeriesService, TooltipRenderService, SparklineTooltipService, AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService, AccumulationChartComponent, ChartComponent } from '@syncfusion/ej2-angular-charts';
 import { Workbook } from '@syncfusion/ej2-excel-export';
 import { Chart } from '@syncfusion/ej2-charts';
 import * as i6$5 from '@syncfusion/ej2-angular-grids';
@@ -132,8 +132,8 @@ import * as i9$5 from '@syncfusion/ej2-angular-spreadsheet';
 import { Spreadsheet, isNumber, SpreadsheetModule, SelectionService as SelectionService$2, BasicModuleService, ClipboardService, CellFormatService, KeyboardNavigationService, KeyboardShortcutService, NumberFormatService } from '@syncfusion/ej2-angular-spreadsheet';
 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, LineDistribution, ConnectionPointOrigin, SnapConstraints, ComplexHierarchicalTreeService, DiagramModule, SymbolPaletteModule, ConnectorBridgingService, LineRoutingService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, ToolBase } from '@syncfusion/ej2-angular-diagrams';
+import { Diagram, BpmnDiagrams, UndoRedo, ConnectorBridging, ConnectorEditing, Snapping, DataBinding, SymbolPalette, ConnectorDrawingTool, DiagramConstraints, DiagramTools, NodeConstraints, ConnectorConstraints, SelectorConstraints, Node } from '@syncfusion/ej2-diagrams';
+import { Diagram as Diagram$1, ComplexHierarchicalTree, BpmnDiagrams as BpmnDiagrams$1, DataBinding as DataBinding$1, LineDistribution, DiagramTools as DiagramTools$1, DiagramConstraints as DiagramConstraints$1, ConnectionPointOrigin, SnapConstraints, NodeConstraints as NodeConstraints$1, ComplexHierarchicalTreeService, DiagramModule, SymbolPaletteModule, ConnectorBridgingService, LineRoutingService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, ToolBase, SelectorConstraints as SelectorConstraints$1, ConnectorConstraints as ConnectorConstraints$1 } 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$1 from '@syncfusion/ej2-angular-kanban';
@@ -141,12 +141,13 @@ import { KanbanComponent, KanbanModule } from '@syncfusion/ej2-angular-kanban';
 import { CircularGaugeModule, AnnotationsService, GaugeTooltipService, LegendService as LegendService$1, CircularGauge, Annotations, GaugeTooltip, CircularGaugeComponent, Legend as Legend$1 } from '@syncfusion/ej2-angular-circulargauge';
 import { PivotViewModule, ExcelExportService as ExcelExportService$1, GroupingBarService, NumberFormattingService, GroupingService, PivotChartService, ConditionalFormattingService, PivotView as PivotView$1, ExcelExport as ExcelExport$2, PivotViewComponent } from '@syncfusion/ej2-angular-pivotview';
 import * as i7$5 from '@syncfusion/ej2-angular-gantt';
-import { GanttModule, Gantt, SelectionService as SelectionService$3, DayMarkersService } from '@syncfusion/ej2-angular-gantt';
-import player from 'lottie-web/build/player/lottie';
+import { GanttModule, ExcelExportService as ExcelExportService$3, DayMarkersService, SelectionService as SelectionService$3, Gantt } from '@syncfusion/ej2-angular-gantt';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import duration from 'dayjs/plugin/duration';
 import calendar from 'dayjs/plugin/calendar';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import player from 'lottie-web/build/player/lottie';
 
 const expandListItemAnimation = trigger('detailExpand', [
     state('collapsed', style({ height: '0px', minHeight: '0', display: '' })),
@@ -7471,10 +7472,8 @@ class ExpandedItemComponent {
                         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));
+                    const escalation = log.find(l => l.type === 'Escalation' && l.recipientId === originId);
+                    this.note = this._translate.personalize('EscalatedFrom', substituting.gender, this._formatUserElement(substituting), this._duration(escalation.duration));
                 }
                 else {
                     const time = this._fromNow(received);
@@ -10893,6 +10892,7 @@ class CubeSpreadsheetComponent {
             enableContextMenu: false,
             showFormulaBar: false,
             showSheetTabs: false,
+            enableKeyboardNavigation: true,
             select: this.select.bind(this),
             sheets: [{
                     columns: this.columns,
@@ -13070,12 +13070,12 @@ class ReportPaneComponent {
     }
 }
 ReportPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ReportPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: Popup }, { token: i0.ChangeDetectorRef }, { token: PromptService }, { token: GuideService }], target: i0.ɵɵFactoryTarget.Component });
-ReportPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: ReportPaneComponent, selector: "bizdoc-report.pane", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "viewer", first: true, predicate: ReportViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide($event)\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"report.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" *ngIf=\"hasFilters\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" *ngIf=\"hasFilters\"><mat-icon [class.filled]=\"anyFilters\">filter_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<bizdoc-report-viewer [report]=\"report\" [args]=\"args\" fxFlex></bizdoc-report-viewer>\r\n", styles: [":host{min-width:560px;display:block;height:100%;display:flex;flex-direction:column}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: ReportViewerComponent, selector: "bizdoc-report-viewer", inputs: ["report", "args"] }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": TranslatePipe } });
+ReportPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: ReportPaneComponent, selector: "bizdoc-report.pane", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "viewer", first: true, predicate: ReportViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide($event)\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"report.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" *ngIf=\"hasFilters\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" *ngIf=\"hasFilters\"><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<bizdoc-report-viewer [report]=\"report\" [args]=\"args\" fxFlex></bizdoc-report-viewer>\r\n", styles: [":host{min-width:560px;display:block;height:100%;display:flex;flex-direction:column}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: ReportViewerComponent, selector: "bizdoc-report-viewer", inputs: ["report", "args"] }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ReportPaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-report.pane', host: {
                         class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide($event)\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"report.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" *ngIf=\"hasFilters\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" *ngIf=\"hasFilters\"><mat-icon [class.filled]=\"anyFilters\">filter_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<bizdoc-report-viewer [report]=\"report\" [args]=\"args\" fxFlex></bizdoc-report-viewer>\r\n", styles: [":host{min-width:560px;display:block;height:100%;display:flex;flex-direction:column}\n"] }]
+                    }, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide($event)\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"report.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" *ngIf=\"hasFilters\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" *ngIf=\"hasFilters\"><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<bizdoc-report-viewer [report]=\"report\" [args]=\"args\" fxFlex></bizdoc-report-viewer>\r\n", styles: [":host{min-width:560px;display:block;height:100%;display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: PaneRef }, { type: Popup }, { type: i0.ChangeDetectorRef }, { type: PromptService }, { type: GuideService }]; }, propDecorators: { viewer: [{
                 type: ViewChild,
                 args: [ReportViewerComponent, { static: true }]
@@ -13267,7 +13267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
-Diagram.Inject(UndoRedo);
+Diagram.Inject(BpmnDiagrams, UndoRedo, ConnectorBridging, ConnectorEditing, Snapping, DataBinding);
+SymbolPalette.Inject(BpmnDiagrams);
 function getPorts$1() {
     const ports = [
         { id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 } },
@@ -13332,7 +13333,6 @@ class WorkflowComponent {
         this.connectorType = 'Bezier';
         this.alignment = 'Center';
         this.fontSize = 12;
-        this.getCustomTool = this.getTool.bind(this);
         this.saving = false;
         this.dirty = false;
         this.palettes = [];
@@ -13403,6 +13403,38 @@ class WorkflowComponent {
             tool = new DrawTool(this.diagram, this.connectorType);
         return tool;
     }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.symbolPalette = new SymbolPalette({
+            expandMode: 'Multiple',
+            palettes: this.palettes,
+            width: "100%", height: "100%", symbolHeight: 80,
+            enableRtl: false, enableAnimation: false, symbolWidth: 80,
+            symbolMargin: this.symbolMargin,
+            getSymbolInfo: this.getSymbolInfo.bind(this),
+            getNodeDefaults: this.getSymbolDefaults.bind(this)
+        });
+        this.symbolPalette.appendTo(this.symbolPaletteEl.nativeElement);
+        this.diagram = new Diagram({
+            width: "100%", height: "100%",
+            snapSettings: this.snapSettings,
+            getConnectorDefaults: this.connDefaults.bind(this),
+            constraints: this.diagramConstraints,
+            tool: this.diagramTool,
+            getNodeDefaults: this.nodeDefaults.bind(this),
+            getCustomTool: this.getTool.bind(this),
+            scrollSettings: this.scrollSettings,
+            selectedItems: this.selectedItems,
+            rulerSettings: this.rulerSettings,
+            dragEnter: this.dragEnter.bind(this),
+            connectionChange: this.change.bind(this),
+            collectionChange: this.change.bind(this),
+            propertyChange: this.propertyChange.bind(this),
+            selectionChange: this.selectionChange.bind(this),
+        }, this.diagramEl.nativeElement);
+        this.diagramCreate();
+    }
     diagramCreate() {
         paletteIconClick();
         this._pane.paramsChange.pipe(takeUntil(this._destroy)).subscribe(p => {
@@ -13431,7 +13463,7 @@ class WorkflowComponent {
                 addInfo: {
                     nodeType: n.name,
                     title: n.title
-                }
+                },
             };
             node.node = n.name;
             let palette = this.palettes.find(p => p.title === (n.palette || ''));
@@ -13609,7 +13641,7 @@ class WorkflowComponent {
         this.dirty = true;
     }
     save() {
-        this.diagram.serializationSettings = {};
+        this.diagram.serializationSettings = { preventDefaults: true };
         const obj = JSON.parse(this.diagram.saveDiagram());
         this._form.workflow.connectors = obj.connectors;
         this._form.workflow.nodes = obj.nodes.filter(n => n.id !== 'version').map((n) => {
@@ -13635,23 +13667,26 @@ class WorkflowComponent {
         });
     }
     ngOnDestroy() {
+        var _a, _b;
+        (_a = this.symbolPalette) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.diagram) === null || _b === void 0 ? void 0 : _b.destroy();
         this._destroy.next();
         this._destroy.complete();
     }
 }
 WorkflowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: WorkflowComponent, deps: [{ token: PromptService }, { token: FormService }, { token: PaneRef }, { token: PanesRouter }, { token: SessionService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-WorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "symbolPalette", first: true, predicate: SymbolPaletteComponent, descendants: true }, { propertyName: "diagram", first: true, predicate: ["diagram"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  &nbsp;\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"addText()\" [bizdocTooltip]=\"'Text' | translate\"><mat-icon>title</mat-icon></button>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"!diagram.selectedItems?.connectors.length\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"!diagram.selectedItems?.nodes.length && !diagram.selectedItems?.connectors.length\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" *ngIf=\"tools\">\r\n  <ejs-symbolpalette dir=\"ltr\" expandMode='Multiple' [palettes]='palettes' width=\"100%\" height=\"100%\" [symbolHeight]=80\r\n                     [enableRtl]=\"false\" [enableAnimation]=\"false\" [symbolWidth]=80 [symbolMargin]='symbolMargin' [getSymbolInfo]='getSymbolInfo' [getNodeDefaults]='getSymbolDefaults'>\r\n  </ejs-symbolpalette>\r\n  </div>\r\n  <ejs-diagram #diagram id=\"diagram\" width=\"100%\" height=\"100%\" dir=\"ltr\" [snapSettings]='snapSettings' [getConnectorDefaults]='connDefaults' fxFlex\r\n               [constraints]=\"diagramConstraints\" [tool]=diagramTool [getNodeDefaults]='nodeDefaults' [getCustomTool]='getCustomTool' [scrollSettings]=\"scrollSettings\"\r\n               [selectedItems]=\"selectedItems\"\r\n               [rulerSettings]=\"rulerSettings\"\r\n               (dragEnter)='dragEnter($event)'\r\n               (connectionChange)=\"change()\"\r\n               (collectionChange)=\"change()\"\r\n               (propertyChange)=\"propertyChange($event)\"\r\n               (selectionChange)=\"selectionChange()\"\r\n               (created)=\"diagramCreate()\">\r\n  </ejs-diagram>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .icon-menu-panel{min-width:0}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i11$1.SymbolPaletteComponent, selector: "ejs-symbolpalette", inputs: ["accessKey", "allowDrag", "connectorDefaults", "enableAnimation", "enablePersistence", "enableRtl", "enableSearch", "expandMode", "filterSymbols", "getConnectorDefaults", "getNodeDefaults", "getSymbolInfo", "getSymbolTemplate", "height", "ignoreSymbolsOnSearch", "locale", "nodeDefaults", "palettes", "symbolDragSize", "symbolHeight", "symbolInfo", "symbolMargin", "symbolPreview", "symbolWidth", "width"], outputs: ["paletteExpanding", "paletteSelectionChange"] }, { type: i11$1.DiagramComponent, selector: "ejs-diagram", inputs: ["addInfo", "annotationTemplate", "backgroundColor", "bridgeDirection", "commandManager", "connectorDefaults", "connectors", "constraints", "contextMenuSettings", "customCursor", "dataSourceSettings", "diagramSettings", "drawingObject", "enablePersistence", "enableRtl", "getConnectorDefaults", "getCustomCursor", "getCustomProperty", "getCustomTool", "getDescription", "getNodeDefaults", "height", "historyManager", "layers", "layout", "locale", "mode", "nodeDefaults", "nodeTemplate", "nodes", "pageSettings", "rulerSettings", "scrollSettings", "selectedItems", "serializationSettings", "setNodeTemplate", "snapSettings", "tool", "tooltip", "updateSelection", "userHandleTemplate", "width"], outputs: ["animationComplete", "click", "collectionChange", "commandExecute", "connectionChange", "contextMenuBeforeItemRender", "contextMenuClick", "contextMenuOpen", "created", "dataLoaded", "doubleClick", "dragEnter", "dragLeave", "dragOver", "drop", "expandStateChange", "fixedUserHandleClick", "historyChange", "historyStateChange", "keyDown", "keyUp", "mouseEnter", "mouseLeave", "mouseOver", "onImageLoad", "onUserHandleMouseDown", "onUserHandleMouseEnter", "onUserHandleMouseLeave", "onUserHandleMouseUp", "positionChange", "propertyChange", "rotateChange", "scrollChange", "segmentCollectionChange", "selectionChange", "sizeChange", "sourcePointChange", "targetPointChange", "textEdit"] }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { 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: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": TranslatePipe } });
+WorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "symbolPaletteEl", first: true, predicate: ["symbolPalette"], descendants: true, static: true }, { propertyName: "diagramEl", first: true, predicate: ["diagram"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  &nbsp;\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"addText()\" [bizdocTooltip]=\"'Text' | translate\"><mat-icon>title</mat-icon></button>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"!diagram.selectedItems?.connectors.length\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"!diagram.selectedItems?.nodes.length && !diagram.selectedItems?.connectors.length\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPalette>\r\n    </div>\r\n  </div>\r\n  <div #diagram id=\"diagram\" fxFlex dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .icon-menu-panel{min-width:0}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { 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: i7$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: WorkflowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-workflow', host: {
                         class: 'pane'
-                    }, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  &nbsp;\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"addText()\" [bizdocTooltip]=\"'Text' | translate\"><mat-icon>title</mat-icon></button>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"!diagram.selectedItems?.connectors.length\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"!diagram.selectedItems?.nodes.length && !diagram.selectedItems?.connectors.length\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" *ngIf=\"tools\">\r\n  <ejs-symbolpalette dir=\"ltr\" expandMode='Multiple' [palettes]='palettes' width=\"100%\" height=\"100%\" [symbolHeight]=80\r\n                     [enableRtl]=\"false\" [enableAnimation]=\"false\" [symbolWidth]=80 [symbolMargin]='symbolMargin' [getSymbolInfo]='getSymbolInfo' [getNodeDefaults]='getSymbolDefaults'>\r\n  </ejs-symbolpalette>\r\n  </div>\r\n  <ejs-diagram #diagram id=\"diagram\" width=\"100%\" height=\"100%\" dir=\"ltr\" [snapSettings]='snapSettings' [getConnectorDefaults]='connDefaults' fxFlex\r\n               [constraints]=\"diagramConstraints\" [tool]=diagramTool [getNodeDefaults]='nodeDefaults' [getCustomTool]='getCustomTool' [scrollSettings]=\"scrollSettings\"\r\n               [selectedItems]=\"selectedItems\"\r\n               [rulerSettings]=\"rulerSettings\"\r\n               (dragEnter)='dragEnter($event)'\r\n               (connectionChange)=\"change()\"\r\n               (collectionChange)=\"change()\"\r\n               (propertyChange)=\"propertyChange($event)\"\r\n               (selectionChange)=\"selectionChange()\"\r\n               (created)=\"diagramCreate()\">\r\n  </ejs-diagram>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .icon-menu-panel{min-width:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: PromptService }, { type: FormService }, { type: PaneRef }, { type: PanesRouter }, { type: SessionService }, { type: TranslateService }]; }, propDecorators: { symbolPalette: [{
+                    }, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  &nbsp;\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"addText()\" [bizdocTooltip]=\"'Text' | translate\"><mat-icon>title</mat-icon></button>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"!diagram.selectedItems?.connectors.length\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-menu-icon\" [ngClass]=\"{'sf-icon-straight-line': connectorType === 'Straight',\r\n          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',\r\n          'sf-icon-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-menu-icon sf-icon-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-menu-icon sf-icon-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-menu-icon sf-icon-beizer-line\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"!diagram.selectedItems?.nodes.length && !diagram.selectedItems?.connectors.length\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'sf-icon-top': alignment === 'Top',\r\n          'sf-icon-left': alignment === 'Left',\r\n          'sf-icon-center': alignment === 'Center',\r\n          'sf-icon-bottom': alignment === 'Bottom',\r\n          'sf-icon-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu panelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons sf-icon-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons sf-icon-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons sf-icon-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons sf-icon-bottom\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons sf-icon-right\"></span>\r\n    </button>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPalette>\r\n    </div>\r\n  </div>\r\n  <div #diagram id=\"diagram\" fxFlex dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.container{flex-grow:1;overflow-y:auto}#diagram{flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}.e-menu-icon{font-family:diagram-icons!important;speak:none;font-size:18px;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::ng-deep .icon-menu-panel{min-width:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: PromptService }, { type: FormService }, { type: PaneRef }, { type: PanesRouter }, { type: SessionService }, { type: TranslateService }]; }, propDecorators: { symbolPaletteEl: [{
                 type: ViewChild,
-                args: [SymbolPaletteComponent]
-            }], diagram: [{
+                args: ['symbolPalette', { static: true }]
+            }], diagramEl: [{
                 type: ViewChild,
-                args: ['diagram']
+                args: ['diagram', { static: true }]
             }], handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -13842,7 +13877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
             args: [{ name: 'amDurationFormat' }]
         }], ctorParameters: function () { return [{ type: TranslateService }]; } });
 
-Diagram.Inject(ComplexHierarchicalTree, BpmnDiagrams, DataBinding, LineDistribution /*, LayoutAnimation, LineRouting, ConnectorBridging*/);
+Diagram$1.Inject(ComplexHierarchicalTree, BpmnDiagrams$1, DataBinding$1, LineDistribution /*, 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';
@@ -13857,11 +13892,11 @@ class FlowViewComponent extends TraceBase {
         this._duration = _duration;
         this._elementRef = _elementRef;
         this.connectorType = 'Orthogonal';
-        this.tool = DiagramTools.ZoomPan;
-        this.diagramConstraints = DiagramConstraints.Default |
-            DiagramConstraints.Pan |
-            DiagramConstraints.LineRouting |
-            DiagramConstraints.Zoom;
+        this.tool = DiagramTools$1.ZoomPan;
+        this.diagramConstraints = DiagramConstraints$1.Default |
+            DiagramConstraints$1.Pan |
+            DiagramConstraints$1.LineRouting |
+            DiagramConstraints$1.Zoom;
         this.layout = {
             type: 'ComplexHierarchicalTree',
             connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
@@ -13900,7 +13935,7 @@ class FlowViewComponent extends TraceBase {
         return __awaiter(this, void 0, void 0, function* () {
             const { connectors, nodes, indicators } = yield this._prepare();
             this.diagram && this.diagram.destroy();
-            this.diagram = new Diagram({
+            this.diagram = new Diagram$1({
                 width: '100%',
                 height: 380,
                 nodes,
@@ -14043,8 +14078,8 @@ class FlowViewComponent extends TraceBase {
                                 position: 'TopCenter'
                             },
                             constraints: content ?
-                                NodeConstraints.Default | NodeConstraints.Tooltip :
-                                NodeConstraints.Default,
+                                NodeConstraints$1.Default | NodeConstraints$1.Tooltip :
+                                NodeConstraints$1.Default,
                             addInfo: {
                                 tooltip,
                                 recipient,
@@ -14134,8 +14169,8 @@ class FlowViewComponent extends TraceBase {
                             position: 'TopCenter'
                         },
                         constraints: content ?
-                            NodeConstraints.Default | NodeConstraints.Tooltip :
-                            NodeConstraints.Default,
+                            NodeConstraints$1.Default | NodeConstraints$1.Tooltip :
+                            NodeConstraints$1.Default,
                         addInfo: {
                             tooltip,
                             node
@@ -14434,11 +14469,10 @@ class FlowViewComponent extends TraceBase {
                 }
             }
             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 = yield this._accounts.getAll(userIds).toPromise();
-                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);
+                const escalation = this.model.log.find(l => l.type === 'Escalation' && l.recipientId === recipient.originId);
+                const who = yield this._accounts.get(escalation.userId).toPromise();
+                const duration = this._duration.transform(dayjs.duration(escalation.duration, 's'));
+                tooltip.escalation = this._translate.get('EscalatedFrom', who.name, duration);
             }
             if (recipient.replied) {
                 const duration = dayjs(recipient.replied).diff(recipient.received, 's');
@@ -14778,18 +14812,14 @@ class TraceViewComponent extends TraceBase {
                     }
                 }
                 else if (recipient.escalated) {
-                    let escalations = this.model.log.filter(l => l.time > issued &&
-                        l.type === 'Escalation' && l.recipientId === recipient.id);
-                    let escalate = [];
-                    for (let escalation of escalations) {
+                    let escalation = this.model.log.find(l => l.type === 'Escalation' && l.recipientId === recipient.originId);
+                    let to = yield profileOf(recipient.userId);
+                    if (escalation.userId === this._session.userId)
+                        step.name = this._translate.get('EscalatedByYou', nameOf(to));
+                    else {
                         let who = yield profileOf(escalation.userId);
-                        escalate.push(who);
+                        step.name = this._translate.get('EscalatedBy', nameOf(who), nameOf(to));
                     }
-                    let who = yield 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)
@@ -20430,10 +20460,10 @@ class ReportComponent {
     }
 }
 ReportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ReportComponent, deps: [{ token: WindowTitleService }, { token: i1$6.ActivatedRoute }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PromptService }, { token: GuideService }], target: i0.ɵɵFactoryTarget.Component });
-ReportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: ReportComponent, selector: "bizdoc-report", viewQueries: [{ propertyName: "filter", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "viewer", first: true, predicate: ReportViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"report.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" *ngIf=\"hasFilters\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" *ngIf=\"hasFilters\"><mat-icon [class.filled]=\"anyFilters\">filter_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\">\r\n  <mat-sidenav-content>\r\n    <bizdoc-report-viewer [report]=\"report\" [args]=\"args\"></bizdoc-report-viewer>\r\n  </mat-sidenav-content>\r\n  <mat-sidenav mode=\"over\" opened=\"false\" #filter position=\"end\">\r\n    <bizdoc-report-arguments *ngIf=\"viewer.reportRef\" [args]=\"args\" (argsChange)=\"argsChange($event)\" [reportRef]=\"viewer.reportRef\"\r\n                             [template]=\"report.argumentsTemplate\" [arguments]=\"report.arguments\"></bizdoc-report-arguments>\r\n  </mat-sidenav>\r\n</mat-sidenav-container>\r\n", styles: [".contents{display:flex;flex-direction:column}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: i9$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i9$4.MatSidenavContent, selector: "mat-sidenav-content" }, { type: ReportViewerComponent, selector: "bizdoc-report-viewer", inputs: ["report", "args"] }, { type: i9$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: ReportArgumentsComponent, selector: "bizdoc-report-arguments", inputs: ["reportRef", "template", "arguments", "args"], outputs: ["argsChange"] }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": TranslatePipe } });
+ReportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: ReportComponent, selector: "bizdoc-report", viewQueries: [{ propertyName: "filter", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "viewer", first: true, predicate: ReportViewerComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"report.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" *ngIf=\"hasFilters\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" *ngIf=\"hasFilters\"><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\">\r\n  <mat-sidenav-content>\r\n    <bizdoc-report-viewer [report]=\"report\" [args]=\"args\"></bizdoc-report-viewer>\r\n  </mat-sidenav-content>\r\n  <mat-sidenav mode=\"over\" opened=\"false\" #filter position=\"end\">\r\n    <bizdoc-report-arguments *ngIf=\"viewer.reportRef\" [args]=\"args\" (argsChange)=\"argsChange($event)\" [reportRef]=\"viewer.reportRef\"\r\n                             [template]=\"report.argumentsTemplate\" [arguments]=\"report.arguments\"></bizdoc-report-arguments>\r\n  </mat-sidenav>\r\n</mat-sidenav-container>\r\n", styles: [".contents{display:flex;flex-direction:column}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: i9$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i9$4.MatSidenavContent, selector: "mat-sidenav-content" }, { type: ReportViewerComponent, selector: "bizdoc-report-viewer", inputs: ["report", "args"] }, { type: i9$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: ReportArgumentsComponent, selector: "bizdoc-report-arguments", inputs: ["reportRef", "template", "arguments", "args"], outputs: ["argsChange"] }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ReportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-report', template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"report.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" *ngIf=\"hasFilters\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" *ngIf=\"hasFilters\"><mat-icon [class.filled]=\"anyFilters\">filter_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\">\r\n  <mat-sidenav-content>\r\n    <bizdoc-report-viewer [report]=\"report\" [args]=\"args\"></bizdoc-report-viewer>\r\n  </mat-sidenav-content>\r\n  <mat-sidenav mode=\"over\" opened=\"false\" #filter position=\"end\">\r\n    <bizdoc-report-arguments *ngIf=\"viewer.reportRef\" [args]=\"args\" (argsChange)=\"argsChange($event)\" [reportRef]=\"viewer.reportRef\"\r\n                             [template]=\"report.argumentsTemplate\" [arguments]=\"report.arguments\"></bizdoc-report-arguments>\r\n  </mat-sidenav>\r\n</mat-sidenav-container>\r\n", styles: [".contents{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'bizdoc-report', template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"viewer.execute()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"viewer.exportExcel()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"report.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" *ngIf=\"hasFilters\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filter($event)\" bizdocTooltip=\"{{'Filter' | translate}}\" *ngIf=\"hasFilters\"><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\">\r\n  <mat-sidenav-content>\r\n    <bizdoc-report-viewer [report]=\"report\" [args]=\"args\"></bizdoc-report-viewer>\r\n  </mat-sidenav-content>\r\n  <mat-sidenav mode=\"over\" opened=\"false\" #filter position=\"end\">\r\n    <bizdoc-report-arguments *ngIf=\"viewer.reportRef\" [args]=\"args\" (argsChange)=\"argsChange($event)\" [reportRef]=\"viewer.reportRef\"\r\n                             [template]=\"report.argumentsTemplate\" [arguments]=\"report.arguments\"></bizdoc-report-arguments>\r\n  </mat-sidenav>\r\n</mat-sidenav-container>\r\n", styles: [".contents{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return [{ type: WindowTitleService }, { type: i1$6.ActivatedRoute }, { type: SessionService }, { type: i0.ChangeDetectorRef }, { type: PromptService }, { type: GuideService }]; }, propDecorators: { filter: [{
                 type: ViewChild,
                 args: [MatSidenav, { static: true }]
@@ -20794,8 +20824,8 @@ Chart$1.Inject(Category, DateTime, Tooltip$1, Legend, Export, BarSeries, AreaSer
 class SyncfusionChartModule {
 }
 SyncfusionChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SyncfusionChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionChartModule, imports: [ChartModule, AccumulationChartAllModule, SparklineAllModule], exports: [ChartModule, AccumulationChartAllModule, SparklineAllModule] });
-SyncfusionChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionChartModule, providers: [AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService,
+SyncfusionChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionChartModule, imports: [ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule], exports: [ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule] });
+SyncfusionChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionChartModule, providers: [RangeTooltipService, AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService,
         SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService,
         StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService,
         BarSeriesService, StackingBarSeriesService, RangeColumnSeriesService, BubbleSeriesService, TooltipService,
@@ -20803,14 +20833,14 @@ SyncfusionChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         SelectionService, ChartAnnotationService, WaterfallSeriesService,
         RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService,
         MultiLevelLabelService, ParetoSeriesService, TooltipRenderService,
-        ExportService,
-        AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService], imports: [[ChartModule, AccumulationChartAllModule, SparklineAllModule], ChartModule, AccumulationChartAllModule, SparklineAllModule] });
+        SparklineTooltipService,
+        AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService], imports: [[ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule], ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionChartModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [ChartModule, AccumulationChartAllModule, SparklineAllModule],
-                    exports: [ChartModule, AccumulationChartAllModule, SparklineAllModule],
-                    providers: [AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService,
+                    imports: [ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule],
+                    exports: [ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule],
+                    providers: [RangeTooltipService, AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService,
                         SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService,
                         StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService,
                         BarSeriesService, StackingBarSeriesService, RangeColumnSeriesService, BubbleSeriesService, TooltipService,
@@ -20818,7 +20848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                         SelectionService, ChartAnnotationService, WaterfallSeriesService,
                         RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService,
                         MultiLevelLabelService, ParetoSeriesService, TooltipRenderService,
-                        ExportService,
+                        SparklineTooltipService,
                         AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService]
                 }]
         }] });
@@ -20953,13 +20983,46 @@ class SyncfusionGanttModule {
 }
 SyncfusionGanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SyncfusionGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionGanttModule, imports: [GanttModule], exports: [GanttModule] });
-SyncfusionGanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionGanttModule, providers: [], imports: [[GanttModule], GanttModule] });
+SyncfusionGanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionGanttModule, providers: [ExcelExportService$3, DayMarkersService, SelectionService$3], imports: [[GanttModule], GanttModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: SyncfusionGanttModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [GanttModule],
                     exports: [GanttModule],
-                    providers: []
+                    providers: [ExcelExportService$3, DayMarkersService, SelectionService$3]
+                }]
+        }] });
+
+// 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);
+dayjs.extend(updateLocale);
+dayjs.extend(advancedFormat);
+class DayJsModule {
+}
+DayJsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: DayJsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DayJsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: DayJsModule });
+DayJsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: DayJsModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: DayJsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [],
                 }]
         }] });
 
@@ -22194,14 +22257,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                 args: [ChartComponent]
             }] } });
 
-var CompareDepartmentsWidget_1;
+var CompareGroupsWidget_1;
 /** */
-let CompareDepartmentsWidget = CompareDepartmentsWidget_1 = class CompareDepartmentsWidget {
+let CompareGroupsWidget = CompareGroupsWidget_1 = class CompareGroupsWidget {
     constructor(_translate, widgetRef, _elementRef, _session) {
         this._translate = _translate;
         this._elementRef = _elementRef;
         this._session = _session;
-        this.id = `department-compare-${CompareDepartmentsWidget_1.nextId++}`;
+        this.id = `groups-compare-${CompareGroupsWidget_1.nextId++}`;
         this.palettes = this._session.accentPalette;
         this.theme = this._session.theme.dark ? 'MaterialDark' : 'Material';
         this.enableRtl = this._session.inverse;
@@ -22363,18 +22426,18 @@ let CompareDepartmentsWidget = CompareDepartmentsWidget_1 = class CompareDepartm
         this._destroy.complete();
     }
 };
-CompareDepartmentsWidget.nextId = 0;
-CompareDepartmentsWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CompareDepartmentsWidget, deps: [{ token: TranslateService }, { token: WidgetRef }, { token: i0.ElementRef }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
-CompareDepartmentsWidget.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: CompareDepartmentsWidget, selector: "ng-component", host: { attributes: { "dir": "ltr" }, properties: { "id": "id" } }, providers: [LineSeriesService, CrosshairService, ColumnSeriesService], viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true }], ngImport: i0, template: '', isInline: true });
-CompareDepartmentsWidget = CompareDepartmentsWidget_1 = __decorate([
+CompareGroupsWidget.nextId = 0;
+CompareGroupsWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CompareGroupsWidget, deps: [{ token: TranslateService }, { token: WidgetRef }, { token: i0.ElementRef }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
+CompareGroupsWidget.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: CompareGroupsWidget, selector: "ng-component", host: { attributes: { "dir": "ltr" }, properties: { "id": "id" } }, providers: [LineSeriesService, CrosshairService, ColumnSeriesService], viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true }], ngImport: i0, template: '', isInline: true });
+CompareGroupsWidget = CompareGroupsWidget_1 = __decorate([
     BizDoc({
-        selector: 'bizdoc-compare-departments'
+        selector: 'bizdoc-compare-groups'
     })
-], CompareDepartmentsWidget);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CompareDepartmentsWidget, decorators: [{
+], CompareGroupsWidget);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: CompareGroupsWidget, decorators: [{
             type: Component,
             args: [{
-                    //templateUrl: './compare-departments.widget.html',
+                    //templateUrl: './compare-groups.widget.html',
                     template: '',
                     providers: [LineSeriesService, CrosshairService, ColumnSeriesService],
                     host: {
@@ -22604,7 +22667,7 @@ PeersPerformanceWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 PeersPerformanceWidget.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: PeersPerformanceWidget, selector: "ng-component", host: { attributes: { "dir": "ltr" }, properties: { "id": "this.id" }, styleAttribute: "display: block" }, viewQueries: [{ propertyName: "gauge", first: true, predicate: CircularGaugeComponent, descendants: true }], ngImport: i0, template: '', isInline: true });
 PeersPerformanceWidget = PeersPerformanceWidget_1 = __decorate([
     BizDoc({
-        selector: 'bizdoc-departmental-performance'
+        selector: 'bizdoc-peers-performance'
     })
 ], PeersPerformanceWidget);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: PeersPerformanceWidget, decorators: [{
@@ -22636,17 +22699,13 @@ let PendingResultsWidget = class PendingResultsWidget {
         this.sort.direction = 'desc';
         this.dataSource.sort = this.sort;
     }
-    asDays(seconds) {
-        const duration = dayjs.duration(seconds, 's');
-        return `${Math.floor(duration.asDays())}:${Math.round(duration.hours())}`;
-    }
     ngOnDestroy() {
         this._destroy.next();
         this._destroy.complete();
     }
 };
 PendingResultsWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: PendingResultsWidget, deps: [{ token: WidgetRef }], target: i0.ɵɵFactoryTarget.Component });
-PendingResultsWidget.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: PendingResultsWidget, selector: "bizdoc-pending-results", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='asDays(element.duration)'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span *ngIf=\"element.standard\" [bizdocTooltip]=\"asDays(element.standard)\">{{ element.standard | amDuration: 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span></td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>  .range {\r\n    white-space: nowrap;\r\n  }\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", "  .range {\n    white-space: nowrap;\n  }\n"], components: [{ type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5$2.MatCellDef, selector: "[matCellDef]" }, { type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "translate": TranslatePipe, "amDuration": DurationPipe }, animations: [
+PendingResultsWidget.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: PendingResultsWidget, selector: "bizdoc-pending-results", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='element.duration|amDurationFormat'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span *ngIf=\"element.standard\" [bizdocTooltip]=\"element.standard|amDurationFormat\">{{ element.standard | amDuration: 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>\r\n  .range {\r\n    white-space: nowrap;\r\n  }\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", "\n  .range {\n    white-space: nowrap;\n  }\n"], components: [{ type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5$2.MatCellDef, selector: "[matCellDef]" }, { type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "translate": TranslatePipe, "amDurationFormat": DurationFormatPipe, "amDuration": DurationPipe }, animations: [
         listAnimation,
         itemAnimation
     ] });
@@ -22660,7 +22719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
             args: [{ selector: 'bizdoc-pending-results', animations: [
                         listAnimation,
                         itemAnimation
-                    ], template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='asDays(element.duration)'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span *ngIf=\"element.standard\" [bizdocTooltip]=\"asDays(element.standard)\">{{ element.standard | amDuration: 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span></td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>  .range {\r\n    white-space: nowrap;\r\n  }\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", "  .range {\n    white-space: nowrap;\n  }\n"] }]
+                    ], template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='element.duration|amDurationFormat'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span *ngIf=\"element.standard\" [bizdocTooltip]=\"element.standard|amDurationFormat\">{{ element.standard | amDuration: 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>\r\n  .range {\r\n    white-space: nowrap;\r\n  }\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", "\n  .range {\n    white-space: nowrap;\n  }\n"] }]
         }], ctorParameters: function () { return [{ type: WidgetRef }]; }, propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -23058,7 +23117,7 @@ class UsageReportBase {
         this._series = series ? this._cube.axes.filter(a => isArray(series) ? series.indexOf(a.name) > -1 : a.name === series) :
             this._cube.axes.filter(a => a.combination && !a.hidden);
         this.currencyCode = this._cube.currencyCode;
-        this._collapse = collapse;
+        this._expandAll = collapse !== true;
         this._yTitle = yTitle || this._translate.get('Usage');
     }
     ngOnInit() {
@@ -23122,7 +23181,7 @@ class UsageChartComponent extends UsageReportBase {
     /** set defaults */
     _defaults() {
         const { chartType } = this._reportRef.options;
-        const line = chartType === 'Line' || chartType === 'Spline';
+        const isLine = chartType === 'Line' || chartType === 'Spline';
         this.chartSettings = {
             pointClick: this.pointClick.bind(this),
             zoomSettings: {
@@ -23133,7 +23192,7 @@ class UsageChartComponent extends UsageReportBase {
                 enableSelectionZooming: false
             },
             crosshair: {
-                enable: line,
+                enable: isLine,
                 line: {
                     width: 1
                 }
@@ -23143,7 +23202,7 @@ class UsageChartComponent extends UsageReportBase {
                 type: chartType || 'Column',
                 //width: 2,
                 border: { width: 0 },
-                marker: { height: 10, width: 10, shape: 'Pentagon', visible: line },
+                marker: { height: 10, width: 10, shape: 'Pentagon', visible: isLine },
             },
             enableExport: true,
             chartArea: {
@@ -23184,7 +23243,12 @@ class UsageChartComponent extends UsageReportBase {
                 labelStyle: {
                     fontFamily: FONT_FAMILY
                 },
-                crosshairTooltip: { enable: line }
+                crosshairTooltip: {
+                    enable: true,
+                    textStyle: {
+                        fontFamily: FONT_FAMILY
+                    }
+                }
             }
         };
         const formatSettings = [{
@@ -23212,7 +23276,7 @@ class UsageChartComponent extends UsageReportBase {
             ],
             enableSorting: false,
             sortSettings: this._series.map(s => { return { name: `_${s.name}` }; }),
-            expandAll: this._collapse || false,
+            expandAll: this._expandAll,
             formatSettings,
             dataSource: []
         };
@@ -23247,7 +23311,6 @@ class UsageChartComponent extends UsageReportBase {
             dataSourceSettings: this.dataSourceSettings,
             spinnerTemplate: '',
             allowConditionalFormatting: true,
-            allowExcelExport: true,
             currencyCode: this.currencyCode,
         }, this._elementRef.nativeElement);
     }
@@ -23537,7 +23600,7 @@ class UsagePivotComponent extends UsageReportBase {
             values,
             conditionalFormatSettings: this.conditionalFormatSettings,
             emptyCellsTextContent: this._emptyCellsTextContent,
-            expandAll: this._collapse || false,
+            expandAll: this._expandAll,
             showColumnGrandTotals: true,
             alwaysShowValueHeader: false,
             formatSettings,
@@ -23610,8 +23673,20 @@ class UsagePivotComponent extends UsageReportBase {
             gridSettings: this.gridSettings,
             cellClick: this.cellClick.bind(this),
             currencyCode: this.currencyCode,
+            dataBound: this.dataBound.bind(this)
         }, this._elementRef.nativeElement);
     }
+    dataBound(_) {
+        this.tooltip = new Tooltip({
+            target: '.e-icons',
+            cssClass: 'e-custom-tooltip',
+            position: 'BottomCenter',
+            offsetY: 15,
+            enableRtl: this.pivot.enableRtl,
+            locale: this.pivot.locale,
+        });
+        this.tooltip.appendTo(this._elementRef.nativeElement);
+    }
     /**
      *
      * @param evt
@@ -23622,7 +23697,7 @@ class UsagePivotComponent extends UsageReportBase {
         super.browse(axes, actualText === 'usage' ? null : actualText);
     }
     /**
-     * reverse engineering axes from headers
+     * reverse engineer axes from headers
      * @param columnHeaders
      * @param rowHeaders
      */
@@ -23643,6 +23718,11 @@ class UsagePivotComponent extends UsageReportBase {
             });
         return axes;
     }
+    ngOnDestroy() {
+        this.tooltip && this.tooltip.destroy();
+        this.pivot && this.pivot.destroy();
+        super.ngOnDestroy();
+    }
 }
 UsagePivotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: UsagePivotComponent, deps: [{ token: ReportRef }, { token: DatasourceService }, { token: i0.ElementRef }, { token: CubeService }, { token: SessionService }, { token: RouterImpl }, { token: PromptService }, { token: i7$2.Directionality }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
 UsagePivotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: UsagePivotComponent, selector: "ng-component", host: { properties: { "id": "id" } }, viewQueries: [{ propertyName: "pivot", first: true, predicate: PivotViewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
@@ -26942,14 +27022,15 @@ let CubeCompareWidget = CubeCompareWidget_1 = class CubeCompareWidget {
         this.primaryYAxis = {
             skeleton: 'duration',
             labelStyle: {
-                size: '0px'
-            }, visible: true,
+            //size: '0px'
+            },
+            labelFormat: '',
             titleStyle: {
                 fontFamily: FONT_FAMILY
             },
             title: this._translate.get('Duration'),
-            lineStyle: { width: 0 },
-            minorTickLines: { width: 0 }
+            //lineStyle: { width: 0 },
+            //minorTickLines: { width: 0 }
         };
         this.margin = {
             bottom: 0
@@ -27142,31 +27223,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                 args: ['nameInput', { static: true, read: ElementRef }]
             }] } });
 
-// 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);
-dayjs.extend(updateLocale);
+/** configuration componenets */
 const CORE_COMPONENTS = [CubeCompareWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
     SubstitutionComponent, MoveToActionComponent, AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
     ActionsWidget, CubeAnalysisWidget, CubeDocumentsWidget, RecentsWidget, PersonalActivityWidget,
-    CompareDepartmentsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
+    CompareGroupsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
     CubeDocumentsComponent, TasksComponent, UsageReportArgs, CubeUsageComponent
 ];
+/** common BizDoc components */
 class SharedModule {
     static forChild(config) {
         const { formats } = config || {};
@@ -27248,9 +27312,10 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         ImpersonateDialog,
         ConversationComponent, CubeMatrixPopupComponent,
         VersionCompareComponent, ExploreDocumentComponent, TasksComponent,
-        PendingResultsWidget, CompareDepartmentsWidget, CubeDocumentsTableComponent, CubeDocumentsWidget,
+        PendingResultsWidget, CompareGroupsWidget, CubeDocumentsTableComponent, CubeDocumentsWidget,
         PersonalScoreWidget, PersonalActivityWidget, PeersPerformanceWidget, UsagePivotComponent, UsageChartComponent, UsageReportArgs,
-        EmojiHostComponent, TooltipDirective, TooltipComponent], imports: [CommonModule,
+        EmojiHostComponent, TooltipDirective, TooltipComponent], imports: [DayJsModule,
+        CommonModule,
         HttpClientModule,
         ReactiveFormsModule,
         FlexLayoutModule,
@@ -27287,7 +27352,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         PrivilegeDisabledDirective, CompareGroupDirective, CompareNameDirective, CompareContextDirective, TraceViewComponent, FlowViewComponent,
         AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
         CubeCompareWidget, ActionsWidget, CubeAnalysisWidget, CubeDocumentsWidget, RecentsWidget, PersonalActivityWidget,
-        CompareDepartmentsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
+        CompareGroupsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
         CubeDocumentsTableComponent, CubeDocumentsGridComponent, TasksComponent, UsageReportArgs, UsageChartComponent, UsagePivotComponent, TimespanInput,
         VersionCompareComponent, LottieAnimation,
         CubeAccumulationChartComponent,
@@ -27311,6 +27376,7 @@ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         { provide: HTTP_INTERCEPTORS, useClass: AppHttpInterceptor, multi: true },
         { provide: APP_INITIALIZER, useFactory: TranslateProviderFactory, deps: [TranslateService], multi: true },
     ], imports: [[
+            DayJsModule,
             CommonModule,
             HttpClientModule,
             ReactiveFormsModule,
@@ -27387,10 +27453,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                         ImpersonateDialog,
                         ConversationComponent, CubeMatrixPopupComponent,
                         VersionCompareComponent, ExploreDocumentComponent, TasksComponent,
-                        PendingResultsWidget, CompareDepartmentsWidget, CubeDocumentsTableComponent, CubeDocumentsWidget,
+                        PendingResultsWidget, CompareGroupsWidget, CubeDocumentsTableComponent, CubeDocumentsWidget,
                         PersonalScoreWidget, PersonalActivityWidget, PeersPerformanceWidget, UsagePivotComponent, UsageChartComponent, UsageReportArgs,
                         EmojiHostComponent, TooltipDirective, TooltipComponent],
                     imports: [
+                        DayJsModule,
                         CommonModule,
                         HttpClientModule,
                         ReactiveFormsModule,
@@ -27447,7 +27514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
                         PrivilegeDisabledDirective, CompareGroupDirective, CompareNameDirective, CompareContextDirective, TraceViewComponent, FlowViewComponent,
                         AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
                         CubeCompareWidget, ActionsWidget, CubeAnalysisWidget, CubeDocumentsWidget, RecentsWidget, PersonalActivityWidget,
-                        CompareDepartmentsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
+                        CompareGroupsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
                         CubeDocumentsTableComponent, CubeDocumentsGridComponent, TasksComponent, UsageReportArgs, UsageChartComponent, UsagePivotComponent, TimespanInput,
                         VersionCompareComponent, LottieAnimation,
                         CubeAccumulationChartComponent,
@@ -27547,9 +27614,9 @@ class TraceElementComponent {
             const info = [];
             const who = yield 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 = yield this._accounts.get(escalations[0].userId).toPromise();
-                info.push(this._translate.get('EscalatedBy', this._chat.format(escalate), this._chat.format(who)));
+                const escalation = this.timeline.log.find(l => l.type === 'Escalation' && l.recipientId === recipient.originId);
+                const to = yield this._accounts.get(escalation.userId).toPromise();
+                info.push(this._translate.get('EscalatedBy', this._chat.format(to), this._chat.format(who)));
             }
             if (recipient.substituteId) {
                 const substitute = yield this._accounts.get(recipient.substituteId).toPromise();
@@ -28527,11 +28594,11 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this._cd = _cd;
         this._fb = _fb;
         this.search = this._fb.control(null);
-        this.diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging |
-            DiagramConstraints.LineRouting |
-            DiagramConstraints.Pan |
-            DiagramConstraints.Zoom;
-        this.diagramTool = DiagramTools.SingleSelect;
+        this.diagramConstraints = DiagramConstraints$1.Default | DiagramConstraints$1.Bridging |
+            DiagramConstraints$1.LineRouting |
+            DiagramConstraints$1.Pan |
+            DiagramConstraints$1.Zoom;
+        this.diagramTool = DiagramTools$1.SingleSelect;
         this.layout = {
             type: 'ComplexHierarchicalTree',
             connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
@@ -28550,7 +28617,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this._accentColor = this._session.getAccent(800);
         this._primeryColor = this._session.getPrimery();
         this.selectedItems = {
-            constraints: SelectorConstraints.UserHandle,
+            constraints: SelectorConstraints$1.UserHandle,
             userHandles: [
                 {
                     name: 'info',
@@ -28574,13 +28641,13 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this.nodeDefaults = (node) => {
             const { indicator, virtual } = node.addInfo || {};
             if (indicator) {
-                node.constraints = NodeConstraints.PointerEvents | NodeConstraints.Tooltip,
+                node.constraints = NodeConstraints$1.PointerEvents | NodeConstraints$1.Tooltip,
                     node.style.strokeWidth = 0,
                     node.width = node.height = 15;
             }
             else if (node.id !== 'version') {
-                node.constraints = NodeConstraints.InConnect | NodeConstraints.OutConnect |
-                    NodeConstraints.PointerEvents | NodeConstraints.Select;
+                node.constraints = NodeConstraints$1.InConnect | NodeConstraints$1.OutConnect |
+                    NodeConstraints$1.PointerEvents | NodeConstraints$1.Select;
                 this._decorateNode(node);
                 node.ports = getPorts();
             }
@@ -28588,7 +28655,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         };
         this.connDefaults = (connector) => {
             const { virtual } = connector.addInfo || {};
-            connector.constraints = ConnectorConstraints.ReadOnly & ~ConnectorConstraints.Select;
+            connector.constraints = ConnectorConstraints$1.ReadOnly & ~ConnectorConstraints$1.Select;
             this._decorateConnector(connector);
         };
     }
@@ -28643,7 +28710,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
             this._timeline();
             this.mode = 'diagram';
             this._cd.detectChanges();
-            this.diagram = new Diagram({
+            this.diagram = new Diagram$1({
                 width: '100%', height: '100%',
                 snapSettings: this.snapSettings,
                 layout: this.layout,
@@ -28799,7 +28866,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
                 fontSize: 50,
                 opacity: .1
             },
-            constraints: NodeConstraints.ReadOnly
+            constraints: NodeConstraints$1.ReadOnly
         };
         this.diagram.addLayer({
             id: 'version',
@@ -28862,12 +28929,12 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this.diagram.dataBind();
     }
     pan() {
-        this.diagram.constraints = this.diagram.constraints | DiagramConstraints.Pan;
-        this.diagram.tool = DiagramTools.ZoomPan;
+        this.diagram.constraints = this.diagram.constraints | DiagramConstraints$1.Pan;
+        this.diagram.tool = DiagramTools$1.ZoomPan;
     }
     cursor() {
-        this.diagram.constraints = this.diagram.constraints & ~DiagramConstraints.Pan;
-        this.diagram.tool = DiagramTools.SingleSelect;
+        this.diagram.constraints = this.diagram.constraints & ~DiagramConstraints$1.Pan;
+        this.diagram.tool = DiagramTools$1.SingleSelect;
     }
     _highlight(ids) {
         for (let i = 0; i < ids.length; i++) {
@@ -29769,6 +29836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
 
 const SYSTEM_COMPONENTS = [RoleNodeComponent, ManageCubeIndexUtility, PermissionsUtility, PositionsComponent, ProfilerComponent,
     PatternsComponent, SystemDiffComponent, DocumentTraceComponent];
+/** administrative utilities */
 class SystemModule {
     static forChild() {
         registerComponents(SYSTEM_COMPONENTS);
@@ -30024,5 +30092,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AvatarComponent, BIZDOC_CONFIG, BizDoc, BizDocApp, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, ColorPicker, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareDepartmentsWidget, CompareGroupDirective, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeCompareWidget, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeMatrixComponent, CubeParallelComponent, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateFormatPipe, DateRangePipe, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, FadeSlideInOut, FieldType, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideService, INBOX, IdentityName, ItemResolveService, JoinPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationEnd, NavigationSelected, NavigationStart, NgxComponentOutlet, NotificationsTableComponent, OpenPolicy, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SessionService, ShakeAnimation, SharedModule, SlotRouterDirective, StateDirective, StatePipe, SubstitutionComponent, SwapAnimation, TagsComponent, TasksComponent, TimeAgoPipe, TimePicker, TimespanInput, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, WidgetItemComponent, WidgetRef, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, registerComponents };
+export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AvatarComponent, BIZDOC_CONFIG, BizDoc, BizDocApp, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, ColorPicker, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareGroupDirective, CompareGroupsWidget, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeCompareWidget, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeMatrixComponent, CubeParallelComponent, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateFormatPipe, DateRangePipe, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, FadeSlideInOut, FieldType, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideService, INBOX, IdentityName, ItemResolveService, JoinPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationEnd, NavigationSelected, NavigationStart, NgxComponentOutlet, NotificationsTableComponent, OpenPolicy, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SessionService, ShakeAnimation, SharedModule, SlotRouterDirective, StateDirective, StatePipe, SubstitutionComponent, SwapAnimation, TagsComponent, TasksComponent, TimeAgoPipe, TimePicker, TimespanInput, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, WidgetItemComponent, WidgetRef, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, registerComponents };
 //# sourceMappingURL=bizdoc-core.mjs.map