@bizdoc/core 2.3.36 → 2.3.39

package/fesm2022/bizdoc-core.mjs

@@ -141,7 +141,7 @@ import * as i3$4 from '@syncfusion/ej2-angular-inputs';
 import { SignatureModule } from '@syncfusion/ej2-angular-inputs';
 import { LinearGaugeModule, AnnotationsService, GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
 import * as i11$2 from '@syncfusion/ej2-angular-charts';
-import { 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, AreaSeries, LineSeries, DateTime, RangeTooltip, RangeNavigator, SparklineTooltip, Sparkline, PieSeries, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationAnnotation, AccumulationLegend, AccumulationSelection, AccumulationChart as AccumulationChart$1, Category, Tooltip as Tooltip$1, Legend, Selection, Zoom, Crosshair, DataLabel, BarSeries, BubbleSeries, ColumnSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, ChartAnnotation, Chart as Chart$1, ChartComponent } from '@syncfusion/ej2-angular-charts';
+import { 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, AreaSeries, LineSeries, DateTime, RangeTooltip, RangeNavigator, SparklineTooltip, Sparkline, PieSeries, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationAnnotation, AccumulationLegend, AccumulationSelection, AccumulationChart as AccumulationChart$1, StripLine, BoxAndWhiskerSeries, Category, Tooltip as Tooltip$1, Legend, Selection, Zoom, Crosshair, DataLabel, BarSeries, BubbleSeries, ColumnSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, ChartAnnotation, Chart as Chart$1, ChartComponent } from '@syncfusion/ej2-angular-charts';
 import * as i8$3 from '@syncfusion/ej2-angular-grids';
 import { GridModule, PagerModule, ExcelExportService, AggregateService, FreezeService, GroupService, PageService, ResizeService, SortService, SelectionService as SelectionService$1, ExcelExport, Sort, Group, Page, Freeze, Selection as Selection$1, Aggregate, Grid as Grid$1, GridComponent } from '@syncfusion/ej2-angular-grids';
 import { Annotations, GaugeTooltip, Legend as Legend$1, CircularGauge, CircularGaugeModule, AnnotationsService as AnnotationsService$1, GaugeTooltipService as GaugeTooltipService$1, LegendService as LegendService$1 } from '@syncfusion/ej2-angular-circulargauge';
@@ -13730,15 +13730,18 @@ class ReportViewerComponent {
     /** */
     execute() {
         this.progress = 0;
-        return firstValueFrom(this._http.post(`/api/report/${encodeURIComponent(this.report.name)}`, this.args).
-            pipe(tap({
+        return new Promise((resolve, reject) => this._http.post(`/api/report/${encodeURIComponent(this.report.name)}`, this.args).
+            subscribe({
             next: r => {
                 this._instance.onBind(r, this.args);
                 this._data = r;
-                this.progress = -1;
-            }, error: () => this._sb.error(),
+                resolve();
+            }, error: () => {
+                this._sb.error();
+                reject();
+            },
             complete: () => this.progress = -1
-        })));
+        }));
     }
     explore(item) {
         const args = {};
@@ -13942,7 +13945,7 @@ class ReportPaneComponent {
         }, () => this._sb.error());
     }
     /**
-   * Alt-f
+   * Alt-q
    * @param event
    */
     handleKeydown(event) {
@@ -14759,13 +14762,14 @@ class UtilityRef {
 /** utility-wrapper component*/
 class UtilityPaneComponent {
     /** ctor */
-    constructor(_session, _pane, _http, _sb, _messaging, _cf, _injector) {
+    constructor(_session, _pane, _http, _sb, _messaging, _cf, _vc, _injector) {
         this._session = _session;
         this._pane = _pane;
         this._http = _http;
         this._sb = _sb;
         this._messaging = _messaging;
         this._cf = _cf;
+        this._vc = _vc;
         this._injector = _injector;
     }
     ngOnInit() {
@@ -14774,28 +14778,25 @@ class UtilityPaneComponent {
             this._utility = this._session.profile.utilities.find(u => u.name === id);
             this._pane.title = this._utility.title;
             const comp = this._cf.component(this._utility.template);
-            this.vc.clear();
+            this._vc.clear();
             const uRef = new UtilityRef(this._utility, this._messaging, this._sb, this._http);
             const injector = Injector.create({
                 providers: [{
                         provide: UtilityRef, useValue: uRef
                     }], parent: this._injector
             });
-            this.vc.createComponent(comp, { injector });
+            this._vc.createComponent(comp, { injector });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilityPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: i1.HttpClient }, { token: PromptService }, { token: HubService }, { token: BizDocComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UtilityPaneComponent, selector: "ng-component", viewQueries: [{ propertyName: "vc", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilityPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: i1.HttpClient }, { token: PromptService }, { token: HubService }, { token: BizDocComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UtilityPaneComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilityPaneComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '<ng-container #container></ng-container>'
+                    template: ''
                 }]
-        }], ctorParameters: () => [{ type: SessionService }, { type: PaneRef }, { type: i1.HttpClient }, { type: PromptService }, { type: HubService }, { type: BizDocComponentFactoryResolver }, { type: i0.Injector }], propDecorators: { vc: [{
-                type: ViewChild,
-                args: ['container', { static: true, read: ViewContainerRef }]
-            }] } });
+        }], ctorParameters: () => [{ type: SessionService }, { type: PaneRef }, { type: i1.HttpClient }, { type: PromptService }, { type: HubService }, { type: BizDocComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.Injector }] });
 
 const START_NODE = 'start';
 const You = 'you';
