@bizdoc/core 1.14.0-next.11 → 1.14.0-next.14

package/fesm2020/bizdoc-core.mjs

@@ -55,7 +55,7 @@ import * as i3 from '@angular/material/datepicker';
 import { MatDatepickerIntl, MatDatepickerModule } from '@angular/material/datepicker';
 import * as i12 from '@angular/cdk/text-field';
 import * as i2$2 from '@syncfusion/ej2-angular-richtexteditor';
-import { ToolbarType, RichTextEditorComponent, RichTextEditor, Toolbar, HtmlEditor, RichTextEditorModule, HtmlEditorService, ToolbarService } from '@syncfusion/ej2-angular-richtexteditor';
+import { ToolbarType, RichTextEditorComponent, RichTextEditor, Toolbar, HtmlEditor, RichTextEditorModule, HtmlEditorService, ToolbarService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
 import * as i1$4 from '@angular/cdk/overlay';
 import { OverlayRef, OverlayConfig, OverlayModule, CdkScrollable } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
@@ -119,26 +119,26 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import { Platform } from '@angular/cdk/platform';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i25 from '@angular/flex-layout/extended';
-import * as i8$4 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 * as i16 from '@syncfusion/ej2-angular-charts';
+import { AccumulationChart, ChartModule, AccumulationChartModule, SparklineModule, 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, SplineRangeAreaSeriesService, AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService, RangeNavigator, AreaSeries, LineSeries, DateTime, RangeTooltip, Sparkline, SparklineTooltip, PieSeries, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationAnnotation, AccumulationLegend, AccumulationSelection, Chart as Chart$1, Category, Tooltip as Tooltip$1, Legend, Selection as Selection$1, Zoom, Crosshair, DataLabel, BarSeries, BubbleSeries, ColumnSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, 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';
 import { Grid, Selection, Aggregate, Freeze, ExcelExport, Resize, GridModule, PagerModule, ExcelExportService, AggregateService, FreezeService, GroupService, PageService, ResizeService, SortService, SelectionService as SelectionService$1, GridComponent } from '@syncfusion/ej2-angular-grids';
-import { PivotView, ExcelExport as ExcelExport$1 } from '@syncfusion/ej2-pivotview';
+import { PivotView } from '@syncfusion/ej2-pivotview';
 import { Tooltip } from '@syncfusion/ej2-popups';
 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 from '@ctrl/ngx-emoji-mart';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 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 { 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, LineDistributionService, ToolBase, SelectorConstraints as SelectorConstraints$1, ConnectorConstraints as ConnectorConstraints$1 } from '@syncfusion/ej2-angular-diagrams';
 import * as i9$3 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';
 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 { PivotViewModule, ExcelExportService as ExcelExportService$1, GroupingBarService, NumberFormattingService, GroupingService, PivotChartService, ConditionalFormattingService, PivotView as PivotView$1, GroupingBar, ExcelExport as ExcelExport$1, PivotChart, PivotViewComponent } from '@syncfusion/ej2-angular-pivotview';
 import * as i7$5 from '@syncfusion/ej2-angular-gantt';
 import { GanttModule, ExcelExportService as ExcelExportService$3, DayMarkersService, SelectionService as SelectionService$3, Gantt } from '@syncfusion/ej2-angular-gantt';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -1969,8 +1969,10 @@ const STRINGS = {
     'ar': {},
     'ru': {},
     'en': {
-        TodayAt: 'Today at',
+        LastDay: '[Last] {0}',
+        TodayAt: '[Today at] {0}',
         Tomorrow: 'Tomorrow',
+        TomorrowAt: '[Tomorrow] {0}',
         Editing: '{0} editing...',
         CheckOut: 'Check out',
         CheckIn: 'Check in',
@@ -2088,6 +2090,7 @@ const STRINGS = {
         YouSubmittedNoteBy: 'You submitted this document on behalf of {0} {1}',
         Today: 'Today',
         Yesterday: 'Yesterday',
+        YesterdayAt: '[Yesterday] {0}',
         Forget: 'Forget',
         SomeoneTyping: 'Someone\'s typing...',
         Typing: '{0} typing...',
@@ -2434,8 +2437,10 @@ const STRINGS = {
         Working: 'Working on it...'
     },
     'he': {
-        TodayAt: 'היום ב-',
+        LastDay: '{0} [שעבר]',
+        TodayAt: '[היום ב-]{0}',
         Tomorrow: 'מחר',
+        TomorrowAt: '[מחר] {0}',
         Editing: '{0} עורך/ת...',
         EditingMale: '{0} עורך...',
         EditingFemale: '{0} עורכת...',
@@ -2640,6 +2645,7 @@ const STRINGS = {
         YouSubmittedNoteBy: 'שלחת את המסמך בשם {0} לחתימה {1}',
         Today: 'היום',
         Yesterday: 'אתמול',
+        YesterdayAt: '[אתמול] {0}',
         SomeoneTyping: 'מישהו מקליד/ה...',
         Typing: '{0} מקליד/ה...',
         TypingFemale: '{0} מקלידה...',
@@ -3042,11 +3048,11 @@ class TranslateService {
             }
         }
         dayjs.updateLocale(culture, {
-            //sameDay: `[${this.get('TodayAt')}] h:mm A`,
-            //nextDay: `[${this.get('Tomorrow')}]  h:mm A`,
+            //sameDay: this.get('TodayAt', 'h:mm A'),
+            //nextDay: this.get('TomorrowAt', 'h:mm A'),
             //nextWeek: 'dddd',
-            //lastDay: `[${this.get('Yesterday')}] h:mm A`,
-            //lastWeek: '[Last] dddd LT',
+            //lastDay: this.get('YesterdayAt', 'h:mm A'),
+            //lastWeek: this.get('LastDay', 'dddd LT'),
             sameElse: 'LLL'
         });
         _session.loaded.subscribe(() => this._gender = this._session.gender);
@@ -7024,9 +7030,6 @@ class PanesRouter {
     get active() {
         return this._active;
     }
-    //replace(url: string) {
-    //  history.pushState({}, '', url);
-    //}
     navigate(commands, options) {
         return new Promise((resolve, reject) => {
             this._events$.pipe(filter(e => e instanceof NavigationStart), first()).subscribe((e) => resolve(e.pane), reject);
@@ -10275,7 +10278,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: HostBinding
             }] } });
 
-PivotView.Inject(ExcelExport$1);
 const PIVOT_HEADER_DELIMITER$1 = '|';
 /** pivot component*/
 class CubePivotComponent {
@@ -10535,17 +10537,20 @@ class CubePivotComponent {
      * @param evt
      */
     cellClick(evt) {
-        const { columnHeaders, rowHeaders, actualText, actualValue, axis, valueSort, type } = evt.data;
+        const { columnHeaders, rowHeaders, actualText, actualValue, axis, valueSort, isGrandSum } = evt.data;
+        if (actualValue === 0)
+            return;
         let axes, index;
-        if (columnHeaders || rowHeaders) {
-            if (actualValue === 0)
-                return;
+        if (columnHeaders || rowHeaders)
             axes = this._parseAxes(columnHeaders, rowHeaders);
-            if (actualText !== 'value')
-                index = actualText;
-        }
-        else if (axis === 'row' && type !== 'grand sum')
+        else if (axis === 'row')
             axes = this._parseAxes('', valueSort.levelName);
+        else if (axis === 'column')
+            axes = this._parseAxes(valueSort.levelName, '');
+        else if (isGrandSum)
+            return;
+        if (actualText !== 'value')
+            index = actualText;
         this.explore.emit({ axes, index });
     }
     /**
@@ -10561,18 +10566,12 @@ class CubePivotComponent {
                 // find any row with header
                 element = this._data.find(e => e[column].toString() === c);
                 // translate back to key
-                if (!element)
-                    console.error(`${columnHeaders}`);
-                else
-                    axes[column] = element[`_${column}`];
+                axes[column] = element[`_${column}`];
             });
         if (rowHeaders !== '')
             rowHeaders.split(PIVOT_HEADER_DELIMITER$1).forEach((r, i) => {
                 const column = this.dataSource.rows[i].name, element = this._data.find(e => e[column] === r);
-                if (!element)
-                    console.error(`${rowHeaders}`);
-                else
-                    axes[column] = element[`_${column}`];
+                axes[column] = element[`_${column}`];
             });
         return axes;
     }
@@ -13311,11 +13310,27 @@ class FormService {
     constructor(_http) {
         this._http = _http;
     }
-    findAll(value) {
+    findAll(options) {
+        const params = {};
+        if (isString(options))
+            params['search'] = options;
+        else {
+            if (options.search)
+                params['search'] = options.search;
+            if (options.formId)
+                params['formId'] = options.formId;
+            if (options.start)
+                params['start'] = new Date(options.start).toISOString();
+            if (options.end)
+                params['end'] = new Date(options.end).toISOString();
+        }
         return this._http.get('/api/form/findAll', {
-            params: { value }
+            params
         });
     }
+    range() {
+        return this._http.get('/api/form/range', {});
+    }
     get(name) {
         return this._http.get(`/api/form/${name}`);
     }
@@ -13576,7 +13591,9 @@ class WorkflowComponent {
         this.diagramConstraints = this.diagramConstraints & ~DiagramConstraints.Pan;
         this.diagramTool = DiagramTools.Default;
     }
-    selectionChange() {
+    selectionChange(evt) {
+        if (evt.state !== 'Changed')
+            return;
         const { nodes, connectors } = this.diagram.selectedItems;
         if (connectors.length || nodes.length) {
             if (nodes.length === 1 && nodes[0].addInfo) {
@@ -14650,9 +14667,9 @@ class TraceViewComponent extends TraceBase {
         this.versionSelected = new EventEmitter();
         this.data = [];
         this.CALENDAR_SPEC = {
-            lastDay: `[${this._translate.get('Yesterday')}] HH:mm`,
+            lastDay: this._translate.get('YesterdayAt', 'HH:mm'),
             lastWeek: 'dddd HH:mm',
-            sameDay: `[${this._translate.get('Today')}] HH:mm`,
+            sameDay: this._translate.get('TodayAt', 'HH:mm'),
             sameElse: 'MMM D HH:mm'
         };
         this._showMode = localStorage.getItem('traceMode') || 'everything';
@@ -15074,9 +15091,9 @@ class VersionPaneComponent {
         this._translate = _translate;
         this._router = _router;
         this.CALENDAR_SPEC = {
-            lastDay: `[${this._translate.get('Yesterday')}] HH:mm`,
+            lastDay: this._translate.get('YesterdayAt', 'HH:mm'),
             lastWeek: 'dddd HH:mm',
-            sameDay: `[${this._translate.get('Today')}] HH:mm`,
+            sameDay: this._translate.get('TodayAt', 'HH:mm'),
             sameElse: 'MMM D HH:mm'
         };
         _pane.title = _translate.get('Version');
@@ -15888,10 +15905,10 @@ class CubeMatrixComponent {
     }
 }
 CubeMatrixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: CubeMatrixComponent, deps: [{ token: PromptService }, { token: CubeService }, { token: SessionService }, { token: TranslateService }, { token: DatasourceService }], target: i0.ɵɵFactoryTarget.Component });
-CubeMatrixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: { seriesTotalLabel: "seriesTotalLabel", xAxisTotalLabel: "xAxisTotalLabel", _cube: ["cube", "_cube"], _xAxis: ["xAxis", "_xAxis"], _series: ["series", "_series"], _indices: ["indices", "_indices"], indexAt: "indexAt", placeAt: "placeAt", scope: "scope", sum: "sum", filters: "filters", loading: "loading", interactive: "interactive" }, outputs: { onExplore: "explore", loadingChange: "loadingChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\"\r\n        [class.cube-index]=\"row.index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(-2, y )\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y )\">\r\n        <span *ngIf=\"data[row.key][column.key] !== '0'; else zero\" \r\n          [class.explorable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n        </span>\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(-1, y )\">\r\n        {{ data[row.key]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n<ng-template #zero>0</ng-template>\r\n", styles: [".explorable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}\n"], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [matrixAnimation] });
+CubeMatrixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: { seriesTotalLabel: "seriesTotalLabel", xAxisTotalLabel: "xAxisTotalLabel", _cube: ["cube", "_cube"], _xAxis: ["xAxis", "_xAxis"], _series: ["series", "_series"], _indices: ["indices", "_indices"], indexAt: "indexAt", placeAt: "placeAt", scope: "scope", sum: "sum", filters: "filters", loading: "loading", interactive: "interactive" }, outputs: { onExplore: "explore", loadingChange: "loadingChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\"\r\n        [class.cube-index]=\"row.index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(-2, y )\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y )\">\r\n        <span *ngIf=\"data[row.key][column.key] !== '0'; else zero\" \r\n          [class.explorable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n        </span>\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(-1, y )\">\r\n        {{ data[row.key]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n<ng-template #zero>0</ng-template>\r\n", styles: [".explorable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}.cube-table tfoot tr td{border-bottom:none}\n"], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [matrixAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: CubeMatrixComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-cube-matrix', animations: [matrixAnimation], template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\"\r\n        [class.cube-index]=\"row.index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(-2, y )\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y )\">\r\n        <span *ngIf=\"data[row.key][column.key] !== '0'; else zero\" \r\n          [class.explorable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n        </span>\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(-1, y )\">\r\n        {{ data[row.key]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n<ng-template #zero>0</ng-template>\r\n", styles: [".explorable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}\n"] }]
+            args: [{ selector: 'bizdoc-cube-matrix', animations: [matrixAnimation], template: "<table #table class=\"mat-table cube-table\" (mouseleave)=\"_move(-1, -1)\" *ngIf=\"data\">\r\n  <thead>\r\n    <!-- headers -->\r\n    <tr class=\"mat-header-row\">\r\n      <th></th>\r\n      <th *ngFor=\"let column of columns; let x = index\"\r\n          (mouseenter)=\"_move(x + 1, -2)\" class=\"mat-header-cell\">\r\n        {{ column.value }}\r\n      </th>\r\n      <th class=\"mat-header-cell\">{{xAxisTotalLabel}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <!-- rows -->\r\n    <tr *ngFor=\"let row of rows; let y = index\" class=\"mat-row\"\r\n        [class.cube-index]=\"row.index\">\r\n      <th class=\"mat-header-cell\" (mouseenter)=\"_move(-2, y )\">{{ row.value }}</th>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, y )\">\r\n        <span *ngIf=\"data[row.key][column.key] !== '0'; else zero\" \r\n          [class.explorable]=\"interactive && column.explorable !== false && row.explorable !== false\"\r\n          (click)=\"explore(column, row)\">\r\n          {{ data[row.key][column.key] }}\r\n        </span>\r\n      </td>\r\n      <th class=\"mat-cell figure\" (mouseenter)=\"_move(-1, y )\">\r\n        {{ data[row.key]['_total'] }}\r\n      </th>\r\n    </tr>\r\n  </tbody>\r\n  <tfoot>\r\n    <!-- footer -->\r\n    <tr class=\"mat-footer-row\">\r\n      <td class=\"mat-footer-cell\">{{seriesTotalLabel}}</td>\r\n      <td *ngFor=\"let column of columns; let x = index\" class=\"mat-footer-cell figure\"\r\n          (mouseenter)=\"_move(x + 1, -2)\"\r\n          [class.negative-figure]=\"totals[column.key].startsWith('-')\">\r\n        <ng-container *ngIf=\"totals[column.key] !== undefined\">\r\n          {{ totals[column.key] }}\r\n        </ng-container>\r\n      </td>\r\n      <th class=\"mat-footer-cell figure\">{{ totals['_grand'] }}</th>\r\n    </tr>\r\n  </tfoot>\r\n</table>\r\n<ng-template #zero>0</ng-template>\r\n", styles: [".explorable{cursor:pointer}.cube-table{width:100%;table-layout:fixed}.cube-table th{cursor:default}.cube-table th.figure{font-weight:500}.cube-table td,.cube-table th{padding-right:8px}.cube-table tfoot tr td{border-bottom:none}\n"] }]
         }], ctorParameters: function () { return [{ type: PromptService }, { type: CubeService }, { type: SessionService }, { type: TranslateService }, { type: DatasourceService }]; }, propDecorators: { tableElement: [{
                 type: ViewChild,
                 args: ['table']
@@ -16908,7 +16925,7 @@ class ConversationComponent {
         this.sending = false;
         this.working = false;
         this.CALENDAR_SPEC = {
-            lastDay: `[${this._translate.get('Yesterday')}] HH:mm`,
+            lastDay: this._translate.get('YesterdayAt', 'HH:mm'),
             lastWeek: 'ddd HH:mm',
             sameDay: 'HH:mm',
             sameElse: 'MMM D HH:mm'
@@ -20876,7 +20893,7 @@ class SyncfusionTextEditorModule {
 SyncfusionTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SyncfusionTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionTextEditorModule, imports: [CommonModule,
         RichTextEditorModule], exports: [RichTextEditorModule] });
-SyncfusionTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionTextEditorModule, providers: [HtmlEditorService, ToolbarService], imports: [[
+SyncfusionTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionTextEditorModule, providers: [HtmlEditorService, ToolbarService, PasteCleanupService], imports: [[
             CommonModule,
             RichTextEditorModule
         ], RichTextEditorModule] });
@@ -20890,16 +20907,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         CommonModule,
                         RichTextEditorModule
                     ],
-                    providers: [HtmlEditorService, ToolbarService]
+                    providers: [HtmlEditorService, ToolbarService, PasteCleanupService]
                 }]
         }] });
 
-AccumulationChart.Inject(PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationLegend, Export, PieSeries);
-Chart$1.Inject(Category, DateTime, Tooltip$1, Legend, Export, BarSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries);
 class SyncfusionChartModule {
 }
 SyncfusionChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SyncfusionChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionChartModule, imports: [ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule], exports: [ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule] });
+SyncfusionChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionChartModule, imports: [ChartModule, AccumulationChartModule, SparklineModule, RangeNavigatorModule], exports: [ChartModule, AccumulationChartModule, SparklineModule, RangeNavigatorModule] });
 SyncfusionChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionChartModule, providers: [RangeTooltipService, AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService,
         SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService,
         StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService,
@@ -20908,13 +20923,13 @@ SyncfusionChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         SelectionService, ChartAnnotationService, WaterfallSeriesService,
         RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService,
         MultiLevelLabelService, ParetoSeriesService, TooltipRenderService,
-        SparklineTooltipService,
-        AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService], imports: [[ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule], ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule] });
+        SparklineTooltipService, SplineRangeAreaSeriesService,
+        AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService], imports: [[ChartModule, AccumulationChartModule, SparklineModule, RangeNavigatorModule], ChartModule, AccumulationChartModule, SparklineModule, RangeNavigatorModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionChartModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule],
-                    exports: [ChartModule, AccumulationChartAllModule, SparklineAllModule, RangeNavigatorModule],
+                    imports: [ChartModule, AccumulationChartModule, SparklineModule, RangeNavigatorModule],
+                    exports: [ChartModule, AccumulationChartModule, SparklineModule, RangeNavigatorModule],
                     providers: [RangeTooltipService, AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService,
                         SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService,
                         StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService,
@@ -20923,10 +20938,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         SelectionService, ChartAnnotationService, WaterfallSeriesService,
                         RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService,
                         MultiLevelLabelService, ParetoSeriesService, TooltipRenderService,
-                        SparklineTooltipService,
+                        SparklineTooltipService, SplineRangeAreaSeriesService,
                         AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService]
                 }]
-        }] });
+        }] });
+RangeNavigator.Inject(AreaSeries, LineSeries, DateTime, RangeTooltip);
+Sparkline.Inject(SparklineTooltip);
+AccumulationChart.Inject(PieSeries, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationAnnotation, AccumulationLegend, AccumulationSelection);
+Chart$1.Inject(Category, DateTime, Tooltip$1, Legend, Selection$1, Zoom, Crosshair, DataLabel, BarSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries);
 
 class SyncfusionDiagramModule {
 }
@@ -20935,7 +20954,7 @@ SyncfusionDiagramModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         DiagramModule,
         SymbolPaletteModule], exports: [DiagramModule,
         SymbolPaletteModule] });
-SyncfusionDiagramModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionDiagramModule, providers: [ConnectorBridgingService, LineRoutingService, ComplexHierarchicalTreeService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService], imports: [[
+SyncfusionDiagramModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionDiagramModule, providers: [ConnectorBridgingService, LineRoutingService, ComplexHierarchicalTreeService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, LineDistributionService], imports: [[
             CommonModule,
             DiagramModule,
             SymbolPaletteModule
@@ -20954,7 +20973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         DiagramModule,
                         SymbolPaletteModule
                     ],
-                    providers: [ConnectorBridgingService, LineRoutingService, ComplexHierarchicalTreeService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService]
+                    providers: [ConnectorBridgingService, LineRoutingService, ComplexHierarchicalTreeService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, LineDistributionService]
                 }]
         }] });
 
@@ -21010,7 +21029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                     ],
                     providers: [ExcelExportService$1, GroupingBarService, NumberFormattingService, GroupingService, PivotChartService, ConditionalFormattingService]
                 }]
-        }] });
+        }] });
+PivotView$1.Inject(GroupingBar, ExcelExport$1, PivotChart);
 
 class SyncfusionScheduleModule {
 }
@@ -21035,7 +21055,8 @@ class SyncfusionSpreadsheetModule {
 SyncfusionSpreadsheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionSpreadsheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SyncfusionSpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionSpreadsheetModule, imports: [SpreadsheetModule,
         CommonModule], exports: [SpreadsheetModule] });
-SyncfusionSpreadsheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionSpreadsheetModule, providers: [SelectionService$2, BasicModuleService, ClipboardService, CellFormatService, KeyboardNavigationService, KeyboardShortcutService, NumberFormatService], imports: [[
+SyncfusionSpreadsheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SyncfusionSpreadsheetModule, providers: [SelectionService$2, BasicModuleService, ClipboardService, CellFormatService, KeyboardNavigationService,
+        KeyboardShortcutService, NumberFormatService], imports: [[
             SpreadsheetModule,
             CommonModule
         ], SpreadsheetModule] });
@@ -21050,7 +21071,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         SpreadsheetModule,
                         CommonModule
                     ],
-                    providers: [SelectionService$2, BasicModuleService, ClipboardService, CellFormatService, KeyboardNavigationService, KeyboardShortcutService, NumberFormatService]
+                    providers: [SelectionService$2, BasicModuleService, ClipboardService, CellFormatService, KeyboardNavigationService,
+                        KeyboardShortcutService, NumberFormatService]
                 }]
         }] });
 
@@ -21075,7 +21097,7 @@ dayjs.extend(relativeTime, {
         { l: 'm', r: 1 },
         { l: 'mm', r: 59, d: 'minute' },
         { l: 'h', r: 1 },
-        { l: 'hh', r: 24, d: 'hour' },
+        { l: 'hh', r: 23, d: 'hour' },
         { l: 'd', r: 1 },
         { l: 'dd', r: 29, d: 'day' },
         { l: 'M', r: 1 },
@@ -22936,8 +22958,8 @@ let PersonalScoreWidget = class PersonalScoreWidget {
             tooltip: this.tooltip,
             centerY: '50%',
             centerX: '50%',
-            width: this.width,
-            height: this.height,
+            //width: this.width,
+            //height: this.height,
             moveToCenter: true,
             background: 'transparent',
             theme: this.theme,
@@ -23044,7 +23066,7 @@ class CubeDocumentsGridComponent {
     }
 }
 CubeDocumentsGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: CubeDocumentsGridComponent, deps: [{ token: ReportRef }, { token: DocumentInfo }, { token: SessionService }, { token: AccountService }, { token: CubeService }], target: i0.ɵɵFactoryTarget.Component });
-CubeDocumentsGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: CubeDocumentsGridComponent, selector: "ng-component", viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "<ejs-grid [dataSource]=\"dataSource\" (rowSelected)=\"rowSelected($event)\" [pageSettings]=\"pageSettings\"\r\n          [allowPaging]=false\r\n          [allowExcelExport]=\"true\"\r\n          [height]=\"height\"\r\n          [allowGrouping]=true\r\n          [allowSorting]=true\r\n          [groupSettings]=\"groupSettings\">\r\n  <e-columns>\r\n    <e-column field=\"number\" [headerText]=\"'Number'|translate\"></e-column>\r\n    <e-column field=\"subject\" [headerText]=\"'Subject'|translate\"></e-column>\r\n    <e-column field=\"stateId\" [headerText]=\"'Status'|translate\">\r\n      <ng-template #template let-data>{{data.stateId | state}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"date\" [headerText]=\"'Date'|translate\">\r\n      <ng-template #template let-data>{{data.date | amDateFormat: 'lll'}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"formId\" [headerText]=\"'Form'|translate\">\r\n      <ng-template #template let-data>{{data.formId | form}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"userName\" [headerText]=\"'Name'|translate\">\r\n    </e-column>\r\n    <e-column field=\"total\" [headerText]=\"'Value'|translate\" textAlign=\"Right\" [format]=\"valueFormat\">\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n", components: [{ type: i6$5.GridComponent, selector: "ejs-grid", inputs: ["aggregates", "allowExcelExport", "allowFiltering", "allowGrouping", "allowKeyboard", "allowMultiSorting", "allowPaging", "allowPdfExport", "allowReordering", "allowResizing", "allowRowDragAndDrop", "allowSelection", "allowSorting", "allowTextWrap", "childGrid", "clipMode", "columnChooserSettings", "columnMenuItems", "columnQueryMode", "columns", "contextMenuItems", "currencyCode", "currentAction", "dataSource", "detailTemplate", "editSettings", "ej2StatePersistenceVersion", "enableAdaptiveUI", "enableAltRow", "enableAutoFill", "enableColumnVirtualization", "enableHeaderFocus", "enableHover", "enableImmutableMode", "enableInfiniteScrolling", "enablePersistence", "enableRtl", "enableStickyHeader", "enableVirtualization", "filterSettings", "frozenColumns", "frozenRows", "gridLines", "groupSettings", "height", "hierarchyPrintMode", "infiniteScrollSettings", "locale", "pageSettings", "pagerTemplate", "parentDetails", "printMode", "query", "queryString", "resizeSettings", "rowDropSettings", "rowHeight", "rowRenderingMode", "rowTemplate", "searchSettings", "selectedRowIndex", "selectionSettings", "showColumnChooser", "showColumnMenu", "sortSettings", "textWrapSettings", "toolbar", "toolbarTemplate", "width"], outputs: ["actionBegin", "actionComplete", "actionFailure", "batchAdd", "batchCancel", "batchDelete", "beforeAutoFill", "beforeBatchAdd", "beforeBatchDelete", "beforeBatchSave", "beforeCopy", "beforeDataBound", "beforeExcelExport", "beforeOpenAdaptiveDialog", "beforeOpenColumnChooser", "beforePaste", "beforePdfExport", "beforePrint", "beginEdit", "cellDeselected", "cellDeselecting", "cellEdit", "cellSave", "cellSaved", "cellSelected", "cellSelecting", "checkBoxChange", "columnDataStateChange", "columnDeselected", "columnDeselecting", "columnDrag", "columnDragStart", "columnDrop", "columnMenuClick", "columnMenuOpen", "columnSelected", "columnSelecting", "commandClick", "contextMenuClick", "contextMenuOpen", "created", "dataBound", "dataSourceChanged", "dataStateChange", "destroyed", "detailDataBound", "excelAggregateQueryCellInfo", "excelExportComplete", "excelHeaderQueryCellInfo", "excelQueryCellInfo", "exportDetailDataBound", "exportGroupCaption", "headerCellInfo", "keyPressed", "lazyLoadGroupCollapse", "lazyLoadGroupExpand", "load", "pdfAggregateQueryCellInfo", "pdfExportComplete", "pdfHeaderQueryCellInfo", "pdfQueryCellInfo", "printComplete", "queryCellInfo", "recordClick", "recordDoubleClick", "resizeStart", "resizeStop", "resizing", "rowDataBound", "rowDeselected", "rowDeselecting", "rowDrag", "rowDragStart", "rowDragStartHelper", "rowDrop", "rowSelected", "rowSelecting", "toolbarClick", "dataSourceChange"] }], directives: [{ type: i7$5.ColumnsDirective, selector: "ejs-gantt>e-columns" }, { type: i8$4.ColumnsDirective, selector: "ejs-chart>e-columns" }, { type: i6$5.ColumnsDirective, selector: "ejs-grid>e-columns" }, { type: i6$5.AggregateColumnsDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns" }, { type: i9$5.ColumnsDirective, selector: "e-sheet>e-columns" }, { type: i10$1.ColumnsDirective, selector: "ejs-kanban>e-columns" }, { type: i7$5.ColumnDirective, selector: "ejs-gantt>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowReordering", "allowResizing", "allowSorting", "clipMode", "customAttributes", "disableHtmlEncode", "displayAsCheckBox", "edit", "editType", "field", "filter", "format", "formatter", "headerTemplate", "headerText", "headerTextAlign", "hideAtMedia", "isPrimaryKey", "maxWidth", "minWidth", "sortComparer", "template", "textAlign", "type", "valueAccessor", "visible", "width"] }, { type: i8$4.ColumnDirective, selector: "e-columns>e-column", inputs: ["border", "width"] }, { type: i6$5.ColumnDirective, selector: "ejs-grid>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowGrouping", "allowReordering", "allowResizing", "allowSearching", "allowSorting", "autoFit", "clipMode", "columns", "commands", "customAttributes", "dataSource", "defaultValue", "disableHtmlEncode", "displayAsCheckBox", "edit", "editTemplate", "editType", "enableGroupByFormat", "field", "filter", "filterBarTemplate", "filterTemplate", "foreignKeyField", "foreignKeyValue", "format", "formatter", "freeze", "headerTemplate", "headerText", "headerTextAlign", "headerValueAccessor", "hideAtMedia", "index", "isFrozen", "isIdentity", "isPrimaryKey", "lockColumn", "maxWidth", "minWidth", "showColumnMenu", "showInColumnChooser", "sortComparer", "template", "textAlign", "type", "uid", "validationRules", "valueAccessor", "visible", "width"] }, { type: i6$5.AggregateColumnDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns>e-column", inputs: ["columnName", "customAggregate", "field", "footerTemplate", "format", "groupCaptionTemplate", "groupFooterTemplate", "type"] }, { type: i9$5.ColumnDirective, selector: "e-columns>e-column", inputs: ["customWidth", "format", "hidden", "index", "isLocked", "validation", "width"] }, { type: i10$1.ColumnDirective, selector: "e-columns>e-column", inputs: ["allowDrag", "allowDrop", "allowToggle", "headerText", "isExpanded", "keyField", "maxCount", "minCount", "showAddButton", "showItemCount", "template", "transitionColumns"] }], pipes: { "translate": TranslatePipe, "state": StatePipe, "amDateFormat": DateFormatPipe, "form": FormPipe } });
+CubeDocumentsGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: CubeDocumentsGridComponent, selector: "ng-component", viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "<ejs-grid [dataSource]=\"dataSource\" (rowSelected)=\"rowSelected($event)\" [pageSettings]=\"pageSettings\"\r\n          [allowPaging]=false\r\n          [allowExcelExport]=\"true\"\r\n          [height]=\"height\"\r\n          [allowGrouping]=true\r\n          [allowSorting]=true\r\n          [groupSettings]=\"groupSettings\">\r\n  <e-columns>\r\n    <e-column field=\"number\" [headerText]=\"'Number'|translate\"></e-column>\r\n    <e-column field=\"subject\" [headerText]=\"'Subject'|translate\"></e-column>\r\n    <e-column field=\"stateId\" [headerText]=\"'Status'|translate\">\r\n      <ng-template #template let-data>{{data.stateId | state}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"date\" [headerText]=\"'Date'|translate\">\r\n      <ng-template #template let-data>{{data.date | amDateFormat: 'lll'}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"formId\" [headerText]=\"'Form'|translate\">\r\n      <ng-template #template let-data>{{data.formId | form}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"userName\" [headerText]=\"'Name'|translate\">\r\n    </e-column>\r\n    <e-column field=\"total\" [headerText]=\"'Value'|translate\" textAlign=\"Right\" [format]=\"valueFormat\">\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n", components: [{ type: i6$5.GridComponent, selector: "ejs-grid", inputs: ["aggregates", "allowExcelExport", "allowFiltering", "allowGrouping", "allowKeyboard", "allowMultiSorting", "allowPaging", "allowPdfExport", "allowReordering", "allowResizing", "allowRowDragAndDrop", "allowSelection", "allowSorting", "allowTextWrap", "childGrid", "clipMode", "columnChooserSettings", "columnMenuItems", "columnQueryMode", "columns", "contextMenuItems", "currencyCode", "currentAction", "dataSource", "detailTemplate", "editSettings", "ej2StatePersistenceVersion", "enableAdaptiveUI", "enableAltRow", "enableAutoFill", "enableColumnVirtualization", "enableHeaderFocus", "enableHover", "enableImmutableMode", "enableInfiniteScrolling", "enablePersistence", "enableRtl", "enableStickyHeader", "enableVirtualization", "filterSettings", "frozenColumns", "frozenRows", "gridLines", "groupSettings", "height", "hierarchyPrintMode", "infiniteScrollSettings", "locale", "pageSettings", "pagerTemplate", "parentDetails", "printMode", "query", "queryString", "resizeSettings", "rowDropSettings", "rowHeight", "rowRenderingMode", "rowTemplate", "searchSettings", "selectedRowIndex", "selectionSettings", "showColumnChooser", "showColumnMenu", "sortSettings", "textWrapSettings", "toolbar", "toolbarTemplate", "width"], outputs: ["actionBegin", "actionComplete", "actionFailure", "batchAdd", "batchCancel", "batchDelete", "beforeAutoFill", "beforeBatchAdd", "beforeBatchDelete", "beforeBatchSave", "beforeCopy", "beforeDataBound", "beforeExcelExport", "beforeOpenAdaptiveDialog", "beforeOpenColumnChooser", "beforePaste", "beforePdfExport", "beforePrint", "beginEdit", "cellDeselected", "cellDeselecting", "cellEdit", "cellSave", "cellSaved", "cellSelected", "cellSelecting", "checkBoxChange", "columnDataStateChange", "columnDeselected", "columnDeselecting", "columnDrag", "columnDragStart", "columnDrop", "columnMenuClick", "columnMenuOpen", "columnSelected", "columnSelecting", "commandClick", "contextMenuClick", "contextMenuOpen", "created", "dataBound", "dataSourceChanged", "dataStateChange", "destroyed", "detailDataBound", "excelAggregateQueryCellInfo", "excelExportComplete", "excelHeaderQueryCellInfo", "excelQueryCellInfo", "exportDetailDataBound", "exportGroupCaption", "headerCellInfo", "keyPressed", "lazyLoadGroupCollapse", "lazyLoadGroupExpand", "load", "pdfAggregateQueryCellInfo", "pdfExportComplete", "pdfHeaderQueryCellInfo", "pdfQueryCellInfo", "printComplete", "queryCellInfo", "recordClick", "recordDoubleClick", "resizeStart", "resizeStop", "resizing", "rowDataBound", "rowDeselected", "rowDeselecting", "rowDrag", "rowDragStart", "rowDragStartHelper", "rowDrop", "rowSelected", "rowSelecting", "toolbarClick", "dataSourceChange"] }], directives: [{ type: i7$5.ColumnsDirective, selector: "ejs-gantt>e-columns" }, { type: i16.ColumnsDirective, selector: "ejs-chart>e-columns" }, { type: i6$5.ColumnsDirective, selector: "ejs-grid>e-columns" }, { type: i6$5.AggregateColumnsDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns" }, { type: i9$5.ColumnsDirective, selector: "e-sheet>e-columns" }, { type: i10$1.ColumnsDirective, selector: "ejs-kanban>e-columns" }, { type: i7$5.ColumnDirective, selector: "ejs-gantt>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowReordering", "allowResizing", "allowSorting", "clipMode", "customAttributes", "disableHtmlEncode", "displayAsCheckBox", "edit", "editType", "field", "filter", "format", "formatter", "headerTemplate", "headerText", "headerTextAlign", "hideAtMedia", "isPrimaryKey", "maxWidth", "minWidth", "sortComparer", "template", "textAlign", "type", "valueAccessor", "visible", "width"] }, { type: i16.ColumnDirective, selector: "e-columns>e-column", inputs: ["border", "width"] }, { type: i6$5.ColumnDirective, selector: "ejs-grid>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowGrouping", "allowReordering", "allowResizing", "allowSearching", "allowSorting", "autoFit", "clipMode", "columns", "commands", "customAttributes", "dataSource", "defaultValue", "disableHtmlEncode", "displayAsCheckBox", "edit", "editTemplate", "editType", "enableGroupByFormat", "field", "filter", "filterBarTemplate", "filterTemplate", "foreignKeyField", "foreignKeyValue", "format", "formatter", "freeze", "headerTemplate", "headerText", "headerTextAlign", "headerValueAccessor", "hideAtMedia", "index", "isFrozen", "isIdentity", "isPrimaryKey", "lockColumn", "maxWidth", "minWidth", "showColumnMenu", "showInColumnChooser", "sortComparer", "template", "textAlign", "type", "uid", "validationRules", "valueAccessor", "visible", "width"] }, { type: i6$5.AggregateColumnDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns>e-column", inputs: ["columnName", "customAggregate", "field", "footerTemplate", "format", "groupCaptionTemplate", "groupFooterTemplate", "type"] }, { type: i9$5.ColumnDirective, selector: "e-columns>e-column", inputs: ["customWidth", "format", "hidden", "index", "isLocked", "validation", "width"] }, { type: i10$1.ColumnDirective, selector: "e-columns>e-column", inputs: ["allowDrag", "allowDrop", "allowToggle", "headerText", "isExpanded", "keyField", "maxCount", "minCount", "showAddButton", "showItemCount", "template", "transitionColumns"] }], pipes: { "translate": TranslatePipe, "state": StatePipe, "amDateFormat": DateFormatPipe, "form": FormPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: CubeDocumentsGridComponent, decorators: [{
             type: Component,
             args: [{ template: "<ejs-grid [dataSource]=\"dataSource\" (rowSelected)=\"rowSelected($event)\" [pageSettings]=\"pageSettings\"\r\n          [allowPaging]=false\r\n          [allowExcelExport]=\"true\"\r\n          [height]=\"height\"\r\n          [allowGrouping]=true\r\n          [allowSorting]=true\r\n          [groupSettings]=\"groupSettings\">\r\n  <e-columns>\r\n    <e-column field=\"number\" [headerText]=\"'Number'|translate\"></e-column>\r\n    <e-column field=\"subject\" [headerText]=\"'Subject'|translate\"></e-column>\r\n    <e-column field=\"stateId\" [headerText]=\"'Status'|translate\">\r\n      <ng-template #template let-data>{{data.stateId | state}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"date\" [headerText]=\"'Date'|translate\">\r\n      <ng-template #template let-data>{{data.date | amDateFormat: 'lll'}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"formId\" [headerText]=\"'Form'|translate\">\r\n      <ng-template #template let-data>{{data.formId | form}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"userName\" [headerText]=\"'Name'|translate\">\r\n    </e-column>\r\n    <e-column field=\"total\" [headerText]=\"'Value'|translate\" textAlign=\"Right\" [format]=\"valueFormat\">\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n" }]
@@ -23548,7 +23570,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: ReportRef }, { type: DatasourceService }, { type: CubeService }, { type: SessionService }, { type: RouterImpl }, { type: PromptService }, { type: i0.ElementRef }, { type: i7$2.Directionality }, { type: TranslateService }]; } });
 
-PivotView$1.Inject(ExcelExport$2);
 const PIVOT_HEADER_DELIMITER = '|';
 /**
  * cube usage
@@ -25526,7 +25547,7 @@ class CubeBase {
         this.originalAxes = this._consolidateData[this.cube.name];
         this.axes = this.aggregate(this.originalAxes);
     }
-    drop(axes) {
+    _drop(axes) {
         if (isString(axes))
             delete this.axes[axes];
         else
@@ -26476,7 +26497,7 @@ let CubeDocumentSumComponent = class CubeDocumentSumComponent extends CubeBase {
         this._router = _router;
     }
     async onViewBind() {
-        const { xAxis, indices, parentAxis, periodPolicy, scope } = this._viewRef.options;
+        const { xAxis, indices, series, periodPolicy, scope } = this._viewRef.options;
         if (!xAxis)
             throw 'sum view requires xAxis';
         this.primaryAxis = this.cube.axes.find(a => a.name === xAxis);
@@ -26484,7 +26505,7 @@ let CubeDocumentSumComponent = class CubeDocumentSumComponent extends CubeBase {
         if (isArray(originalValue))
             this.selectedAxis = originalValue[0];
         this.periodPolicy = periodPolicy;
-        this.parentAxis = parentAxis;
+        this.parentAxis = series;
         this.indices = indices;
         this.scope = scope;
     }
@@ -26704,7 +26725,6 @@ class CubeParallelComponent {
         this._palettes = value;
     }
     ngOnChanges(changes) {
-        delete this.filters[this.xAxis];
         this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
         this.format = (this._cube.currencyCode ? 'c' : 'n') + this._service.fractionDigits;
         if (changes['filters'])
@@ -26799,10 +26819,10 @@ class CubeParallelComponent {
     }
 }
 CubeParallelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: CubeParallelComponent, deps: [{ token: PromptService }, { token: CubeService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
-CubeParallelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: CubeParallelComponent, selector: "bizdoc-cube-parallel", inputs: { filters: "filters", xAxis: "xAxis", series: "series", indices: "indices", cube: "cube", size: "size", chartType: "chartType", scope: "scope", palettes: "palettes" }, outputs: { onExplore: "explore" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"items.length\" class=\"row\">\r\n  <div *ngFor=\"let s of items\" class=\"element\">\r\n    <ejs-sparkline [width]='width' height='100px' [type]='s.chartType' [id]=\"s.data.name\"\r\n                   [dataSource]=\"s.data.points\" xName=\"name\"\r\n                   yName=\"y\" [palette]=\"s.palette\" [format]=\"format\"\r\n                   valueType=\"Category\"\r\n                   [enableRtl]=\"enableRtl\"\r\n                   [border]=\"s.border\"\r\n                   [fill]=\"s.fill\"\r\n                   [axisSettings]=\"axisSettings\"\r\n                   [markerSettings]=\"s.markerSettings\"\r\n                   (pointRegionMouseClick)=\"sprklineClick(s, $event)\"\r\n                   [tooltipSettings]=\"s.tooltipSettings\">\r\n    </ejs-sparkline>\r\n    <h4 class=\"mat-h4\">{{s.data.title}}</h4>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding:8px}.element{display:flex;flex-direction:column;align-items:center;flex:1 1 auto}\n"], components: [{ type: i8$4.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+CubeParallelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: CubeParallelComponent, selector: "bizdoc-cube-parallel", inputs: { filters: "filters", xAxis: "xAxis", series: "series", indices: "indices", cube: "cube", size: "size", chartType: "chartType", scope: "scope", palettes: "palettes" }, outputs: { onExplore: "explore" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"items.length\" class=\"row\">\r\n  <div *ngFor=\"let s of items\" class=\"element\">\r\n    <ejs-sparkline [width]='width' height='100px'\r\n                   [type]='s.chartType'\r\n                   [id]=\"s.data.name\"\r\n                   [dataSource]=\"s.data.points\"\r\n                   xName=\"name\"\r\n                   yName=\"y\" [palette]=\"s.palette\"\r\n                   [format]=\"format\"\r\n                   valueType=\"Category\"\r\n                   [enableRtl]=\"enableRtl\"\r\n                   [border]=\"s.border\"\r\n                   [fill]=\"s.fill\"\r\n                   [theme]=\"theme\"\r\n                   [axisSettings]=\"axisSettings\"\r\n                   [markerSettings]=\"s.markerSettings\"\r\n                   (pointRegionMouseClick)=\"sprklineClick(s, $event)\"\r\n                   [tooltipSettings]=\"s.tooltipSettings\">\r\n    </ejs-sparkline>\r\n    <h4 class=\"mat-h4\">{{s.data.title}}</h4>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding:8px}.element{display:flex;flex-direction:column;align-items:center;flex:1 1 auto}\n"], components: [{ type: i16.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: CubeParallelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-cube-parallel', template: "<div *ngIf=\"items.length\" class=\"row\">\r\n  <div *ngFor=\"let s of items\" class=\"element\">\r\n    <ejs-sparkline [width]='width' height='100px' [type]='s.chartType' [id]=\"s.data.name\"\r\n                   [dataSource]=\"s.data.points\" xName=\"name\"\r\n                   yName=\"y\" [palette]=\"s.palette\" [format]=\"format\"\r\n                   valueType=\"Category\"\r\n                   [enableRtl]=\"enableRtl\"\r\n                   [border]=\"s.border\"\r\n                   [fill]=\"s.fill\"\r\n                   [axisSettings]=\"axisSettings\"\r\n                   [markerSettings]=\"s.markerSettings\"\r\n                   (pointRegionMouseClick)=\"sprklineClick(s, $event)\"\r\n                   [tooltipSettings]=\"s.tooltipSettings\">\r\n    </ejs-sparkline>\r\n    <h4 class=\"mat-h4\">{{s.data.title}}</h4>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding:8px}.element{display:flex;flex-direction:column;align-items:center;flex:1 1 auto}\n"] }]
+            args: [{ selector: 'bizdoc-cube-parallel', template: "<div *ngIf=\"items.length\" class=\"row\">\r\n  <div *ngFor=\"let s of items\" class=\"element\">\r\n    <ejs-sparkline [width]='width' height='100px'\r\n                   [type]='s.chartType'\r\n                   [id]=\"s.data.name\"\r\n                   [dataSource]=\"s.data.points\"\r\n                   xName=\"name\"\r\n                   yName=\"y\" [palette]=\"s.palette\"\r\n                   [format]=\"format\"\r\n                   valueType=\"Category\"\r\n                   [enableRtl]=\"enableRtl\"\r\n                   [border]=\"s.border\"\r\n                   [fill]=\"s.fill\"\r\n                   [theme]=\"theme\"\r\n                   [axisSettings]=\"axisSettings\"\r\n                   [markerSettings]=\"s.markerSettings\"\r\n                   (pointRegionMouseClick)=\"sprklineClick(s, $event)\"\r\n                   [tooltipSettings]=\"s.tooltipSettings\">\r\n    </ejs-sparkline>\r\n    <h4 class=\"mat-h4\">{{s.data.title}}</h4>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding:8px}.element{display:flex;flex-direction:column;align-items:center;flex:1 1 auto}\n"] }]
         }], ctorParameters: function () { return [{ type: PromptService }, { type: CubeService }, { type: SessionService }]; }, propDecorators: { filters: [{
                 type: Input
             }], xAxis: [{
@@ -26837,7 +26857,8 @@ let CubeParallelViewComponent = class CubeParallelViewComponent extends CubeBase
         const { chartType, xAxis, series, indices } = this._viewRef.options;
         if (!xAxis || !series)
             throw 'parallel view requires series or xAxis';
-        this.drop(xAxis);
+        this._drop(xAxis);
+        series && this._drop(series);
         this.xAxis = xAxis;
         this.series = series;
         this.indices = indices;
@@ -27609,15 +27630,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
 
 const VISIABLE_LOG_TYPES = ['StateChange', 'ModelChange', 'Download'];
 class TraceElementComponent {
-    constructor(_chat, _router, _translate, _accounts, _session) {
+    constructor(_pane, _chat, _sb, _router, _translate, _accounts, _dialog, _session) {
+        this._pane = _pane;
         this._chat = _chat;
+        this._sb = _sb;
         this._router = _router;
         this._translate = _translate;
         this._accounts = _accounts;
+        this._dialog = _dialog;
         this._session = _session;
-        this.assign = new EventEmitter();
+        _pane.dataChange.subscribe(this.change.bind(this));
     }
-    ngOnChanges() {
+    change(state) {
+        this.model = state.model;
+        this.timeline = state.timeline;
+        this.node = state.node;
+        this._utilityRef = state.utilityRef;
         const { id, addInfo } = this.node;
         const recipients = this.timeline.recipients.filter(r => r.nodeId === id), log = this.timeline.log.filter(l => l.nodeId === id);
         this.recipients = recipients,
@@ -27626,8 +27654,22 @@ class TraceElementComponent {
             this.log = log.filter(l => VISIABLE_LOG_TYPES.indexOf(l.type) > -1),
             this.estimate = log.find(l => l.estimate) !== undefined,
             this.skip = log.find(l => l.type === 'NodeJump') !== undefined,
-            this.none = log.length === 0,
-            this.nodeType = this._session.profile.nodes.find(n => n.name === addInfo.nodeType);
+            this.none = log.length === 0;
+        const nodeType = this._session.profile.nodes.find(n => n.name === addInfo.nodeType);
+        this._pane.title = nodeType.title;
+    }
+    fileName(fileId) {
+        const file = this.model.attachments.find(f => f.id === fileId);
+        return file.fileName;
+    }
+    /** */
+    assign(recipient) {
+        this._dialog.open(ReassignDialog, { data: { exclude: [recipient.userId] } }).afterClosed().
+            subscribe((m) => {
+            m && this._utilityRef.execute({ id: recipient.id, ...m }).subscribe(r => {
+                Object.assign(this.model, r);
+            }, () => this._sb.error());
+        });
     }
     async recipientInfo(recipient) {
         const info = [];
@@ -27677,20 +27719,12 @@ class TraceElementComponent {
             this._chat.open(userId);
     }
 }
-TraceElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: TraceElementComponent, deps: [{ token: ChatInfo }, { token: PanesRouter }, { token: TranslateService }, { token: AccountService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
-TraceElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: TraceElementComponent, selector: "bizdoc-document-trace-element", inputs: { model: "model", timeline: "timeline", node: "node" }, outputs: { assign: "assign" }, usesOnChanges: true, ngImport: i0, template: "<h3>\r\n  {{nodeType.title}}\r\n</h3>\r\n\r\n<h4 *ngIf=\"estimate\">{{'Estimate' | translate}}</h4>\r\n<h4 *ngIf=\"none\">{{'NoEstimate' | translate}}</h4>\r\n<h4 *ngIf=\"skip\">{{'Skipped' | translate}}</h4>\r\n\r\n<h4 *ngIf=\"recurring\" class=\"message mat-body-1\"><mat-icon>info</mat-icon> {{'TimelineMore' | translate}}</h4>\r\n\r\n<table class=\"mat-table\">\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let r of recipients\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"recipientInfo(r) | async | sanitizeHtml\">\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"r.action\">\r\n          {{r.action | action : 'past'}}\r\n        </span>\r\n        <span *ngIf=\"r.pending\">\r\n          <span *ngIf=\"!r.estimate; else estimate\">\r\n            {{'IsPending' | translate}}\r\n          </span>\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!r.estimate; estimate\">{{r.received || r.replied | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button *ngIf=\"!r.estimate\" [matMenuTriggerFor]=\"options\" [disabled]=\"!r.pending\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <button mat-menu-item (click)=\"assign.emit(r)\" *ngIf=\"r.pending\">{{'Reassign'|translate}}</button>\r\n        </mat-menu>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let l of log\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"logInfo(l) | async | sanitizeHtml\">\r\n      </td>\r\n      <td [ngSwitch]=\"l.type\" class=\"mat-cell\">\r\n        <span *ngSwitchCase=\"'StateChange'\">\r\n          {{l.state | state : (l.estimate ? 'future' : 'past')}}\r\n        </span>\r\n        <span *ngSwitchCase=\"'ModelChange'\">\r\n          {{'Changed' | translate}}\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!l.estimate\">{{l.time | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button (click)=\"compare(l)\" *ngIf=\"l.type==='ModelChange'\" [bizdocTooltip]=\"'Compare'|translate\"><mat-icon>visibility</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{padding:8px;display:block}:host .message{text-align:center}:host .message>*{vertical-align:text-bottom}:host table{background:none}:host table tr td{padding-left:2px;padding-right:2px}\n"], components: [{ type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }], pipes: { "translate": TranslatePipe, "sanitizeHtml": SanitizeHtmlPipe, "async": i10.AsyncPipe, "action": ActionPipe, "amDateFormat": DateFormatPipe, "state": StatePipe } });
+TraceElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: TraceElementComponent, deps: [{ token: PaneRef }, { token: ChatInfo }, { token: PromptService }, { token: PanesRouter }, { token: TranslateService }, { token: AccountService }, { token: i3$1.MatDialog }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
+TraceElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: TraceElementComponent, selector: "bizdoc-document-trace-element", ngImport: i0, template: "<h4 fxLayoutAlign=\"center\" class=\"mat-body-2\">\r\n  <span *ngIf=\"estimate\">{{'Estimate' | translate}}</span>\r\n  <span *ngIf=\"none\">{{'NoEstimate' | translate}}</span>\r\n  <span *ngIf=\"skip\">{{'Skipped' | translate}}</span>\r\n</h4>\r\n\r\n<h4 *ngIf=\"recurring\" class=\"message mat-body-1\"><mat-icon>info</mat-icon> {{'TimelineMore' | translate}}</h4>\r\n\r\n<table class=\"mat-table\">\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let r of recipients\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"recipientInfo(r) | async | sanitizeHtml\">\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"r.action\">\r\n          {{r.action | action : 'past'}}\r\n        </span>\r\n        <span *ngIf=\"r.pending\">\r\n          <span *ngIf=\"!r.estimate; else estimate\">\r\n            {{'IsPending' | translate}}\r\n          </span>\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!r.estimate; estimate\">{{r.received || r.replied | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button *ngIf=\"!r.estimate\" [matMenuTriggerFor]=\"options\" [disabled]=\"!r.pending\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <button mat-menu-item (click)=\"assign(r)\" *ngIf=\"r.pending\">{{'Reassign'|translate}}</button>\r\n        </mat-menu>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let l of log\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"logInfo(l) | async | sanitizeHtml\">\r\n      </td>\r\n      <td [ngSwitch]=\"l.type\" class=\"mat-cell\">\r\n        <span *ngSwitchCase=\"'StateChange'\">\r\n          {{l.state | state : (l.estimate ? 'future' : 'past')}}\r\n        </span>\r\n        <span *ngSwitchCase=\"'ModelChange'\">\r\n          {{'Changed' | translate}}\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!l.estimate\">{{l.time | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button (click)=\"compare(l)\" *ngIf=\"l.type==='ModelChange'\" [bizdocTooltip]=\"'Compare'|translate\"><mat-icon>visibility</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{padding:8px;min-width:300px;display:block}.message{text-align:center}.message>*{vertical-align:text-bottom}table{background:none;width:100%}table tr td{padding-left:2px;padding-right:2px}\n"], components: [{ type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }], pipes: { "translate": TranslatePipe, "sanitizeHtml": SanitizeHtmlPipe, "async": i10.AsyncPipe, "action": ActionPipe, "amDateFormat": DateFormatPipe, "state": StatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: TraceElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-document-trace-element', template: "<h3>\r\n  {{nodeType.title}}\r\n</h3>\r\n\r\n<h4 *ngIf=\"estimate\">{{'Estimate' | translate}}</h4>\r\n<h4 *ngIf=\"none\">{{'NoEstimate' | translate}}</h4>\r\n<h4 *ngIf=\"skip\">{{'Skipped' | translate}}</h4>\r\n\r\n<h4 *ngIf=\"recurring\" class=\"message mat-body-1\"><mat-icon>info</mat-icon> {{'TimelineMore' | translate}}</h4>\r\n\r\n<table class=\"mat-table\">\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let r of recipients\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"recipientInfo(r) | async | sanitizeHtml\">\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"r.action\">\r\n          {{r.action | action : 'past'}}\r\n        </span>\r\n        <span *ngIf=\"r.pending\">\r\n          <span *ngIf=\"!r.estimate; else estimate\">\r\n            {{'IsPending' | translate}}\r\n          </span>\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!r.estimate; estimate\">{{r.received || r.replied | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button *ngIf=\"!r.estimate\" [matMenuTriggerFor]=\"options\" [disabled]=\"!r.pending\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <button mat-menu-item (click)=\"assign.emit(r)\" *ngIf=\"r.pending\">{{'Reassign'|translate}}</button>\r\n        </mat-menu>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let l of log\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"logInfo(l) | async | sanitizeHtml\">\r\n      </td>\r\n      <td [ngSwitch]=\"l.type\" class=\"mat-cell\">\r\n        <span *ngSwitchCase=\"'StateChange'\">\r\n          {{l.state | state : (l.estimate ? 'future' : 'past')}}\r\n        </span>\r\n        <span *ngSwitchCase=\"'ModelChange'\">\r\n          {{'Changed' | translate}}\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!l.estimate\">{{l.time | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button (click)=\"compare(l)\" *ngIf=\"l.type==='ModelChange'\" [bizdocTooltip]=\"'Compare'|translate\"><mat-icon>visibility</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{padding:8px;display:block}:host .message{text-align:center}:host .message>*{vertical-align:text-bottom}:host table{background:none}:host table tr td{padding-left:2px;padding-right:2px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChatInfo }, { type: PanesRouter }, { type: TranslateService }, { type: AccountService }, { type: SessionService }]; }, propDecorators: { assign: [{
-                type: Output
-            }], model: [{
-                type: Input
-            }], timeline: [{
-                type: Input
-            }], node: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'bizdoc-document-trace-element', template: "<h4 fxLayoutAlign=\"center\" class=\"mat-body-2\">\r\n  <span *ngIf=\"estimate\">{{'Estimate' | translate}}</span>\r\n  <span *ngIf=\"none\">{{'NoEstimate' | translate}}</span>\r\n  <span *ngIf=\"skip\">{{'Skipped' | translate}}</span>\r\n</h4>\r\n\r\n<h4 *ngIf=\"recurring\" class=\"message mat-body-1\"><mat-icon>info</mat-icon> {{'TimelineMore' | translate}}</h4>\r\n\r\n<table class=\"mat-table\">\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let r of recipients\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"recipientInfo(r) | async | sanitizeHtml\">\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"r.action\">\r\n          {{r.action | action : 'past'}}\r\n        </span>\r\n        <span *ngIf=\"r.pending\">\r\n          <span *ngIf=\"!r.estimate; else estimate\">\r\n            {{'IsPending' | translate}}\r\n          </span>\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!r.estimate; estimate\">{{r.received || r.replied | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button *ngIf=\"!r.estimate\" [matMenuTriggerFor]=\"options\" [disabled]=\"!r.pending\"><mat-icon>more_vert</mat-icon></button>\r\n        <mat-menu #options>\r\n          <button mat-menu-item (click)=\"assign(r)\" *ngIf=\"r.pending\">{{'Reassign'|translate}}</button>\r\n        </mat-menu>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n  <tbody class=\"mat-table-body\">\r\n    <tr *ngFor=\"let l of log\" class=\"mat-row\">\r\n      <td class=\"mat-cell\" (click)=\"chat($event)\" [innerHTML]=\"logInfo(l) | async | sanitizeHtml\">\r\n      </td>\r\n      <td [ngSwitch]=\"l.type\" class=\"mat-cell\">\r\n        <span *ngSwitchCase=\"'StateChange'\">\r\n          {{l.state | state : (l.estimate ? 'future' : 'past')}}\r\n        </span>\r\n        <span *ngSwitchCase=\"'ModelChange'\">\r\n          {{'Changed' | translate}}\r\n        </span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <span *ngIf=\"!l.estimate\">{{l.time | amDateFormat: 'lll'}}</span>\r\n      </td>\r\n      <td class=\"mat-cell\">\r\n        <button mat-icon-button (click)=\"compare(l)\" *ngIf=\"l.type==='ModelChange'\" [bizdocTooltip]=\"'Compare'|translate\"><mat-icon>visibility</mat-icon></button>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{padding:8px;min-width:300px;display:block}.message{text-align:center}.message>*{vertical-align:text-bottom}table{background:none;width:100%}table tr td{padding-left:2px;padding-right:2px}\n"] }]
+        }], ctorParameters: function () { return [{ type: PaneRef }, { type: ChatInfo }, { type: PromptService }, { type: PanesRouter }, { type: TranslateService }, { type: AccountService }, { type: i3$1.MatDialog }, { type: SessionService }]; } });
 
 class PositionsPopup {
     constructor(data, _cd, _service) {
@@ -28050,7 +28084,7 @@ let SystemDiffComponent = class SystemDiffComponent {
         this.progress = 0;
         this._working = new Subject();
         this.CALENDAR_SPEC = {
-            lastDay: `[${this._translate.get('Yesterday')}] HH:mm`,
+            lastDay: this._translate.get('YesterdayAt', 'HH:mm'),
             lastWeek: 'ddd HH:mm',
             sameDay: 'HH:mm',
             sameElse: 'MMM D HH:mm'
@@ -28591,19 +28625,21 @@ class InfoTool extends ToolBase {
 }
 let DocumentTraceComponent = class DocumentTraceComponent {
     /** workflow ctor */
-    constructor(_utilityRef, _service, _session, _slot, _router, _sb, _translate, _dialog, _guide, _cd, _fb) {
+    constructor(_utilityRef, _service, _session, _pane, _router, _sb, _translate, _popup, _guide, _cd, _fb) {
         this._utilityRef = _utilityRef;
         this._service = _service;
         this._session = _session;
-        this._slot = _slot;
+        this._pane = _pane;
         this._router = _router;
         this._sb = _sb;
         this._translate = _translate;
-        this._dialog = _dialog;
+        this._popup = _popup;
         this._guide = _guide;
         this._cd = _cd;
         this._fb = _fb;
-        this.search = this._fb.control(null);
+        this.theme = this._session.theme.dark ? 'MaterialDark' : 'Material';
+        this.accent = this._session.getAccent();
+        this.form = this._fb.group({ search: null, formId: null });
         this.diagramConstraints = DiagramConstraints$1.Default | DiagramConstraints$1.Bridging |
             DiagramConstraints$1.LineRouting |
             DiagramConstraints$1.Pan |
@@ -28644,10 +28680,13 @@ let DocumentTraceComponent = class DocumentTraceComponent {
             ]
         };
         this.getCustomTool = this.getTool.bind(this);
-        this.mode = 'search';
+        this.mode = 'browse';
+        this.loading = 'query';
+        this.displayedColumns = ['number', 'subject', 'stateId'];
         this._highLightedIds = [];
         this._tap = new Subject();
         this._destroy = new Subject();
+        this._dateschange = new Subject();
         this.nodeDefaults = (node) => {
             const { indicator, virtual } = node.addInfo || {};
             if (indicator) {
@@ -28677,13 +28716,40 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         return tool;
     }
     ngOnInit() {
-        this.documents$ = this.search.valueChanges.pipe(takeUntil(this._destroy), debounceTime(250), filter(v => !isObject(v)), switchMap(v => this._service.findAll(v)));
-        this._tap.pipe(takeUntil(this._destroy)).subscribe(n => this._info(n));
-        this._slot.queryParamsChange.subscribe(p => {
+        const now = dayjs();
+        this._session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+            this.theme = t.dark ? 'MaterialDark' : 'Material';
+            this.accent = this._session.getAccent();
+            //this.rangeNavigator.refresh();
+        });
+        this._service.range().subscribe(r => this.rangeData = r);
+        this._dateschange.pipe(takeUntil(this._destroy), debounceTime(200)).subscribe(r => {
+            this._start = r.start, this._end = r.end;
+            this._list();
+        });
+        this.range = [now.add(-2, 'w').toDate(),
+            now.toDate()];
+        this.form.valueChanges.pipe(takeUntil(this._destroy), debounceTime(200)).
+            subscribe(this._list.bind(this));
+        this._pane.queryParamsChange.subscribe(p => {
             const { id } = p;
             id && this._open(id.decodeId());
         });
-        this._slot.resize.pipe(takeUntil(this._destroy)).subscribe(() => this.diagram?.refresh());
+        this._pane.resize.pipe(takeUntil(this._destroy)).subscribe(() => this.diagram?.refresh());
+    }
+    openFilter(evt) {
+        this._popup.open(this.filterArgs, evt.target).opened.subscribe(() => this.searchInput.focus());
+    }
+    _list() {
+        this.loading = 'query';
+        this._service.findAll({ ...this.form.value, start: this._start, end: this._end }).subscribe(l => {
+            this.dataSource = new MatTableDataSource(l);
+            this.dataSource.sort = this.sort;
+            this.loading = null;
+        });
+    }
+    rangeChanged(args) {
+        this._dateschange.next(args);
     }
     guide(evt) {
         const steps = [];
@@ -28710,14 +28776,22 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         });
         evt && evt.preventDefault();
     }
+    browse() {
+        this._router.navigate([]);
+        this._router.collapse();
+        this.mode = 'browse';
+        this._cd.detectChanges();
+        this.dataSource.sort = this.sort;
+    }
     _open(id) {
-        this.mode = null;
         this.diagram?.destroy();
+        this.loading = 'buffer';
         this._utilityRef.populate(id).subscribe(e => {
             this._highLightedIds = [];
             this.model = e;
             this._timeline();
             this.mode = 'diagram';
+            this.loading = null;
             this._cd.detectChanges();
             this.diagram = new Diagram$1({
                 width: '100%', height: '100%',
@@ -28736,14 +28810,13 @@ let DocumentTraceComponent = class DocumentTraceComponent {
             this._version();
             this._indicators();
             this.diagram.fitToPage();
-        }, () => this._sb.error());
-    }
-    display(item) {
-        return item ? item.number : null;
+        }, () => {
+            this.loading = null;
+            this._sb.error();
+        });
     }
-    change(evt) {
-        const { id } = evt.option.value;
-        this._router.navigate([], { queryParams: { id: id.encodeId() } });
+    open(item) {
+        this._router.navigate([], { queryParams: { id: item.id.encodeId() } });
     }
     _timeline() {
         const items = [], submissions = [];
@@ -28846,7 +28919,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
             node.style.fill = recipients.find(r => r.pending && !r.estimate) ? this._accentColor : 'white';
         }
         else
-            node.style.fill = 'transparent',
+            node.style.fill = 'white',
                 node.style.strokeColor = 'darkgray',
                 node.style.strokeDashArray = '6 2';
     }
@@ -28885,11 +28958,9 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         });
         this.diagram.add(version);
     }
-    fileName(fileId) {
-        const file = this.model.attachments.find(f => f.id === fileId);
-        return file.fileName;
-    }
     selectionChange(evt) {
+        if (evt.state !== 'Changed')
+            return;
         this._unhighlight();
         if (evt.newValue.length) {
             let node = evt.newValue[0];
@@ -28904,23 +28975,28 @@ let DocumentTraceComponent = class DocumentTraceComponent {
                 this._highlight(ids);
             }
             this.diagram.dataBind();
-            this._info(node);
+            if (node) {
+                if (this._infoRef)
+                    this._infoRef.close();
+                this._router.navigate(TraceElementComponent, {
+                    state: {
+                        node,
+                        timeline: this.timeline,
+                        model: this.model,
+                        utilityRef: this._utilityRef,
+                    },
+                    policy: OpenPolicy.Tab
+                }).then((e) => {
+                    this._infoRef = e;
+                    e.animation;
+                });
+            }
+            else
+                this._router.collapse();
         }
         else
             this.node = null;
     }
-    /** */
-    assign(recipient) {
-        this._dialog.open(ReassignDialog, { data: { exclude: [recipient.userId] } }).afterClosed().
-            subscribe((m) => {
-            m && this._utilityRef.execute({ id: recipient.id, ...m }).subscribe(r => {
-                Object.assign(this.model, r);
-            }, () => this._sb.error());
-        });
-    }
-    _info(node) {
-        this.node = node;
-    }
     highlightTime(time) {
         this.timeline.date = time;
         this.diagram.clearSelection();
@@ -28972,8 +29048,8 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this._destroy.complete();
     }
 };
-DocumentTraceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DocumentTraceComponent, deps: [{ token: UtilityRef }, { token: FormService }, { token: SessionService }, { token: PaneRef }, { token: PanesRouter }, { token: PromptService }, { token: TranslateService }, { token: i3$1.MatDialog }, { token: GuideService }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DocumentTraceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\r\n  <div *ngSwitchCase=\"'diagram'\" class=\"column\" fxFlex>\r\n    <mat-toolbar>\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)=\"mode = null\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon>refresh</mat-icon></button>\r\n      <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    </mat-toolbar>\r\n    <div class=\"row\" fxFlex>\r\n      <div class=\"timeline\" *ngIf=\"timeline?.items.length > 1\" data-help=\"timeline\">\r\n        <div *ngFor=\"let date of timeline.items; let last = last\" class=\"item\"\r\n             [class.active]=\"date.time === timeline.date\"\r\n             (click)=\"highlightTime(date.time)\" matRipple>\r\n          <div class=\"title\">\r\n            <ng-container *ngIf=\"!last || !timeline.estimate; else estimate\">\r\n              <span class=\"who\" *ngIf=\"userId\">\r\n                {{date.userId | userName | async }}\r\n              </span>\r\n              <br />\r\n              <span class=\"time\">\r\n                {{date.time | amDateFormat: 'MMM D H:mm' }}\r\n              </span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"indicator-container\">\r\n            <div class=\"indicator\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div fxFlex #diagram dir=\"ltr\">\r\n      </div>\r\n      <bizdoc-document-trace-element [timeline]=\"timeline\" [node]=\"node\" *ngIf=\"node\"\r\n                                     [model]=model (assign)=\"assign($event)\"></bizdoc-document-trace-element>\r\n    </div>\r\n  </div>\r\n  <div *ngSwitchCase=\"'search'\" fxFlex fxLayoutAlign=\"center\">\r\n    <form>\r\n      <mat-form-field>\r\n        <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"40\" [placeholder]=\"'Number'|translate\" />\r\n        <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                          (optionSelected)=\"change($event)\">\r\n          <mat-option *ngFor=\"let d of documents$ | async\" [value]=\"d\">\r\n            <span>{{d.number}} | {{d.subject}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n        <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n      </mat-form-field>\r\n    </form>\r\n  </div>\r\n  <mat-progress-bar mode=\"indeterminate\" *ngSwitchDefault></mat-progress-bar>\r\n</ng-container>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}\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: TraceElementComponent, selector: "bizdoc-document-trace-element", inputs: ["model", "timeline", "node"], outputs: ["assign"] }, { type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i7$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "translate": TranslatePipe, "async": i10.AsyncPipe, "userName": UserNamePipe, "amDateFormat": DateFormatPipe }, animations: [trigger('element', EnterExitRight)] });
+DocumentTraceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DocumentTraceComponent, deps: [{ token: UtilityRef }, { token: FormService }, { token: SessionService }, { token: PaneRef }, { token: PanesRouter }, { token: PromptService }, { token: TranslateService }, { token: Popup }, { token: GuideService }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DocumentTraceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["args"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\r\n  <!-- diagram -->\r\n  <div *ngSwitchCase=\"'diagram'\" class=\"column\" fxFlex>\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      |\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)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    </mat-toolbar>\r\n    <div class=\"row\" fxFlex>\r\n      <!-- timeline -->\r\n      <div class=\"timeline\" *ngIf=\"timeline?.items.length > 1\" data-help=\"timeline\">\r\n        <div *ngFor=\"let date of timeline.items; let last = last\" class=\"item\"\r\n             [class.active]=\"date.time === timeline.date\"\r\n             (click)=\"highlightTime(date.time)\" matRipple>\r\n          <div class=\"title\">\r\n            <ng-container *ngIf=\"!last || !timeline.estimate; else estimate\">\r\n              <span class=\"who\" *ngIf=\"userId\">\r\n                {{date.userId | userName | async }}\r\n              </span>\r\n              <br />\r\n              <span class=\"time\">\r\n                {{date.time | amDateFormat: 'MMM Do H:mm' }}\r\n              </span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"indicator-container\">\r\n            <div class=\"indicator\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div fxFlex #diagram dir=\"ltr\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- browse -->\r\n  <div *ngSwitchDefault fxFlex fxLayout=\"column\" fxFlexFill>\r\n    <mat-toolbar fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n    </mat-toolbar>\r\n    <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n    <!-- table -->\r\n    <mat-table fxFlex [dataSource]=\"dataSource\" matSort>\r\n      <!-- Number column -->\r\n      <ng-container matColumnDef=\"number\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n      </ng-container>\r\n\r\n      <!-- Subject column -->\r\n      <ng-container matColumnDef=\"subject\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n      </ng-container>\r\n      <!-- StateId column -->\r\n      <ng-container matColumnDef=\"stateId\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n          <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n        </mat-cell>\r\n      </ng-container>\r\n      <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n      <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\r\n               (click)=\"open(item)\">\r\n      </mat-row>\r\n    </mat-table>\r\n    <!-- range -->\r\n    <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM-dd' background=\"transparent\"\r\n                        [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\r\n                        groupBy=\"Years\" intervalType='Days'\r\n                        (changed)='rangeChanged($event)'>\r\n      <e-rangenavigator-series-collection>\r\n        <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\r\n        </e-rangenavigator-series>\r\n      </e-rangenavigator-series-collection>\r\n    </ejs-rangenavigator>\r\n  </div>\r\n</ng-container>\r\n<!-- args -->\r\n<ng-template #args>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" fxLayout=\"column\">\r\n    <mat-form-field>\r\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\r\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-row{cursor:pointer}form{margin:8px}\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: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { 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"] }, { type: i16.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }], directives: [{ type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i7$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i10.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { 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: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i16.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { type: i16.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }], pipes: { "translate": TranslatePipe, "async": i10.AsyncPipe, "userName": UserNamePipe, "amDateFormat": DateFormatPipe }, animations: [trigger('element', EnterExitRight)] });
 DocumentTraceComponent = __decorate([
     BizDoc({ selector: 'bizdoc-trace-utility' })
     /** workflow component*/
@@ -28982,13 +29058,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             type: Component,
             args: [{ host: {
                         class: 'pane'
-                    }, animations: [trigger('element', EnterExitRight)], template: "<ng-container [ngSwitch]=\"mode\">\r\n  <div *ngSwitchCase=\"'diagram'\" class=\"column\" fxFlex>\r\n    <mat-toolbar>\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)=\"mode = null\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon>refresh</mat-icon></button>\r\n      <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    </mat-toolbar>\r\n    <div class=\"row\" fxFlex>\r\n      <div class=\"timeline\" *ngIf=\"timeline?.items.length > 1\" data-help=\"timeline\">\r\n        <div *ngFor=\"let date of timeline.items; let last = last\" class=\"item\"\r\n             [class.active]=\"date.time === timeline.date\"\r\n             (click)=\"highlightTime(date.time)\" matRipple>\r\n          <div class=\"title\">\r\n            <ng-container *ngIf=\"!last || !timeline.estimate; else estimate\">\r\n              <span class=\"who\" *ngIf=\"userId\">\r\n                {{date.userId | userName | async }}\r\n              </span>\r\n              <br />\r\n              <span class=\"time\">\r\n                {{date.time | amDateFormat: 'MMM D H:mm' }}\r\n              </span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"indicator-container\">\r\n            <div class=\"indicator\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div fxFlex #diagram dir=\"ltr\">\r\n      </div>\r\n      <bizdoc-document-trace-element [timeline]=\"timeline\" [node]=\"node\" *ngIf=\"node\"\r\n                                     [model]=model (assign)=\"assign($event)\"></bizdoc-document-trace-element>\r\n    </div>\r\n  </div>\r\n  <div *ngSwitchCase=\"'search'\" fxFlex fxLayoutAlign=\"center\">\r\n    <form>\r\n      <mat-form-field>\r\n        <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"40\" [placeholder]=\"'Number'|translate\" />\r\n        <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                          (optionSelected)=\"change($event)\">\r\n          <mat-option *ngFor=\"let d of documents$ | async\" [value]=\"d\">\r\n            <span>{{d.number}} | {{d.subject}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n        <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n      </mat-form-field>\r\n    </form>\r\n  </div>\r\n  <mat-progress-bar mode=\"indeterminate\" *ngSwitchDefault></mat-progress-bar>\r\n</ng-container>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}\n"] }]
+                    }, animations: [trigger('element', EnterExitRight)], template: "<ng-container [ngSwitch]=\"mode\">\r\n  <!-- diagram -->\r\n  <div *ngSwitchCase=\"'diagram'\" class=\"column\" fxFlex>\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      |\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)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    </mat-toolbar>\r\n    <div class=\"row\" fxFlex>\r\n      <!-- timeline -->\r\n      <div class=\"timeline\" *ngIf=\"timeline?.items.length > 1\" data-help=\"timeline\">\r\n        <div *ngFor=\"let date of timeline.items; let last = last\" class=\"item\"\r\n             [class.active]=\"date.time === timeline.date\"\r\n             (click)=\"highlightTime(date.time)\" matRipple>\r\n          <div class=\"title\">\r\n            <ng-container *ngIf=\"!last || !timeline.estimate; else estimate\">\r\n              <span class=\"who\" *ngIf=\"userId\">\r\n                {{date.userId | userName | async }}\r\n              </span>\r\n              <br />\r\n              <span class=\"time\">\r\n                {{date.time | amDateFormat: 'MMM Do H:mm' }}\r\n              </span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"indicator-container\">\r\n            <div class=\"indicator\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div fxFlex #diagram dir=\"ltr\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- browse -->\r\n  <div *ngSwitchDefault fxFlex fxLayout=\"column\" fxFlexFill>\r\n    <mat-toolbar fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n    </mat-toolbar>\r\n    <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n    <!-- table -->\r\n    <mat-table fxFlex [dataSource]=\"dataSource\" matSort>\r\n      <!-- Number column -->\r\n      <ng-container matColumnDef=\"number\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n      </ng-container>\r\n\r\n      <!-- Subject column -->\r\n      <ng-container matColumnDef=\"subject\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n      </ng-container>\r\n      <!-- StateId column -->\r\n      <ng-container matColumnDef=\"stateId\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n          <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n        </mat-cell>\r\n      </ng-container>\r\n      <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n      <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\r\n               (click)=\"open(item)\">\r\n      </mat-row>\r\n    </mat-table>\r\n    <!-- range -->\r\n    <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM-dd' background=\"transparent\"\r\n                        [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\r\n                        groupBy=\"Years\" intervalType='Days'\r\n                        (changed)='rangeChanged($event)'>\r\n      <e-rangenavigator-series-collection>\r\n        <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\r\n        </e-rangenavigator-series>\r\n      </e-rangenavigator-series-collection>\r\n    </ejs-rangenavigator>\r\n  </div>\r\n</ng-container>\r\n<!-- args -->\r\n<ng-template #args>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" fxLayout=\"column\">\r\n    <mat-form-field>\r\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\r\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-row{cursor:pointer}form{margin:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
-                }] }, { type: FormService }, { type: SessionService }, { type: PaneRef }, { type: PanesRouter }, { type: PromptService }, { type: TranslateService }, { type: i3$1.MatDialog }, { type: GuideService }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }]; }, propDecorators: { diagramElement: [{
+                }] }, { type: FormService }, { type: SessionService }, { type: PaneRef }, { type: PanesRouter }, { type: PromptService }, { type: TranslateService }, { type: Popup }, { type: GuideService }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }]; }, propDecorators: { diagramElement: [{
                 type: ViewChild,
                 args: ['diagram']
+            }], filterArgs: [{
+                type: ViewChild,
+                args: ['args']
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['search']
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }], rangeNavigator: [{
+                type: ViewChild,
+                args: [RangeNavigator]
             }], guide: [{
                 type: HostListener,
                 args: ['window:keydown.f1', ['$event']]
@@ -29043,7 +29131,7 @@ let RoleNodeComponent = class RoleNodeComponent {
     }
 };
 RoleNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: RoleNodeComponent, deps: [{ token: NodeRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-RoleNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: RoleNodeComponent, selector: "ng-component", viewQueries: [{ propertyName: "input", first: true, predicate: TypeSelect, descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\" fxLayout=\"column\">\r\n  <mat-form-field>\r\n    <bizdoc-select formControlName=\"roleName\" cdkFocusInitial [placeholder]=\"'Role'|translate\" required [type]=\"roles\"></bizdoc-select>\r\n    <mat-error *ngIf=\"form.controls.roleName.hasError('required')\">{{'Required'|translate:('Roles'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select formControlName=\"condition\" [placeholder]=\"'Requirments'|translate\">\r\n      <mat-option value=\"Anyone\">{{'Anyone'|translate}}</mat-option>\r\n      <mat-option value=\"Everyone\">{{'Everyone'|translate}}</mat-option>\r\n      <mat-option value=\"Count\">{{'Minimum'|translate}}</mat-option>\r\n      <mat-option value=\"Percent\">{{'Percent'|translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field [style.display]=\"form.value.condition === 'Count' || form.value.condition === 'Percent' ? '' : 'none'\">\r\n    <input matInput formControlName=\"minimum\" [placeholder]=\"'RequirmentsValue'|translate\" type=\"number\" required />\r\n    <span matSuffix *ngIf=\"form.value.condition === 'Percent'\">%</span>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"optional\" required>{{'OptionalRole'|translate}}</mat-checkbox>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input formControlName=\"message\" [placeholder]=\"'Message'|translate\"></bizdoc-ace-input>\r\n    <mat-hint>{{'ProgrammableExpression'|translate}}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"fyi\" required>{{'FYI'|translate}}</mat-checkbox><mat-form-field>\r\n    <bizdoc-timespan-input formControlName=\"standardTime\" [placeholder]=\"'StandardTime'|translate\"></bizdoc-timespan-input>\r\n    <mat-icon matSuffix>timer</mat-icon>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-select formControlName=\"escalateRole\" [placeholder]=\"'EscalateRole'|translate\" [type]=\"roles\"></bizdoc-select>\r\n  </mat-form-field>\r\n  <mat-form-field *ngIf=\"form.controls.escalateRole.value\">\r\n    <bizdoc-timespan-input formControlName=\"escalateTime\" [placeholder]=\"'EscalateIn'|translate\"\r\n                           required></bizdoc-timespan-input>\r\n    <mat-icon matSuffix>timer</mat-icon>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"if\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"skipInRoute\" required>{{'SkipInRoute'|translate}}</mat-checkbox>\r\n</form>\r\n", styles: [""], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { type: TimespanInput, selector: "bizdoc-timespan-input", inputs: ["placeholder", "required", "disabled", "value"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i7.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": TranslatePipe } });
+RoleNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: RoleNodeComponent, selector: "ng-component", viewQueries: [{ propertyName: "input", first: true, predicate: TypeSelect, descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\" fxLayout=\"column\">\r\n  <mat-form-field>\r\n    <bizdoc-select formControlName=\"roleName\" cdkFocusInitial [placeholder]=\"'Role'|translate\" required [type]=\"roles\"></bizdoc-select>\r\n    <mat-error *ngIf=\"form.controls.roleName.hasError('required')\">{{'Required'|translate:('Roles'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select formControlName=\"condition\" [placeholder]=\"'Requirments'|translate\">\r\n      <mat-option value=\"Anyone\">{{'Anyone'|translate}}</mat-option>\r\n      <mat-option value=\"Everyone\">{{'Everyone'|translate}}</mat-option>\r\n      <mat-option value=\"Count\">{{'Minimum'|translate}}</mat-option>\r\n      <mat-option value=\"Percent\">{{'Percent'|translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field [style.display]=\"form.value.condition === 'Count' || form.value.condition === 'Percent' ? '' : 'none'\">\r\n    <input matInput formControlName=\"minimum\" [placeholder]=\"'RequirmentsValue'|translate\" type=\"number\" required />\r\n    <span matSuffix *ngIf=\"form.value.condition === 'Percent'\">%</span>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"optional\" required>{{'OptionalRole'|translate}}</mat-checkbox>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input formControlName=\"message\" [placeholder]=\"'Message'|translate\"></bizdoc-ace-input>\r\n    <mat-hint>{{'ProgrammableExpression'|translate}}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"fyi\" required>{{'FYI'|translate}}</mat-checkbox><mat-form-field>\r\n    <bizdoc-timespan-input formControlName=\"standardTime\" [placeholder]=\"'StandardTime'|translate\"></bizdoc-timespan-input>\r\n    <mat-icon matSuffix>timer</mat-icon>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-select formControlName=\"escalateRole\" [placeholder]=\"'EscalateRole'|translate\" [type]=\"roles\"></bizdoc-select>\r\n  </mat-form-field>\r\n  <mat-form-field *ngIf=\"form.controls.escalateRole.value\">\r\n    <bizdoc-timespan-input formControlName=\"escalateTime\" [placeholder]=\"'EscalateIn'|translate\"\r\n                           required></bizdoc-timespan-input>\r\n    <mat-icon matSuffix>timer</mat-icon>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"if\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"skipInRoute\" required>{{'SkipInRoute'|translate}}</mat-checkbox>\r\n</form>\r\n", styles: [":host{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { type: TimespanInput, selector: "bizdoc-timespan-input", inputs: ["placeholder", "required", "disabled", "value"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i7.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": TranslatePipe } });
 RoleNodeComponent = __decorate([
     BizDoc({
         selector: 'bizdoc-role-node'
@@ -29051,7 +29139,7 @@ RoleNodeComponent = __decorate([
 ], RoleNodeComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: RoleNodeComponent, decorators: [{
             type: Component,
-            args: [{ styles: [':host{}'], template: "<form [formGroup]=\"form\" autocomplete=\"off\" fxLayout=\"column\">\r\n  <mat-form-field>\r\n    <bizdoc-select formControlName=\"roleName\" cdkFocusInitial [placeholder]=\"'Role'|translate\" required [type]=\"roles\"></bizdoc-select>\r\n    <mat-error *ngIf=\"form.controls.roleName.hasError('required')\">{{'Required'|translate:('Roles'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select formControlName=\"condition\" [placeholder]=\"'Requirments'|translate\">\r\n      <mat-option value=\"Anyone\">{{'Anyone'|translate}}</mat-option>\r\n      <mat-option value=\"Everyone\">{{'Everyone'|translate}}</mat-option>\r\n      <mat-option value=\"Count\">{{'Minimum'|translate}}</mat-option>\r\n      <mat-option value=\"Percent\">{{'Percent'|translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field [style.display]=\"form.value.condition === 'Count' || form.value.condition === 'Percent' ? '' : 'none'\">\r\n    <input matInput formControlName=\"minimum\" [placeholder]=\"'RequirmentsValue'|translate\" type=\"number\" required />\r\n    <span matSuffix *ngIf=\"form.value.condition === 'Percent'\">%</span>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"optional\" required>{{'OptionalRole'|translate}}</mat-checkbox>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input formControlName=\"message\" [placeholder]=\"'Message'|translate\"></bizdoc-ace-input>\r\n    <mat-hint>{{'ProgrammableExpression'|translate}}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"fyi\" required>{{'FYI'|translate}}</mat-checkbox><mat-form-field>\r\n    <bizdoc-timespan-input formControlName=\"standardTime\" [placeholder]=\"'StandardTime'|translate\"></bizdoc-timespan-input>\r\n    <mat-icon matSuffix>timer</mat-icon>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-select formControlName=\"escalateRole\" [placeholder]=\"'EscalateRole'|translate\" [type]=\"roles\"></bizdoc-select>\r\n  </mat-form-field>\r\n  <mat-form-field *ngIf=\"form.controls.escalateRole.value\">\r\n    <bizdoc-timespan-input formControlName=\"escalateTime\" [placeholder]=\"'EscalateIn'|translate\"\r\n                           required></bizdoc-timespan-input>\r\n    <mat-icon matSuffix>timer</mat-icon>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"if\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"skipInRoute\" required>{{'SkipInRoute'|translate}}</mat-checkbox>\r\n</form>\r\n" }]
+            args: [{ styles: [':host{width: 100%;}'], template: "<form [formGroup]=\"form\" autocomplete=\"off\" fxLayout=\"column\">\r\n  <mat-form-field>\r\n    <bizdoc-select formControlName=\"roleName\" cdkFocusInitial [placeholder]=\"'Role'|translate\" required [type]=\"roles\"></bizdoc-select>\r\n    <mat-error *ngIf=\"form.controls.roleName.hasError('required')\">{{'Required'|translate:('Roles'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select formControlName=\"condition\" [placeholder]=\"'Requirments'|translate\">\r\n      <mat-option value=\"Anyone\">{{'Anyone'|translate}}</mat-option>\r\n      <mat-option value=\"Everyone\">{{'Everyone'|translate}}</mat-option>\r\n      <mat-option value=\"Count\">{{'Minimum'|translate}}</mat-option>\r\n      <mat-option value=\"Percent\">{{'Percent'|translate}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field [style.display]=\"form.value.condition === 'Count' || form.value.condition === 'Percent' ? '' : 'none'\">\r\n    <input matInput formControlName=\"minimum\" [placeholder]=\"'RequirmentsValue'|translate\" type=\"number\" required />\r\n    <span matSuffix *ngIf=\"form.value.condition === 'Percent'\">%</span>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"optional\" required>{{'OptionalRole'|translate}}</mat-checkbox>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input formControlName=\"message\" [placeholder]=\"'Message'|translate\"></bizdoc-ace-input>\r\n    <mat-hint>{{'ProgrammableExpression'|translate}}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"fyi\" required>{{'FYI'|translate}}</mat-checkbox><mat-form-field>\r\n    <bizdoc-timespan-input formControlName=\"standardTime\" [placeholder]=\"'StandardTime'|translate\"></bizdoc-timespan-input>\r\n    <mat-icon matSuffix>timer</mat-icon>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-select formControlName=\"escalateRole\" [placeholder]=\"'EscalateRole'|translate\" [type]=\"roles\"></bizdoc-select>\r\n  </mat-form-field>\r\n  <mat-form-field *ngIf=\"form.controls.escalateRole.value\">\r\n    <bizdoc-timespan-input formControlName=\"escalateTime\" [placeholder]=\"'EscalateIn'|translate\"\r\n                           required></bizdoc-timespan-input>\r\n    <mat-icon matSuffix>timer</mat-icon>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"if\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-checkbox formControlName=\"skipInRoute\" required>{{'SkipInRoute'|translate}}</mat-checkbox>\r\n</form>\r\n" }]
         }], ctorParameters: function () { return [{ type: NodeRef, decorators: [{
                     type: Inject,
                     args: [NodeRef]
@@ -29806,7 +29894,7 @@ let ProfilerComponent = class ProfilerComponent {
     }
 };
 ProfilerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ProfilerComponent, deps: [{ token: PromptService }, { token: UtilityRef }, { token: SessionService }, { token: i3$1.MatDialog }, { token: DocumentInfo }, { token: i2$4.MediaObserver }, { token: ChatInfo }, { token: GuideService }, { token: PanesRouter }, { token: PaneRef }, { token: TranslateService }, { token: AccountService }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ProfilerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ProfilerComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)", "window:resize": "resize()" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["activity"], descendants: true }, { propertyName: "chartElement", first: true, predicate: ["activity"], descendants: true, read: ElementRef }, { propertyName: "assign", first: true, predicate: ["assign"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <div>\r\n    <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n    <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                      (optionSelected)=\"change($event)\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-grid-list [cols]=\"cols\" [style.display]=\"data ? '': 'none'\">\r\n  <mat-grid-tile>\r\n    <mat-card>\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          <span>{{data?.info.name}}</span>\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <button mat-icon-button (click)=\"chat(data.info.id)\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n  <mat-grid-tile>\r\n    <mat-card data-help=\"activity\">\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{'Activity' | translate}}\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\r\n          <e-series-collection>\r\n          </e-series-collection>\r\n        </ejs-chart>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n  <mat-grid-tile>\r\n    <mat-card data-help=\"pending\">\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{'Pending' | translate}}\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <table class=\"mat-table\" *ngIf=\"data?.pending.length; else none\">\r\n          <thead>\r\n            <tr class=\"mat-row\">\r\n              <td class=\"mat-header-cell\"></td>\r\n              <td class=\"mat-header-cell\"></td>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let r of data?.pending\" class=\"mat-row\">\r\n              <td class=\"mat-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\r\n              <td class=\"mat-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n  <mat-grid-tile>\r\n    <mat-card data-help=\"positions\">\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{'Positions' | translate}}\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <table class=\"mat-table\" *ngIf=\"data?.positions.length; else none\">\r\n          <tr *ngFor=\"let p of data?.positions\" class=\"mat-row\">\r\n            <td class=\"mat-cell\">{{p.value }}</td>\r\n            <td class=\"mat-cell\">{{p.role | role}}</td>\r\n            <td class=\"mat-cell\">\r\n              <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\r\n            </td>\r\n          </tr>\r\n        </table>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n</mat-grid-list>\r\n<!-- dialog -->\r\n<ng-template #assign>\r\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form autocomplete=\"off\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\r\n          <mat-option *ngFor=\"let u of assignable$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #none>\r\n  <span class=\"mat-body-2\">{{'None' | translate }}</span>\r\n</ng-template>\r\n", styles: [":host{min-width:560px;display:block}.mat-card{width:calc(100% - 50px);height:calc(100% - 50px);overflow:hidden}.mat-card .mat-card-content{height:inherit}.mat-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-table{width:100%}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: i6$3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i6$3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i7$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i7$4.MatCardHeader, selector: "mat-card-header" }, { type: i8$4.ChartComponent, selector: "ejs-chart", inputs: ["allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }], directives: [{ type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i7$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i7$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i8$4.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i3$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i3$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "async": i10.AsyncPipe, "translate": TranslatePipe, "amDuration": DurationPipe, "amDifference": DifferencePipe, "role": RolePipe } });
+ProfilerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ProfilerComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)", "window:resize": "resize()" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["activity"], descendants: true }, { propertyName: "chartElement", first: true, predicate: ["activity"], descendants: true, read: ElementRef }, { propertyName: "assign", first: true, predicate: ["assign"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <div>\r\n    <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n    <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                      (optionSelected)=\"change($event)\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-grid-list [cols]=\"cols\" [style.display]=\"data ? '': 'none'\">\r\n  <mat-grid-tile>\r\n    <mat-card>\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          <span>{{data?.info.name}}</span>\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <button mat-icon-button (click)=\"chat(data.info.id)\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n  <mat-grid-tile>\r\n    <mat-card data-help=\"activity\">\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{'Activity' | translate}}\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\r\n          <e-series-collection>\r\n          </e-series-collection>\r\n        </ejs-chart>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n  <mat-grid-tile>\r\n    <mat-card data-help=\"pending\">\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{'Pending' | translate}}\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <table class=\"mat-table\" *ngIf=\"data?.pending.length; else none\">\r\n          <thead>\r\n            <tr class=\"mat-row\">\r\n              <td class=\"mat-header-cell\"></td>\r\n              <td class=\"mat-header-cell\"></td>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let r of data?.pending\" class=\"mat-row\">\r\n              <td class=\"mat-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\r\n              <td class=\"mat-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n  <mat-grid-tile>\r\n    <mat-card data-help=\"positions\">\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{'Positions' | translate}}\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <table class=\"mat-table\" *ngIf=\"data?.positions.length; else none\">\r\n          <tr *ngFor=\"let p of data?.positions\" class=\"mat-row\">\r\n            <td class=\"mat-cell\">{{p.value }}</td>\r\n            <td class=\"mat-cell\">{{p.role | role}}</td>\r\n            <td class=\"mat-cell\">\r\n              <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\r\n            </td>\r\n          </tr>\r\n        </table>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n</mat-grid-list>\r\n<!-- dialog -->\r\n<ng-template #assign>\r\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form autocomplete=\"off\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\r\n          <mat-option *ngFor=\"let u of assignable$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #none>\r\n  <span class=\"mat-body-2\">{{'None' | translate }}</span>\r\n</ng-template>\r\n", styles: [":host{min-width:560px;display:block}.mat-card{width:calc(100% - 50px);height:calc(100% - 50px);overflow:hidden}.mat-card .mat-card-content{height:inherit}.mat-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-table{width:100%}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: i6$3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i6$3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i7$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i7$4.MatCardHeader, selector: "mat-card-header" }, { type: i16.ChartComponent, selector: "ejs-chart", inputs: ["allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }], directives: [{ type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i7$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i7$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i16.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i3$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i3$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "async": i10.AsyncPipe, "translate": TranslatePipe, "amDuration": DurationPipe, "amDifference": DifferencePipe, "role": RolePipe } });
 ProfilerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-user-profiler' })
     /** component*/