@@ -22017,7 +22018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
 RangeNavigator.Inject(AreaSeries, LineSeries, DateTime, RangeTooltip);
 Sparkline.Inject(SparklineTooltip);
 AccumulationChart$1.Inject(PieSeries, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationAnnotation, AccumulationLegend, AccumulationSelection);
-Chart$1.Inject(Category, DateTime, Tooltip$1, Legend, Selection, Zoom, Crosshair, DataLabel, BarSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, ChartAnnotation);
+Chart$1.Inject(StripLine /*, Trendlines*/, BoxAndWhiskerSeries, Category, DateTime, Tooltip$1, Legend, Selection, Zoom, Crosshair, DataLabel, BarSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, ChartAnnotation);
 
 class SyncfusionDiagramModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SyncfusionDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -29494,71 +29495,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: FormRef }] });
 
 let RolesPerformanceComponent = class RolesPerformanceComponent {
-    constructor(_elementRef, _router, _accounts, _session, _translate, _reportRef) {
+    constructor(_elementRef, _router, _accounts, _session, _translate) {
         this._elementRef = _elementRef;
         this._router = _router;
         this._accounts = _accounts;
         this._session = _session;
         this._translate = _translate;
-        this._reportRef = _reportRef;
-        this.maxStd = 0;
-        this.maxDuration = 0;
-        this.actions = {};
         this.legendSettings = {
             position: 'Left',
+            isInversed: this._session.inverse,
+            //toggleVisibility: false,
+            enablePages: true,
             enableHighlight: true,
         };
         this.tooltip = {
             enable: true,
+            textStyle: {
+                fontFamily: FONT_FAMILY
+            }
+        };
+        this.titleStyle = {
+            fontFamily: FONT_FAMILY
         };
-        this.primaryXAxis = { valueType: 'DateTime' };
+        this.primaryXAxis = { valueType: 'Double' };
         this.primaryYAxis = {};
-        const { cube: name } = _reportRef.options;
-        this._cube = name ?
-            _session.profile.cubes.find(c => c.name === name) :
-            _session.profile.cubes[0];
+        this.actions = {};
+        this._destroy = new Subject();
         _session.profile.actions.forEach(a => this.actions[a.name] = a);
+        _session.themeChange.pipe(takeUntil$1(this._destroy), startWith$1(_session.theme)).subscribe(t => {
+            this.theme = t.dark ? 'Material3Dark' : 'Material3';
+            this.chart && this._draw();
+        });
     }
-    ;
-    onBind(data, args) {
+    onBind(data) {
+        this.chart?.destroy();
         if (!data.length)
             return;
-        let accumStd = 0, countStd = 0, accumDuration = 0;
+        let accumStd = 0, countStd = 0, accumDuration = 0, maxStd = 0, maxDuration = 0, standards = [], map = {};
         data.forEach(e => {
-            if (e.standardTime) {
-                if (e.standardTime > this.maxStd)
-                    this.maxStd = e.standardTime;
-                countStd++;
-                accumStd += e.standardTime;
-            }
-            if (e.duration > this.maxDuration)
-                this.maxDuration = e.duration;
-            accumDuration += e.duration;
-            e.yDate = new Date(e.date).valueOf();
+            let accumStd1 = 0, countStd1 = 0, accumDuration1 = 0;
+            e.items.forEach(e => {
+                if (e.standardTime) {
+                    if (e.standardTime > maxStd)
+                        maxStd = e.standardTime;
+                    countStd++;
+                    countStd1++;
+                    accumStd += e.standardTime;
+                    accumStd1 += e.standardTime;
+                    standards.push(e);
+                }
+                if (e.duration > maxDuration)
+                    maxDuration = e.duration;
+                accumDuration += e.duration;
+                accumDuration1 += e.duration;
+            });
+            map[e.userId] = {
+                items: e.items,
+                stdAvg: countStd1 ? accumStd1 / countStd1 : 0,
+                durationAvg: accumDuration1 / data.length,
+            };
         });
-        let stdAvg = accumStd / countStd, durationAvg = accumDuration / data.length;
-        const ids = data.distinct(e => e.userId);
-        this._accounts.getAll([...ids]).
+        this.stdAvg = countStd ? accumStd / countStd : 0,
+            this.durationAvg = accumDuration / data.length;
+        this._accounts.getAll(data.map(e => e.userId)).
             subscribe(users => {
-            const series = [{
+            this.series = [{
                     name: this._translate.get('Standard'),
-                    xName: 'yDate',
+                    xName: 'date',
                     yName: 'standardTime',
                     type: 'Polar',
                     drawType: 'Line',
-                    //opacity: .5,
                     marker: {
                         visible: true,
                         shape: 'Triangle',
                         width: 5,
                         height: 5
                     },
-                    dataSource: data.filter(e => e.standardTime).
+                    dataSource: standards.
                         sort((e1, e2) => e1.standardTime < e2.standardTime ? -1 : 1),
                 },
                 ...users.map(u => ({
-                    dataSource: data.filter(e => e.userId === u.id).
-                        sort((e1, e2) => e1.duration < e2.duration ? -1 : 1),
+                    dataSource: map[u.id].items,
                     name: u.name,
                     type: 'Polar',
                     drawType: 'Line',
@@ -29567,45 +29584,52 @@ let RolesPerformanceComponent = class RolesPerformanceComponent {
                         width: 5, height: 5,
                         shape: 'Pentagon',
                     },
-                    xName: 'yDate',
+                    xName: 'date',
                     yName: 'duration',
                 }))];
-            new Chart({
-                title: this._translate.get('AverageValue', dayjs.duration(durationAvg, 'seconds').format('DD:HH:ss')),
-                titleStyle: { fontFamily: FONT_FAMILY },
-                subTitle: stdAvg ?
-                    this._translate.get('StandardValue', dayjs.duration(stdAvg, 'seconds').format('DD:HH:ss')) : null,
-                subTitleStyle: { fontFamily: FONT_FAMILY },
-                //          primaryXAxis: { valueType: 'Double' },
-                primaryYAxis: {
-                //minimum: 0, maximum: Math.max(durationAvg, stdAvg)
-                //interval: 60 * 5,
-                },
-                series,
-                //          pointRender: this.pointRender.bind(this),
-                tooltip: this.tooltip,
-                tooltipRender: this.tooltipRender.bind(this),
-                legendSettings: this.legendSettings,
-                axisLabelRender: this.labelRender.bind(this),
-                palettes: [this._session.getPrimery(), ...this._session.accentPalette],
-                enableRtl: this._session.inverse,
-                height: '100%',
-                highlightMode: 'Cluster',
-                pointClick: this.explore.bind(this)
-            }, this._elementRef.nativeElement);
+            this._draw();
         });
     }
-    tooltipRender(evt) {
-        evt.text = dayjs.duration(evt.data.pointY, 's').format('DD:HH:ss');
+    _draw() {
+        this.chart?.destroy();
+        const colors = this._session.accentPalette;
+        let palettes = [this._session.getPrimery(),
+            ...colors
+        ];
+        while (this.series.length < palettes.length) {
+            palettes.push(...colors);
+        }
+        this.chart = new Chart({
+            theme: this.theme,
+            selectionMode: 'Series',
+            title: this._translate.get('AverageValue', dayjs.duration(this.durationAvg, 'seconds').format('DD:HH:mm')),
+            titleStyle: this.titleStyle,
+            subTitle: this.stdAvg ?
+                this._translate.get('StandardValue', dayjs.duration(this.stdAvg, 'seconds').format('DD:HH:mm')) : null,
+            subTitleStyle: this.titleStyle,
+            series: this.series,
+            tooltip: this.tooltip,
+            tooltipRender: this.tooltipRender.bind(this),
+            legendSettings: this.legendSettings,
+            legendRender: this.legendRender.bind(this),
+            axisLabelRender: this.labelRender.bind(this),
+            palettes,
+            enableRtl: this._session.inverse,
+            height: '100%',
+            highlightMode: 'Series',
+            pointClick: this.explore.bind(this)
+        }, this._elementRef.nativeElement);
     }
-    pointRender(evt) {
-        //  const action = this.actions[(evt.point.series[evt.point.index] as Model).actionId];
-        // if (action.color) evt.fill = action.color;
+    legendRender(evt) {
+        //evt.text
+    }
+    tooltipRender(evt) {
+        evt.text = dayjs.duration(evt.data.pointY, 's').humanize(); // 'DD:HH:ss'
     }
     labelRender(evt) {
         switch (evt.axis.name) {
             case 'primaryYAxis':
-                evt.text = dayjs.duration(evt.value, 's').format('DD:HH:ss');
+                evt.text = dayjs.duration(evt.value, 's').format('DD:HH:mm');
                 break;
             case 'primaryXAxis':
                 evt.text = dayjs(evt.value).format('MMM YYYY');
@@ -29613,14 +29637,17 @@ let RolesPerformanceComponent = class RolesPerformanceComponent {
         }
     }
     explore(evt) {
-        const { point: { x, yValue }, series: { name: title } } = evt;
-        //const { cube } = this._reportRef.options;
-        //  this._router.navigate(PerformanceExplroeCompinent,
-        //    {
-        //      queryParams: axes,
-        //    });
+        const { pointIndex, seriesIndex } = evt;
+        if (seriesIndex === 0)
+            return;
+        const { documentId } = this.chart.series[seriesIndex].dataSource[pointIndex];
+        this._router.navigate(['mailbox', 'd', documentId.encodeId()]);
+    }
+    ngOnDestroy() {
+        this.chart?.destroy();
+        this._destroy.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent, deps: [{ token: i0.ElementRef }, { token: RouterImpl }, { token: AccountService }, { token: SessionService }, { token: TranslateService }, { token: ReportRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent, deps: [{ token: i0.ElementRef }, { token: RouterImpl }, { token: AccountService }, { token: SessionService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: RolesPerformanceComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true, styles: [":host{flex:1}\n"] }); }
 };
 RolesPerformanceComponent = __decorate([
@@ -29631,7 +29658,7 @@ RolesPerformanceComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent, decorators: [{
             type: Component,
             args: [{ template: '', styles: [":host{flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: RouterImpl }, { type: AccountService }, { type: SessionService }, { type: TranslateService }, { type: ReportRef }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: RouterImpl }, { type: AccountService }, { type: SessionService }, { type: TranslateService }] });
 
 var DocumentStateWidgetComponent_1;
 let DocumentStateWidgetComponent = class DocumentStateWidgetComponent {
@@ -29927,8 +29954,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 }]
         }] });
 
+let RolesPerformanceComponent1 = class RolesPerformanceComponent1 {
+    constructor(_elementRef, _accounts, _session, _translate) {
+        this._elementRef = _elementRef;
+        this._accounts = _accounts;
+        this._session = _session;
+        this._translate = _translate;
+        this.titleStyle = {
+            fontFamily: FONT_FAMILY
+        };
+        this._destroy = new Subject();
+        _session.themeChange.pipe(takeUntil$1(this._destroy), startWith$1(_session.theme)).subscribe(t => {
+            //this.theme = t.dark ? 'Material3Dark' : 'Material3';
+            //this.gauge && this._draw();
+            this.chart && this._draw();
+        });
+    }
+    onBind(data) {
+        //this.gauge?.destroy();
+        this.chart?.destroy();
+        if (!data.length)
+            return;
+        let accumStd = 0, countStd = 0, accumDuration = 0;
+        this.maxStd = 0, this.minStd = 0, this.maxDuration = 0, this.minDuration = data[0].durationLow;
+        data.forEach(e => {
+            if (e.standardAvg) {
+                if (e.standardHigh > this.maxStd)
+                    this.maxStd = e.standardHigh;
+                if (e.standardLow < this.minStd || this.minStd === 0)
+                    this.minStd = e.standardLow;
+                countStd++;
+                accumStd += e.standardAvg;
+            }
+            accumDuration += e.durationAvg;
+            if (e.durationHigh > this.maxDuration)
+                this.maxDuration = e.durationHigh;
+            if (e.durationLow < this.minDuration)
+                this.minDuration = e.durationLow;
+        });
+        this.stdAvg = countStd ? accumStd / countStd : 0,
+            this.durationAvg = accumDuration / data.length;
+        this._accounts.getAll(data.map(e => e.userId)).
+            subscribe(users => {
+            this.data = data.map((d, i) => {
+                const durationDev = d.durationAvg / this.durationAvg, standardDev = this.stdAvg ? d.durationAvg / this.stdAvg : 0;
+                return ({
+                    durationDev,
+                    standardDev,
+                    ...d,
+                    name: users[i].name,
+                    values: [d.standardHigh, d.durationHigh, d.durationAvg, d.durationLow, d.standardLow]
+                });
+            });
+            this._draw();
+        });
+    }
+    _draw() {
+        this.chart?.destroy();
+        //const colors = this._session.accentPalette;
+        //this.gauge?.destroy();
+        //this.gauge = new CircularGauge({
+        //  theme: this.theme,
+        //  title: this._translate.get('AverageValue', dayjs.duration(this.durationAvg, 'seconds').format('DD:HH:mm')),
+        //  titleStyle: this.titleStyle,
+        //  tooltip: this.tooltip,
+        //  axes: [{
+        //    startAngle: 270,
+        //    endAngle: 90,
+        //    pointers: [{
+        //      text: this._translate.get('Standard'),
+        //      color: this._session.getPrimery(),
+        //      value: this.stdAvg
+        //    }],
+        //    ranges: this.data.map((e, i) => ({
+        //      legendText: e.name,
+        //      radius: `${100 - i * 5}%`,
+        //      startWidth: 3,
+        //      endWidth: 3,
+        //      start: this.minDuration,
+        //      end: this.stdAvg ? Math.floor(e.durationAvg / this.stdAvg) : Math.floor(e.durationAvg / this.durationAvg),
+        //      color: colors[Math.floor((i + 9) / i)]
+        //    } as RangeModel))
+        //  }],
+        //  tooltipRender: this.tooltipRender.bind(this),
+        //  legendSettings: this.legendSettings,
+        //  enableRtl: this._session.inverse,
+        //  height: '100%',
+        //},
+        //  this._elementRef.nativeElement);
+        this.chart = new Chart$1({
+            primaryYAxis: {
+                stripLines: [{
+                        text: this._translate.get('Standard'),
+                        textStyle: {
+                            fontFamily: FONT_FAMILY,
+                        },
+                        opacity: .8,
+                        start: this.minStd,
+                        end: this.maxStd,
+                    }]
+            },
+            primaryXAxis: {
+                valueType: 'Category'
+            },
+            tooltip: { enable: true },
+            tooltipRender: this.tooltipRender.bind(this),
+            series: [{
+                    type: 'BoxAndWhisker',
+                    dataSource: this.data,
+                    boxPlotMode: 'Normal',
+                    enableTooltip: true,
+                    xName: 'name',
+                    yName: 'values'
+                }, {
+                    type: 'Spline',
+                    dataSource: this.data,
+                    xName: 'name',
+                    width: 3,
+                    dashArray: '3 2',
+                    yName: 'durationAvg',
+                }],
+            height: '100%',
+            axisLabelRender: this.axisLabelRender.bind(this),
+            palettes: [
+                this._session.getAccent(), this._session.getPrimery()
+            ]
+        }, this._elementRef.nativeElement);
+    }
+    axisLabelRender(evt) {
+        if (evt.axis.name === 'primaryYAxis')
+            evt.text = dayjs.duration(evt.value, 's').humanize(); // 'DD:HH:mm'
+    }
+    tooltipRender(evt) {
+        //evt.content = dayjs.duration(evt.range.end, 's').humanize();// 'DD:HH:mm'
+        if (evt.data.seriesIndex === 0) {
+            const [standardHigh, durationHigh, durationAvg, durationLow, standardLow] = evt.point.y;
+            evt.text = dayjs.duration(durationHigh, 's').format('DD:HH:mm');
+            if (standardHigh) {
+                const deviation = Math.round(this.data[evt.data.pointIndex].standardDev);
+                evt.text += ` ${deviation}%`;
+            }
+        }
+        else {
+            evt.headerText = this._translate.get('Average');
+            evt.text = dayjs.duration(evt.data.pointY, 's').format('DD:HH:mm');
+        }
+    }
+    ngOnDestroy() {
+        //this.gauge?.destroy();
+        this.chart?.destroy();
+        this._destroy.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent1, deps: [{ token: i0.ElementRef }, { token: AccountService }, { token: SessionService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: RolesPerformanceComponent1, selector: "ng-component", ngImport: i0, template: '', isInline: true, styles: [":host{flex:1}\n"] }); }
+};
+RolesPerformanceComponent1 = __decorate([
+    BizDoc({
+        selector: 'bizdoc-role-performance1'
+    })
+], RolesPerformanceComponent1);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent1, decorators: [{
+            type: Component,
+            args: [{ template: '', styles: [":host{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AccountService }, { type: SessionService }, { type: TranslateService }] });
+
 /** configuration componenets */
-const CORE_COMPONENTS = [RolesPerformanceComponent, CubePerformanceWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
+const CORE_COMPONENTS = [RolesPerformanceComponent, RolesPerformanceComponent1, CubePerformanceWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
     SubstitutionComponent, MoveToActionComponent, AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
     ActionsWidget, CubeAnalysisWidget, CubeDocumentsWidget, RecentsWidget, PersonalActivityWidget,
     CompareGroupsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
@@ -29968,7 +30159,7 @@ class SharedModule {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: SharedModule, declarations: [LocalizedStringPipe, HelpTipComponent, BoxFormComponent, BoxFormRowComponent, BoxFormControlComponent,
-            RolesPerformanceComponent,
+            RolesPerformanceComponent, RolesPerformanceComponent1,
             CubeUsageComponent,
             CubeDocumentsComponent,
             DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe, ToNowPipe,
@@ -30148,7 +30339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             type: NgModule,
             args: [{
                     declarations: [LocalizedStringPipe, HelpTipComponent, BoxFormComponent, BoxFormRowComponent, BoxFormControlComponent,
-                        RolesPerformanceComponent,
+                        RolesPerformanceComponent, RolesPerformanceComponent1,
                         CubeUsageComponent,
                         CubeDocumentsComponent,
                         DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe, ToNowPipe,
@@ -30872,7 +31063,8 @@ let SystemDiffComponent = class SystemDiffComponent {
      * @param index
      */
     compare(index) {
-        const { time: date1, file } = this.versions[index], version = this.versions.slice(index + 1).find(v => v.file === file);
+        const { time: date1, file } = this.versions[index], version = this.versions.slice(index + 1).
+            find(v => v.file === file);
         if (!version)
             return;
         const { time: date2 } = version;
@@ -31344,7 +31536,7 @@ let SystemDiffComponent = class SystemDiffComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SystemDiffComponent, deps: [{ token: PromptService }, { token: UtilityRef }, { token: TranslateService }, { token: DatasourceService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: SystemDiffComponent, selector: "ng-component", viewQueries: [{ propertyName: "contents", first: true, predicate: ["contents"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{flex:1 1 auto}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i6$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: SystemDiffComponent, selector: "ng-component", viewQueries: [{ propertyName: "contents", first: true, predicate: ["contents"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i6$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 SystemDiffComponent = __decorate([
     BizDoc({ selector: 'bizdoc-configuration-diff' })
@@ -31352,7 +31544,7 @@ SystemDiffComponent = __decorate([
 ], SystemDiffComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SystemDiffComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{flex:1 1 auto}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"] }]
+            args: [{ template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
@@ -31829,7 +32021,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DocumentTraceComponent, deps: [{ token: UtilityRef }, { token: SystemService }, { 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" } }, 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$1, descendants: true }], ngImport: i0, template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\n    <mat-form-field>\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i11$2.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPlacement", "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"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" } }, 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$1, descendants: true }], ngImport: i0, template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column gap\">\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i11$2.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPlacement", "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"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] }); }
 };
 DocumentTraceComponent = __decorate([
     BizDoc({ selector: 'bizdoc-trace-utility' })
@@ -31837,7 +32029,7 @@ DocumentTraceComponent = __decorate([
 ], DocumentTraceComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DocumentTraceComponent, decorators: [{
             type: Component,
-            args: [{ animations: [trigger('element', EnterExitRight)], template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\n    <mat-form-field>\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"] }]
+            args: [{ animations: [trigger('element', EnterExitRight)], template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column gap\">\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"] }]
         }], ctorParameters: () => [{ type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]