@bizdoc/core 1.14.2 → 1.14.6

package/fesm2020/bizdoc-core.mjs

@@ -65,7 +65,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import * as i8$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i23 from '@angular/flex-layout/flex';
-import { ESCAPE, ENTER, COMMA, RIGHT_ARROW, LEFT_ARROW, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
+import { ESCAPE, ENTER, COMMA, RIGHT_ARROW, LEFT_ARROW, UP_ARROW, DOWN_ARROW, SEMICOLON } from '@angular/cdk/keycodes';
 import * as i8$2 from '@angular/material/snack-bar';
 import { MatSnackBarModule, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import * as i9$1 from '@angular/material/menu';
@@ -75,11 +75,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i1$6 from '@angular/router';
 import { NavigationStart as NavigationStart$1, ActivationEnd, RouterModule } from '@angular/router';
 import * as i3$2 from '@angular/material/chips';
-import { MatChipsModule, MatChipList } from '@angular/material/chips';
+import { MatChipsModule, MatChipList, MatChipInput } from '@angular/material/chips';
 import * as i22 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { LayoutModule } from '@angular/cdk/layout';
-import * as i6$3 from '@angular/material/expansion';
+import * as i6$2 from '@angular/material/expansion';
 import { MatExpansionModule, MatExpansionPanel } from '@angular/material/expansion';
 import * as i5$2 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
@@ -95,7 +95,7 @@ import * as i9$4 from '@angular/material/sidenav';
 import { MatSidenavModule, MatSidenav } from '@angular/material/sidenav';
 import * as i19 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i6$2 from '@angular/material/grid-list';
+import * as i7$4 from '@angular/material/grid-list';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatStepperIntl, MatStepperModule } from '@angular/material/stepper';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -123,7 +123,7 @@ 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$4 from '@syncfusion/ej2-angular-grids';
+import * as i6$3 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 } from '@syncfusion/ej2-pivotview';
 import { Tooltip } from '@syncfusion/ej2-popups';
@@ -139,7 +139,7 @@ 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, GroupingBar, ExcelExport as ExcelExport$1, PivotChart, PivotViewComponent } from '@syncfusion/ej2-angular-pivotview';
-import * as i7$4 from '@syncfusion/ej2-angular-gantt';
+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';
 import duration from 'dayjs/plugin/duration';
@@ -2173,7 +2173,7 @@ const STRINGS = {
         DeleteFileAsk: 'Are you sure you want to delete this attachment?',
         DeleteCommentAsk: 'Are you sure you want to delete this comment?',
         GrantAccess: 'Grant Access',
-        GrantTip: 'May sign in on your behalf, view and take action',
+        GrantTip: 'May view and take action on your behalf',
         OutOfOfficeTip: 'Assign user on your absence',
         Timeline: 'Timeline',
         Back: 'Back',
@@ -6190,6 +6190,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
 const QUERY_CHAR = ':', PATH_CHAR = ';', ARG_CHAR = '&', PANE_CHAR = '~';
 const PANES_DATA = new InjectionToken('panes');
 class NavigationBase {
+    preventDefault() {
+        this._preventDefault = true;
+    }
 }
 class CollapseNavigation extends NavigationBase {
 }
@@ -6206,24 +6209,45 @@ class NavigationPaneBase extends NavigationBase {
 }
 class NavigationStart extends NavigationPaneBase {
 }
-class NavigationSelected extends NavigationPaneBase {
+/** pane fucus change */
+class NavigationFocus extends NavigationPaneBase {
 }
 class NavigationEnd extends NavigationPaneBase {
 }
+class NavigationMode extends NavigationPaneBase {
+    constructor(mode, pane) {
+        super(pane);
+        this.mode = mode;
+    }
+}
+class NavigationExpand extends NavigationPaneBase {
+    constructor(expended, pane) {
+        super(pane);
+        this.expended = expended;
+    }
+}
+class NavigationResize extends NavigationPaneBase {
+    constructor(dimentions, pane) {
+        super(pane);
+        this.dimentions = dimentions;
+    }
+}
+class NavigationClose extends NavigationPaneBase {
+}
 class ParamNavigation extends NavigationPaneBase {
-    constructor(params, slot) {
-        super(slot);
+    constructor(params, pane) {
+        super(pane);
         this.params = params;
     }
 }
 class QueryParamNavigation extends NavigationPaneBase {
-    constructor(queryParams, slot) {
-        super(slot);
+    constructor(queryParams, pane) {
+        super(pane);
         this.queryParams = queryParams;
     }
 }
 class PaneRef {
-    constructor(component, mode, _options) {
+    constructor(component, injector, _options) {
         this.component = component;
         this._options = _options;
         this._comm$ = new Subject();
@@ -6231,55 +6255,52 @@ class PaneRef {
         this._data$ = new BehaviorSubject({});
         this._params$ = new BehaviorSubject({});
         this._queryParams$ = new BehaviorSubject({});
-        this._resize$ = new BehaviorSubject({});
-        this.expandable = true;
-        const { data, params, queryParams, path, queryString, title, group, icon, help, guide, animation, fullscreen, expandable } = _options;
-        this._mode$ = new BehaviorSubject(mode);
-        this._fullscreen$ = new BehaviorSubject(fullscreen);
-        this._path = path || '';
+        this._events$ = new Subject();
+        const { stretchable, mode, data, params, queryParams, path, queryString, title, group, icon, help, guide, animation, expanded, expandable } = _options;
+        this._path = path;
+        this._mode = mode;
+        this._stretchable = stretchable;
+        this._expanded = expanded;
+        this._queryString = queryString;
+        this._expandable = expandable !== false;
+        this._injector = Injector.create([
+            { provide: PaneRef, useValue: this }
+        ], injector);
         this.title = title;
         this.group = group;
         this.guide = guide;
         this.help = help;
         this.icon = icon;
         this.animation = animation;
-        this._queryString = queryString;
-        if (expandable === false)
-            this.expandable = false;
-        this._data$.next(data);
+        data && this._data$.next(data);
         params && this._params$.next(params);
         queryParams && this._queryParams$.next(queryParams);
     }
-    get injector() {
-        return this._injector;
-    }
-    get fullscreen() {
-        return this._fullscreen$.value;
-    }
-    get fullscreenChange() {
-        return this._fullscreen$.asObservable();
-    }
-    get fullPath() { return this._path + (this._queryString ? (QUERY_CHAR + this._queryString) : ''); }
+    get expandable() { return this._expandable; }
+    get injector() { return this._injector; }
+    get expanded() { return this._expanded; }
+    get fullPath() { return (this._path || '') + (this._queryString ? (QUERY_CHAR + this._queryString) : ''); }
     get instance() { return this._instance; }
     get data() { return this._data$.value; }
     get dataChange() { return this._data$.asObservable(); }
     get params() { return this._params$.value; }
-    get resize() { return this._resize$.asObservable(); }
     get paramsChange() { return this._params$.asObservable(); }
     get queryString() { return this._queryString; }
     get queryParams() { return this._queryParams$.value; }
     get queryParamsChange() { return this._queryParams$.asObservable(); }
+    get events() { return this._events$.asObservable(); }
+    get resized() { return this.events.pipe(filter$1(e => e instanceof NavigationResize)); }
+    get closing() { return this.events.pipe(filter$1(e => e instanceof NavigationClose)); }
+    get expandeding() { return this.events.pipe(filter$1(e => e instanceof NavigationExpand)); }
     get path() { return this._path; }
     ;
-    get modeChange() { return this._mode$.asObservable(); }
-    ;
-    get mode() { return this._mode$.value; }
+    get mode() { return this._mode; }
     ;
     get parent() { return this._options.parent; }
     ;
-    get stretch() { return this._options.stretch; }
+    get stretchable() { return this._stretchable; }
     ;
-    set stretch(val) { this._options.stretch = val; }
+    set stretchable(val) { this._stretchable = val; }
     get dialog() { return this._options.dialog; }
     ;
     get dismissable() { return this._options.dismissable; }
@@ -6306,10 +6327,8 @@ class PaneRef {
         this._comm$.complete();
         this._data$.complete();
         this._params$.complete();
-        this._resize$.complete();
         this._queryParams$.complete();
-        this._fullscreen$.complete();
-        this._mode$.complete();
+        this._events$.complete();
     }
 }
 
@@ -7029,9 +7048,6 @@ class PanesRouter {
         this._comm$ = new Subject();
         this._navigate$ = new Subject();
     }
-    get active() {
-        return this._active;
-    }
     navigate(commands, options) {
         return new Promise((resolve, reject) => {
             this._events$.pipe(filter(e => e instanceof NavigationStart), first()).subscribe((e) => resolve(e.pane), reject);
@@ -9257,7 +9273,8 @@ class ComposePaneComponent {
             else
                 container.classList.remove('drag');
         });
-        this._pane.fullscreenChange.subscribe(f => this.expendable = !f);
+        this.expendable = !this._pane.expanded;
+        this._pane.expandeding.subscribe(e => this.expendable = !e);
     }
     close() {
         this._pane.close();
@@ -9420,8 +9437,7 @@ class BrowsePaneComponent {
                 this._pane.title = this._translate.get('Tags');
             this.filters = p;
         });
-        const events = this._router.events.pipe(takeUntil(this._destroy));
-        events.pipe(filter(e => (e instanceof ParamNavigation || e instanceof NavigationStart || e instanceof NavigationSelected)
+        this._router.events.pipe(takeUntil(this._destroy), filter(e => (e instanceof ParamNavigation || e instanceof NavigationStart || e instanceof NavigationFocus)
             && e.pane.component === ComposePaneComponent)).
             subscribe((e) => this.items.select(e.pane.data.item.id));
         this.contains.valueChanges.pipe(takeUntil(this._destroy), debounceTime(200)).subscribe(v => this.filters = { ...this.filters, contains: v });
@@ -11147,7 +11163,7 @@ class CubeViewComponent {
         this._viewDestroy = new Subject();
     }
     ngOnInit() {
-        this._resizing.pipe(debounceTime(200)).subscribe(() => {
+        this._resizing.pipe(debounceTime(150)).subscribe(() => {
             const { width, height } = this._dim();
             switch (this.view.type) {
                 case 'Pivot':
@@ -11418,10 +11434,10 @@ class CubeViewPaneComponent extends ViewBase {
             if (this.view.type === 'Spreadsheet' ||
                 this.view.type === 'Grid' ||
                 (this.view.type === 'Pivot' && !this.view.chartType))
-                this._pane.stretch = true;
+                this._pane.stretchable = true;
         });
         this._pane.queryParamsChange.subscribe(p => this.originalAxes = p);
-        this._pane.resize.subscribe(() => this.viewPane.resize());
+        this._pane.resized.subscribe(() => this.viewPane.resize());
     }
     /**
      *
@@ -11451,12 +11467,12 @@ class CubeViewPaneComponent extends ViewBase {
     }
 }
 CubeViewPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: CubeViewPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: Popup }, { token: RouterImpl }, { token: CubeService }, { token: GuideService }], target: i0.ɵɵFactoryTarget.Component });
-CubeViewPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: CubeViewPaneComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "viewPane", first: true, predicate: CubeViewComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"view.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"vp.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\r\n          data-help=\"download\" (click)=\"vp.exportToExcel()\">\r\n    <mat-icon>save_alt</mat-icon>\r\n  </button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">tune</mat-icon></button>\r\n  <mat-menu #pmenu>\r\n    <button mat-menu-item *ngFor=\"let p of patterns\" (click)=\"patternChange(p)\">\r\n      {{p.title}}\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filterToggle($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\"><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<!--<bizdoc-cube-tags [(filters)]=\"axes\" [cube]=\"cube\"></bizdoc-cube-tags>-->\r\n<bizdoc-cube-view [filters]=\"axes\" #vp\r\n                  (explore)=\"explore($event)\"\r\n                  [cube]=\"cube\"\r\n                  [view]=\"view\"\r\n                  [(loading)]=\"loading\"></bizdoc-cube-view>\r\n<!--<ng-lottie options=\"{path: 'assets/8318-loader.json'}\" *ngIf=\"loading\"></ng-lottie>-->\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host ::ng-deep .cube-view{flex:1 auto}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: CubeViewComponent, selector: "bizdoc-cube-view", inputs: ["filters", "cube", "view", "loading"], outputs: ["explore", "loadingChange"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": TranslatePipe } });
+CubeViewPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: CubeViewPaneComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "viewPane", first: true, predicate: CubeViewComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"view.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"vp.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\r\n          data-help=\"download\" (click)=\"vp.exportToExcel()\">\r\n    <mat-icon>save_alt</mat-icon>\r\n  </button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">tune</mat-icon></button>\r\n  <mat-menu #pmenu>\r\n    <button mat-menu-item *ngFor=\"let p of patterns\" (click)=\"patternChange(p)\">\r\n      {{p.title}}\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filterToggle($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\"><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-cube-view [filters]=\"axes\" #vp\r\n                  (explore)=\"explore($event)\"\r\n                  [cube]=\"cube\"\r\n                  [view]=\"view\"\r\n                  [(loading)]=\"loading\"></bizdoc-cube-view>\r\n<!--<ng-lottie options=\"{path: 'assets/8318-loader.json'}\" *ngIf=\"loading\"></ng-lottie>-->\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host ::ng-deep .cube-view{flex:1 auto}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: CubeViewComponent, selector: "bizdoc-cube-view", inputs: ["filters", "cube", "view", "loading"], outputs: ["explore", "loadingChange"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i9$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: CubeViewPaneComponent, decorators: [{
             type: Component,
             args: [{ host: {
                         class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"view.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"vp.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\r\n          data-help=\"download\" (click)=\"vp.exportToExcel()\">\r\n    <mat-icon>save_alt</mat-icon>\r\n  </button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">tune</mat-icon></button>\r\n  <mat-menu #pmenu>\r\n    <button mat-menu-item *ngFor=\"let p of patterns\" (click)=\"patternChange(p)\">\r\n      {{p.title}}\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filterToggle($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\"><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<!--<bizdoc-cube-tags [(filters)]=\"axes\" [cube]=\"cube\"></bizdoc-cube-tags>-->\r\n<bizdoc-cube-view [filters]=\"axes\" #vp\r\n                  (explore)=\"explore($event)\"\r\n                  [cube]=\"cube\"\r\n                  [view]=\"view\"\r\n                  [(loading)]=\"loading\"></bizdoc-cube-view>\r\n<!--<ng-lottie options=\"{path: 'assets/8318-loader.json'}\" *ngIf=\"loading\"></ng-lottie>-->\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host ::ng-deep .cube-view{flex:1 auto}\n"] }]
+                    }, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"view.guide\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"vp.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\"\r\n          data-help=\"download\" (click)=\"vp.exportToExcel()\">\r\n    <mat-icon>save_alt</mat-icon>\r\n  </button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">tune</mat-icon></button>\r\n  <mat-menu #pmenu>\r\n    <button mat-menu-item *ngFor=\"let p of patterns\" (click)=\"patternChange(p)\">\r\n      {{p.title}}\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n  <button mat-icon-button (click)=\"filterToggle($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\"><mat-icon [class.filled]=\"anyFilters\">filter_list</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-cube-view [filters]=\"axes\" #vp\r\n                  (explore)=\"explore($event)\"\r\n                  [cube]=\"cube\"\r\n                  [view]=\"view\"\r\n                  [(loading)]=\"loading\"></bizdoc-cube-view>\r\n<!--<ng-lottie options=\"{path: 'assets/8318-loader.json'}\" *ngIf=\"loading\"></ng-lottie>-->\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host ::ng-deep .cube-view{flex:1 auto}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: PaneRef }, { type: Popup }, { type: RouterImpl }, { type: CubeService }, { type: GuideService }]; }, propDecorators: { viewPane: [{
                 type: ViewChild,
                 args: [CubeViewComponent, { static: true }]
@@ -13104,7 +13120,7 @@ class ReportPaneComponent {
             this._cd.detectChanges();
         });
         this._pane.queryParamsChange.subscribe(() => this.viewer.execute());
-        this._pane.resize.subscribe(() => this.viewer.resize());
+        this._pane.resized.subscribe(() => this.viewer.resize());
     }
     filter(evt) {
         this._popup.open(ReportArgumentsComponent, evt.currentTarget).opened.
@@ -13542,7 +13558,7 @@ class WorkflowComponent {
             this.diagram.fitToPage();
             this.dirty = false;
         });
-        this._pane.resize.pipe(takeUntil(this._destroy)).subscribe(() => this.diagram.refresh());
+        this._pane.resized.pipe(takeUntil(this._destroy)).subscribe(() => this.diagram.refresh());
     }
     _palettes() {
         this._session.profile.nodes.forEach(n => {
@@ -15021,7 +15037,7 @@ class TracePaneComponent {
             this.model = d['item'];
             this._pane.group = `#${this.model.number}`;
         });
-        this._pane.resize.subscribe(() => {
+        this._pane.resized.subscribe(() => {
             this.flow.resize();
         });
     }
@@ -15412,7 +15428,7 @@ class SchedulerPaneComponent {
             this.date = date ? dayjs(date.decodeId()).startOf('minute').toDate() :
                 dayjs().startOf('day').toDate();
         });
-        this._pane.resize.subscribe(this._resize.bind(this));
+        this._pane.resized.subscribe(this._resize.bind(this));
     }
     _resize() {
         this.height = (this._element.nativeElement.offsetParent.clientHeight) + 'px';
@@ -17133,53 +17149,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: PaneRef }, { type: TranslateService }, { type: AccountService }, { type: ChatService }, { type: SessionService }]; } });
 
-const TIME = 1000;
-class WindowTitleService {
-    constructor(config, users, translate, hub) {
-        this.config = config;
-        this._inFocus = true;
-        this._isActive = false;
-        this._mode = false;
-        this._appTitle = this.config.appTitle || 'BizDoc';
-        document.addEventListener('blur', () => this._inFocus = false);
-        document.addEventListener('focus', () => {
-            this._isActive &&
-                this._clear();
-            this._inFocus = true;
-        });
-        hub.new$.subscribe(i => users.get(i.model.senderId).subscribe(u => !this._inFocus && this._show(translate.get('NewFrom', i.model.number, u.name))));
-        hub.notify$.subscribe(n => !this._inFocus && this._show(n.model.title));
-        this._title = document.title;
-    }
-    set(value) {
-        document.title = this._title = value ? `${this._appTitle} - ${value}` : this._appTitle;
-    }
-    _show(message) {
-        this._message = message;
-        this._isActive = true;
-        this._task && clearInterval(this._task);
-        this._task = setInterval(() => {
-            this._mode = !this._mode;
-            document.title = this._mode ? this._title : this._message;
-        }, TIME);
-    }
-    _clear() {
-        clearInterval(this._task);
-        this._task = null;
-        document.title = this._title;
-        this._isActive = false;
-    }
-}
-WindowTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WindowTitleService, deps: [{ token: BIZDOC_CONFIG }, { token: AccountService }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Injectable });
-WindowTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WindowTitleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WindowTitleService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [BIZDOC_CONFIG]
-                }] }, { type: AccountService }, { type: TranslateService }, { type: HubService }]; } });
-
 class WidgetRef {
     constructor(_widget, dim) {
         this._widget = _widget;
@@ -17211,6 +17180,7 @@ class WidgetItemComponent {
     ngOnInit() {
         this._resizing.pipe(debounceTime(150)).subscribe(() => this._widgetRef._resize.next(this._dim()));
     }
+    get widgetRef() { return this._widgetRef; }
     ngAfterViewInit() {
         // dom height
         setTimeout(() => {
@@ -17274,14 +17244,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 args: ['window:resize']
             }] } });
 
+const TIME = 1000;
+class WindowTitleService {
+    constructor(config, users, translate, hub) {
+        this.config = config;
+        this._inFocus = true;
+        this._isActive = false;
+        this._mode = false;
+        this._appTitle = this.config.appTitle || 'BizDoc';
+        document.addEventListener('blur', () => this._inFocus = false);
+        document.addEventListener('focus', () => {
+            this._isActive &&
+                this._clear();
+            this._inFocus = true;
+        });
+        hub.new$.subscribe(i => users.get(i.model.senderId).subscribe(u => !this._inFocus && this._show(translate.get('NewFrom', i.model.number, u.name))));
+        hub.notify$.subscribe(n => !this._inFocus && this._show(n.model.title));
+        this._title = document.title;
+    }
+    set(value) {
+        document.title = this._title = value ? `${this._appTitle} - ${value}` : this._appTitle;
+    }
+    _show(message) {
+        this._message = message;
+        this._isActive = true;
+        this._task && clearInterval(this._task);
+        this._task = setInterval(() => {
+            this._mode = !this._mode;
+            document.title = this._mode ? this._title : this._message;
+        }, TIME);
+    }
+    _clear() {
+        clearInterval(this._task);
+        this._task = null;
+        document.title = this._title;
+        this._isActive = false;
+    }
+}
+WindowTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WindowTitleService, deps: [{ token: BIZDOC_CONFIG }, { token: AccountService }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Injectable });
+WindowTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WindowTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: WindowTitleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BIZDOC_CONFIG]
+                }] }, { type: AccountService }, { type: TranslateService }, { type: HubService }]; } });
+
 /** dashboard component*/
 class DashboardComponent {
-    constructor(_guide, observableMedia, session, title, translate) {
+    constructor(_guide, observableMedia, session, pane, title, translate) {
         this._guide = _guide;
         this._destroy = new Subject();
         this.cols = 3;
         title.set(translate.get('Dashboard'));
         this.widgets = session.profile.widgets;
+        pane?.resized.subscribe(() => this.components?.forEach(c => c.resize.bind(this)));
         observableMedia.asObservable().pipe(takeUntil(this._destroy)).subscribe(m => {
             const { mqAlias } = m[0];
             this.cols = (mqAlias === 'xs' || mqAlias === 'sm') ? 1 : mqAlias === 'md' ? 2 : 3;
@@ -17295,12 +17313,17 @@ class DashboardComponent {
         this._destroy.complete();
     }
 }
-DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DashboardComponent, deps: [{ token: GuideService }, { token: i2$4.MediaObserver }, { token: SessionService }, { token: WindowTitleService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DashboardComponent, selector: "bizdoc-dashboard", ngImport: i0, template: "<mat-grid-list [cols]=\"cols\" @deshboard>\r\n  <mat-grid-tile *ngFor=\"let w of widgets\" [colspan]=\"w.cols && w.cols <= cols ? w.cols : 1\" [rowspan]=\"w.rows || 1\">\r\n    <mat-card @card>\r\n      <mat-card-header>\r\n        <mat-card-title [attr.data-guide]=\"'widget-'+w.name\">\r\n          <span>{{w.title}}</span>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"widget.refresh()\" [bizdocTooltip]=\"'Refresh'|translate\" [attr.aria-label]=\"'Refresh'|translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n          <button mat-icon-button (click)=\"widget.filter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter'|translate\" *ngIf=\"w.arguments.length||w.argumentsTemplate\"><mat-icon>filter_list</mat-icon></button>\r\n          <button mat-icon-button (click)=\"guide(w.guide)\" [bizdocTooltip]=\"'Help' | translate\" [attr.aria-label]=\"'Help'|translate\" *ngIf=\"w.guide\"><mat-icon>help_outline</mat-icon></button>\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <bizdoc-widget [model]=\"w\" #widget></bizdoc-widget>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n</mat-grid-list>\r\n", styles: [":host{width:100%;height:100%;overflow-y:auto}@media only screen and (min-width: 600px){:host{min-width:600px}}.mat-card{width:calc(100% - 50px);height:calc(100% - 50px);overflow:hidden}.mat-card ::ng-deep .mat-card-header-text{width:100%}.mat-card .mat-card-title{display:flex;flex-direction:row}.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}\n"], components: [{ type: i6$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i6$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i19.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i19.MatCardHeader, selector: "mat-card-header" }, { 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: WidgetItemComponent, selector: "bizdoc-widget", inputs: ["model"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i19.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }], pipes: { "translate": TranslatePipe }, animations: [deshboardAnimation, cardsAnimation] });
+DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DashboardComponent, deps: [{ token: GuideService }, { token: i2$4.MediaObserver }, { token: SessionService }, { token: PaneRef, optional: true }, { token: WindowTitleService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DashboardComponent, selector: "bizdoc-dashboard", viewQueries: [{ propertyName: "components", predicate: WidgetItemComponent, descendants: true }], ngImport: i0, template: "<mat-grid-list [cols]=\"cols\" @deshboard>\r\n  <mat-grid-tile *ngFor=\"let w of widgets\" [colspan]=\"w.cols && w.cols <= cols ? w.cols : 1\" [rowspan]=\"w.rows || 1\">\r\n    <mat-card @card>\r\n      <mat-card-header>\r\n        <mat-card-title [attr.data-guide]=\"'widget-'+w.name\">\r\n          <span>{{w.title}}</span>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"widget.refresh()\" [bizdocTooltip]=\"'Refresh'|translate\" [attr.aria-label]=\"'Refresh'|translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n          <button mat-icon-button (click)=\"widget.filter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter'|translate\" *ngIf=\"w.arguments.length||w.argumentsTemplate\"><mat-icon>filter_list</mat-icon></button>\r\n          <button mat-icon-button (click)=\"guide(w.guide)\" [bizdocTooltip]=\"'Help' | translate\" [attr.aria-label]=\"'Help'|translate\" *ngIf=\"w.guide\"><mat-icon>help_outline</mat-icon></button>\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <bizdoc-widget [model]=\"w\" #widget></bizdoc-widget>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n</mat-grid-list>\r\n", styles: [":host{width:100%;height:100%;overflow-y:auto}@media only screen and (min-width: 600px){:host{min-width:600px}}.mat-card{width:calc(100% - 50px);height:calc(100% - 50px);overflow:hidden}.mat-card ::ng-deep .mat-card-header-text{width:100%}.mat-card .mat-card-title{display:flex;flex-direction:row}.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}\n"], components: [{ type: i7$4.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i7$4.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i19.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i19.MatCardHeader, selector: "mat-card-header" }, { 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: WidgetItemComponent, selector: "bizdoc-widget", inputs: ["model"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i19.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }], pipes: { "translate": TranslatePipe }, animations: [deshboardAnimation, cardsAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-dashboard', animations: [deshboardAnimation, cardsAnimation], template: "<mat-grid-list [cols]=\"cols\" @deshboard>\r\n  <mat-grid-tile *ngFor=\"let w of widgets\" [colspan]=\"w.cols && w.cols <= cols ? w.cols : 1\" [rowspan]=\"w.rows || 1\">\r\n    <mat-card @card>\r\n      <mat-card-header>\r\n        <mat-card-title [attr.data-guide]=\"'widget-'+w.name\">\r\n          <span>{{w.title}}</span>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"widget.refresh()\" [bizdocTooltip]=\"'Refresh'|translate\" [attr.aria-label]=\"'Refresh'|translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>\r\n          <button mat-icon-button (click)=\"widget.filter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter'|translate\" *ngIf=\"w.arguments.length||w.argumentsTemplate\"><mat-icon>filter_list</mat-icon></button>\r\n          <button mat-icon-button (click)=\"guide(w.guide)\" [bizdocTooltip]=\"'Help' | translate\" [attr.aria-label]=\"'Help'|translate\" *ngIf=\"w.guide\"><mat-icon>help_outline</mat-icon></button>\r\n        </mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content>\r\n        <bizdoc-widget [model]=\"w\" #widget></bizdoc-widget>\r\n      </mat-card-content>\r\n    </mat-card>\r\n  </mat-grid-tile>\r\n</mat-grid-list>\r\n", styles: [":host{width:100%;height:100%;overflow-y:auto}@media only screen and (min-width: 600px){:host{min-width:600px}}.mat-card{width:calc(100% - 50px);height:calc(100% - 50px);overflow:hidden}.mat-card ::ng-deep .mat-card-header-text{width:100%}.mat-card .mat-card-title{display:flex;flex-direction:row}.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}\n"] }]
-        }], ctorParameters: function () { return [{ type: GuideService }, { type: i2$4.MediaObserver }, { type: SessionService }, { type: WindowTitleService }, { type: TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: GuideService }, { type: i2$4.MediaObserver }, { type: SessionService }, { type: PaneRef, decorators: [{
+                    type: Optional
+                }] }, { type: WindowTitleService }, { type: TranslateService }]; }, propDecorators: { components: [{
+                type: ViewChildren,
+                args: [WidgetItemComponent]
+            }] } });
 
 /** dashboard component*/
 class DashboardPaneComponent {
@@ -17357,6 +17380,7 @@ class ViewItemComponent {
         this._destroy = new Subject();
     }
     get hidden() { return this._viewRef && this._viewRef.hidden; }
+    get viewRef() { return this._viewRef; }
     ngAfterViewInit() {
         // dom
         const factory = this._cf.resolve(this.view.template);
@@ -17368,7 +17392,7 @@ class ViewItemComponent {
         }
         catch (e) {
         }
-        this._resizing.pipe(debounceTime(200), takeUntil$1(this._destroy)).subscribe(() => this._viewRef._resize.next(this._dim()));
+        this._resizing.pipe(debounceTime(150), takeUntil$1(this._destroy)).subscribe(() => this._viewRef._resize.next(this._dim()));
     }
     _dim() {
         let el = this._vc.element.nativeElement.parentElement, dim = el.getBoundingClientRect();
@@ -17415,31 +17439,36 @@ class DocumentViewsComponent {
         this._cd.detectChanges();
         this.views = this._session.profile.views.filter(v => !v.forms || v.forms.indexOf(this.model.formId) > -1);
     }
+    resize() {
+        this.components.forEach(c => c.resize());
+    }
 }
 DocumentViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DocumentViewsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
-DocumentViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DocumentViewsComponent, selector: "bizdoc-document-views", inputs: { model: "model" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let v of views; let last = last;\">\r\n  <bizdoc-document-view-item [model]=\"model\" [view]=\"v\" #view></bizdoc-document-view-item>\r\n  <!--<hr *ngIf=\"!view.hidden && !last\" />-->\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column}hr{opacity:.4;margin:4px 8px}:host ::ng-deep .nav-toolbar{display:flex;flex-direction:row}:host ::ng-deep .view{display:flex;flex-direction:column;position:relative}:host ::ng-deep .loading-view{position:absolute;width:100%;height:100%;text-align:-webkit-center}\n"], components: [{ type: ViewItemComponent, selector: "bizdoc-document-view-item", inputs: ["model", "view"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DocumentViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DocumentViewsComponent, selector: "bizdoc-document-views", inputs: { model: "model" }, viewQueries: [{ propertyName: "components", predicate: ViewItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let v of views; let last = last;\">\r\n  <bizdoc-document-view-item [model]=\"model\" [view]=\"v\" #view></bizdoc-document-view-item>\r\n  <!--<hr *ngIf=\"!view.hidden && !last\" />-->\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column}hr{opacity:.4;margin:4px 8px}:host ::ng-deep .nav-toolbar{display:flex;flex-direction:row}:host ::ng-deep .view{display:flex;flex-direction:column;position:relative}:host ::ng-deep .loading-view{position:absolute;width:100%;height:100%;text-align:-webkit-center}\n"], components: [{ type: ViewItemComponent, selector: "bizdoc-document-view-item", inputs: ["model", "view"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DocumentViewsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-document-views', template: "<ng-container *ngFor=\"let v of views; let last = last;\">\r\n  <bizdoc-document-view-item [model]=\"model\" [view]=\"v\" #view></bizdoc-document-view-item>\r\n  <!--<hr *ngIf=\"!view.hidden && !last\" />-->\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column}hr{opacity:.4;margin:4px 8px}:host ::ng-deep .nav-toolbar{display:flex;flex-direction:row}:host ::ng-deep .view{display:flex;flex-direction:column;position:relative}:host ::ng-deep .loading-view{position:absolute;width:100%;height:100%;text-align:-webkit-center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SessionService }]; }, propDecorators: { model: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SessionService }]; }, propDecorators: { components: [{
+                type: ViewChildren,
+                args: [ViewItemComponent]
+            }], model: [{
                 type: Input
             }] } });
 
 class DocumentViewPaneComponent {
-    constructor(session, translate, _pane) {
-        this._pane = _pane;
-        _pane.title = translate.get('View');
-        _pane.dataChange.subscribe(d => {
+    constructor(session, translate, pane) {
+        pane.title = translate.get('View');
+        pane.dataChange.subscribe(d => {
             this.model = d['item'];
             const form = session.profile.forms.find(f => f.name === this.model.formId);
-            this._pane.group =
-                `#${this.model.number}`;
-            _pane.icon = form.icon;
+            pane.group = `#${this.model.number}`;
+            pane.icon = form.icon;
         });
+        pane.resized.subscribe(() => this.views.resize());
     }
 }
 DocumentViewPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DocumentViewPaneComponent, deps: [{ token: SessionService }, { token: TranslateService }, { token: PaneRef }], target: i0.ɵɵFactoryTarget.Component });
-DocumentViewPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DocumentViewPaneComponent, selector: "ng-component", ngImport: i0, template: '<bizdoc-document-views [model]=model></bizdoc-document-views>', isInline: true, styles: [":host{min-width:450px;flex-grow:1}\n"], components: [{ type: DocumentViewsComponent, selector: "bizdoc-document-views", inputs: ["model"] }] });
+DocumentViewPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DocumentViewPaneComponent, selector: "ng-component", viewQueries: [{ propertyName: "views", first: true, predicate: DocumentViewsComponent, descendants: true }], ngImport: i0, template: '<bizdoc-document-views [model]=model></bizdoc-document-views>', isInline: true, styles: [":host{min-width:450px;flex-grow:1}\n"], components: [{ type: DocumentViewsComponent, selector: "bizdoc-document-views", inputs: ["model"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DocumentViewPaneComponent, decorators: [{
             type: Component,
             args: [{
@@ -17448,7 +17477,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
   min-width: 450px;
     flex-grow: 1;}`]
                 }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: TranslateService }, { type: PaneRef }]; } });
+        }], ctorParameters: function () { return [{ type: SessionService }, { type: TranslateService }, { type: PaneRef }]; }, propDecorators: { views: [{
+                type: ViewChild,
+                args: [DocumentViewsComponent]
+            }] } });
 
 class DocumentInfoComponent {
     constructor(_session, _cf, _injector) {
@@ -17642,6 +17674,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             args: [{ selector: 'bizdoc-about', template: "<h2 mat-dialog-title>BizDoc v{{version}}</h2>\r\n<mat-dialog-content>\r\n  <div *ngIf=\"license; else none\">\r\n    <div [ngSwitch]=\"license.mode\">\r\n      <div *ngSwitchCase=\"'Grace'\"> {{\"GraceLicense\" | translate : dayjs(license.expiration).toNow() }}</div>\r\n      <div *ngSwitchCase=\"'Limited'\">{{'LimitLicense'|translate}}</div>\r\n      <div *ngSwitchCase=\"'Expired'\">{{\"ExpiredLicense\" | translate : (license.expiration | amTimeAgo)}}</div>\r\n    </div>\r\n    <div *ngIf=\"license.companyName\" [innerHtml]='\"LicencedTo\" | translate : license.companyName'></div>\r\n  </div>\r\n  <br />\r\n  <span>&copy; Moding Ltd.</span>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button mat-dialog-close>{{'OK'|translate}}</button>\r\n</mat-dialog-actions>\r\n<ng-template #none>\r\n  <div>{{'EvaluationLicense' | translate}}</div>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: SessionService }]; } });
 
+class UserNamePipe {
+    constructor(_accounts) {
+        this._accounts = _accounts;
+    }
+    transform(value) {
+        const subject = new BehaviorSubject(null);
+        this._accounts.get(value).subscribe(u => subject.next(u.name));
+        return subject;
+    }
+}
+UserNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: UserNamePipe, deps: [{ token: AccountService }], target: i0.ɵɵFactoryTarget.Pipe });
+UserNamePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: UserNamePipe, name: "userName" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: UserNamePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'userName' }]
+        }], ctorParameters: function () { return [{ type: AccountService }]; } });
+
 const OPTION_PANEL = new InjectionToken('options');
 /** options component*/
 class OptionsComponent {
@@ -17663,7 +17712,7 @@ class OptionsComponent {
         this.language = this._fb.control(this._session.language);
         this.aRIA = this._fb.control(this._session.aria);
         this.languages = this._session.languages;
-        this.gusers = this._fb.control(null);
+        this.gusers = this._fb.control([]);
         this.substitueId = this._fb.control(null);
         this.form = this._fb.group({
             notifications: this._fb.group({
@@ -17697,8 +17746,7 @@ class OptionsComponent {
                 users: this._fb.control(null, this._requiredValidator)
             })
         });
-        this.separatorKeysCodes = [ENTER, COMMA];
-        this._me = this._session.userId;
+        this.separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
         this.display = (item) => {
             return item ? item.name : null;
         };
@@ -17734,17 +17782,33 @@ class OptionsComponent {
         emails.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
             subscribe(active => this._toggle(emails, active, 'mail', 'chat', 'notifications', 'events'));
         grantAccess.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
-            subscribe(active => active ? this.gusers.enable() : this.gusers.enable());
+            subscribe(active => {
+            if (active) {
+                this.gusers.enable();
+                this.grantInput.focus();
+            }
+            else
+                this.gusers.enable();
+        });
         outOfOffice.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
             subscribe(active => {
-            active ? this.substitueId.enable() : this.substitueId.disable();
+            if (active) {
+                this.substitueId.enable();
+                this.substitueInput.focus();
+            }
+            else
+                this.substitueId.disable();
             this._toggle(outOfOffice, active, 'from');
             this._toggle(outOfOffice, active && outOfOffice.controls['from'].value, 'to');
         });
         outOfOffice.controls['from'].valueChanges.pipe(takeUntil(this._destroy)).
             subscribe(from => this._toggle(outOfOffice, from !== null, 'to'));
-        this.gusers$ = this.gusers.valueChanges.pipe(takeUntil(this._destroy), switchMap(v => isString(v) ? this._accounts.findAll(v) : of([])), map(r => r.filter(u => u.id !== this._me)));
-        this.susers$ = this.substitueId.valueChanges.pipe(takeUntil(this._destroy), tap(v => !v && outOfOffice.controls['substitueId'].setValue(null)), switchMap(v => isString(v) ? this._accounts.findAll(v) : of([])), map(r => r.filter(u => u.id !== this._me)));
+        this.gusers$ = this.gusers.valueChanges.pipe(takeUntil(this._destroy), filter(v => isString(v)), debounceTime(100), switchMap(v => this._accounts.findAll(v)), map(r => {
+            const exclude = grantAccess.value.users?.slice() || [];
+            exclude.push(this._session.profile.userId);
+            return r.filter(u => exclude.indexOf(u.id) < 0);
+        }));
+        this.susers$ = this.substitueId.valueChanges.pipe(takeUntil(this._destroy), tap(v => !v && outOfOffice.controls['substitueId'].setValue(null)), filter(v => isString(v)), switchMap(v => this._accounts.findAll(v)), map(r => r.filter(u => u.id !== this._session.profile.userId)));
         if (options.outOfOffice.substitueId)
             this._accounts.get(options.outOfOffice.substitueId).subscribe(u => this.substitueId.setValue(u, { emitEvent: false }));
         if (this._option)
@@ -17769,9 +17833,6 @@ class OptionsComponent {
     toggleSound() {
         this.form.controls['notifications'].controls['sound'].setValue(!this.options.notifications.sound);
     }
-    nameOf(id) {
-        return this._accounts.get(id).pipe(map(u => u.name));
-    }
     addTag(event) {
         const input = event.input;
         const value = event.value;
@@ -17824,17 +17885,23 @@ class OptionsComponent {
     }
 }
 OptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: OptionsComponent, deps: [{ token: OPTION_PANEL }, { token: i1$4.OverlayRef }, { token: i1$2.FormBuilder }, { token: AccountService }, { token: PromptService }, { token: SessionService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-OptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: OptionsComponent, selector: "bizdoc-options", viewQueries: [{ propertyName: "outOfOffice", first: true, predicate: ["outOfOffice"], descendants: true, read: MatExpansionPanel, static: true }, { propertyName: "notifications", first: true, predicate: ["notifications"], descendants: true, read: MatExpansionPanel, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel #notifications>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Notifications' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>notifications</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"notifications\" fxLayout=\"column\">\r\n        <div fxLayout=\"row\">\r\n          <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"toggleSound()\" [bizdocTooltip]=\"'Sound'|translate\"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #emails>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Emails' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>alternate_email</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"emails\" fxLayout=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #outOfOffice>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'OutOfOffice' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>trending_flat</mat-icon>-->\r\n          <!--{{'OutOfOfficeTip' | translate}}-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"outOfOffice\" fxLayout=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field fxFlex>\r\n          <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\"\r\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                            (optionSelected)=\"setSubstitute($event)\">\r\n            <mat-option *ngFor=\"let u of susers$ | async\" [value]=\"u\">\r\n              <span>{{u.name}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <div>\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #from></mat-datepicker>\r\n          </mat-form-field>\r\n          &nbsp;\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value.outOfOffice?.from\" placeholder=\"{{'To'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #to></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #grantAccess>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'GrantAccess' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>account_circle</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"grantAccess\" class=\"grant-section\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-list #grantList [attr.aria-label]=\"\">\r\n            <mat-chip *ngFor=\"let u of (form.value.grantAccess.users || [])\"\r\n                      [removable]=\"form.value.grantAccess.active\"\r\n                      (removed)=\"removeGrant(u)\">\r\n              {{nameOf(u) | async}}\r\n              <mat-icon matChipRemove *ngIf=\"form.value.grantAccess.active\">cancel</mat-icon>\r\n            </mat-chip>\r\n            <input [formControl]=\"gusers\" placeholder=\"{{'Users'| translate}}\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n          </mat-chip-list>\r\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n            <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n              {{u.name}}\r\n              <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #preferences>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Preferences' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon></mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div fxLayout=\"column\">\r\n        <mat-form-field>\r\n          <mat-chip-list #chips [selectable]=\"false\" multiple>\r\n            <mat-chip *ngFor=\"let item of form.value.tags\"\r\n                      [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n              {{item}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip>\r\n            <input [placeholder]=\"'Tags'|translate\"\r\n                   [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n          </mat-chip-list>\r\n        </mat-form-field>\r\n        <mat-slide-toggle [formControl]=\"aRIA\">{{'ARIA' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n  </mat-accordion>\r\n</form>\r\n", styles: [":host{max-width:80vw}.grant-section{display:flex;flex-direction:column}\n"], components: [{ type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: 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: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i3$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], 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: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6$3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i23.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i23.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: 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: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i3$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }], pipes: { "translate": TranslatePipe, "async": i10.AsyncPipe } });
+OptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: OptionsComponent, selector: "bizdoc-options", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "outOfOffice", first: true, predicate: ["outOfOffice"], descendants: true, read: MatExpansionPanel, static: true }, { propertyName: "notifications", first: true, predicate: ["notifications"], descendants: true, read: MatExpansionPanel, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel #notifications>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Notifications' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>notifications</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"notifications\" fxLayout=\"column\">\r\n        <div fxLayout=\"row\">\r\n          <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"toggleSound()\" [bizdocTooltip]=\"'Sound'|translate\"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #emails>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Emails' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>alternate_email</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"emails\" fxLayout=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #outOfOffice>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'OutOfOffice' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>trending_flat</mat-icon>-->\r\n          <!--{{'OutOfOfficeTip' | translate}}-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"outOfOffice\" fxLayout=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field fxFlex>\r\n          <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                            (optionSelected)=\"setSubstitute($event)\">\r\n            <mat-option *ngFor=\"let u of susers$ | async\" [value]=\"u\">\r\n              <span>{{u.name}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <div>\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #from></mat-datepicker>\r\n          </mat-form-field>\r\n          &nbsp;\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value.outOfOffice?.from\" placeholder=\"{{'To'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #to></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #grantAccess>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'GrantAccess' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>account_circle</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"grantAccess\" class=\"grant-section\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-list #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n            <mat-chip *ngFor=\"let u of form.value.grantAccess.users || []\"\r\n                      (removed)=\"removeGrant(u)\">\r\n              {{u | userName | async}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip>\r\n            <input [formControl]=\"gusers\" placeholder=\"{{'Users'| translate}}\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n          </mat-chip-list>\r\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n            <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n              {{u.name}}\r\n              <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #preferences>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Preferences' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon></mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div fxLayout=\"column\">\r\n        <mat-form-field>\r\n          <mat-chip-list #chips [selectable]=\"false\" multiple>\r\n            <mat-chip *ngFor=\"let item of form.value.tags\"\r\n                      [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n              {{item}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip>\r\n            <input [placeholder]=\"'Tags'|translate\"\r\n                   [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n          </mat-chip-list>\r\n        </mat-form-field>\r\n        <mat-slide-toggle [formControl]=\"aRIA\">{{'ARIA' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n  </mat-accordion>\r\n</form>\r\n", styles: [":host{max-width:80vw}.grant-section{display:flex;flex-direction:column}\n"], components: [{ type: i6$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: 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: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i3$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], 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: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i6$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6$2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i23.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i23.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: 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: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i3$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": TranslatePipe, "async": i10.AsyncPipe, "userName": UserNamePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: OptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-options', template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel #notifications>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Notifications' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>notifications</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"notifications\" fxLayout=\"column\">\r\n        <div fxLayout=\"row\">\r\n          <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"toggleSound()\" [bizdocTooltip]=\"'Sound'|translate\"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #emails>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Emails' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>alternate_email</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"emails\" fxLayout=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #outOfOffice>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'OutOfOffice' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>trending_flat</mat-icon>-->\r\n          <!--{{'OutOfOfficeTip' | translate}}-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"outOfOffice\" fxLayout=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field fxFlex>\r\n          <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\"\r\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                            (optionSelected)=\"setSubstitute($event)\">\r\n            <mat-option *ngFor=\"let u of susers$ | async\" [value]=\"u\">\r\n              <span>{{u.name}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <div>\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #from></mat-datepicker>\r\n          </mat-form-field>\r\n          &nbsp;\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value.outOfOffice?.from\" placeholder=\"{{'To'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #to></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #grantAccess>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'GrantAccess' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>account_circle</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"grantAccess\" class=\"grant-section\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-list #grantList [attr.aria-label]=\"\">\r\n            <mat-chip *ngFor=\"let u of (form.value.grantAccess.users || [])\"\r\n                      [removable]=\"form.value.grantAccess.active\"\r\n                      (removed)=\"removeGrant(u)\">\r\n              {{nameOf(u) | async}}\r\n              <mat-icon matChipRemove *ngIf=\"form.value.grantAccess.active\">cancel</mat-icon>\r\n            </mat-chip>\r\n            <input [formControl]=\"gusers\" placeholder=\"{{'Users'| translate}}\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n          </mat-chip-list>\r\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n            <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n              {{u.name}}\r\n              <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #preferences>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Preferences' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon></mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div fxLayout=\"column\">\r\n        <mat-form-field>\r\n          <mat-chip-list #chips [selectable]=\"false\" multiple>\r\n            <mat-chip *ngFor=\"let item of form.value.tags\"\r\n                      [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n              {{item}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip>\r\n            <input [placeholder]=\"'Tags'|translate\"\r\n                   [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n          </mat-chip-list>\r\n        </mat-form-field>\r\n        <mat-slide-toggle [formControl]=\"aRIA\">{{'ARIA' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n  </mat-accordion>\r\n</form>\r\n", styles: [":host{max-width:80vw}.grant-section{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'bizdoc-options', template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel #notifications>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Notifications' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>notifications</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"notifications\" fxLayout=\"column\">\r\n        <div fxLayout=\"row\">\r\n          <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"toggleSound()\" [bizdocTooltip]=\"'Sound'|translate\"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #emails>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Emails' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>alternate_email</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"emails\" fxLayout=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #outOfOffice>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'OutOfOffice' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>trending_flat</mat-icon>-->\r\n          <!--{{'OutOfOfficeTip' | translate}}-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"outOfOffice\" fxLayout=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field fxFlex>\r\n          <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                            (optionSelected)=\"setSubstitute($event)\">\r\n            <mat-option *ngFor=\"let u of susers$ | async\" [value]=\"u\">\r\n              <span>{{u.name}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <div>\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #from></mat-datepicker>\r\n          </mat-form-field>\r\n          &nbsp;\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value.outOfOffice?.from\" placeholder=\"{{'To'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #to></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #grantAccess>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'GrantAccess' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>account_circle</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"grantAccess\" class=\"grant-section\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-list #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n            <mat-chip *ngFor=\"let u of form.value.grantAccess.users || []\"\r\n                      (removed)=\"removeGrant(u)\">\r\n              {{u | userName | async}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip>\r\n            <input [formControl]=\"gusers\" placeholder=\"{{'Users'| translate}}\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n          </mat-chip-list>\r\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n            <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n              {{u.name}}\r\n              <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #preferences>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Preferences' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon></mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div fxLayout=\"column\">\r\n        <mat-form-field>\r\n          <mat-chip-list #chips [selectable]=\"false\" multiple>\r\n            <mat-chip *ngFor=\"let item of form.value.tags\"\r\n                      [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n              {{item}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip>\r\n            <input [placeholder]=\"'Tags'|translate\"\r\n                   [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n          </mat-chip-list>\r\n        </mat-form-field>\r\n        <mat-slide-toggle [formControl]=\"aRIA\">{{'ARIA' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n  </mat-accordion>\r\n</form>\r\n", styles: [":host{max-width:80vw}.grant-section{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [OPTION_PANEL]
                 }] }, { type: i1$4.OverlayRef }, { type: i1$2.FormBuilder }, { type: AccountService }, { type: PromptService }, { type: SessionService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
-                }] }]; }, propDecorators: { outOfOffice: [{
+                }] }]; }, propDecorators: { substitueInput: [{
+                type: ViewChild,
+                args: ['substitueInput', { read: MatInput }]
+            }], grantInput: [{
+                type: ViewChild,
+                args: ['grantInput', { read: MatChipInput }]
+            }], outOfOffice: [{
                 type: ViewChild,
                 args: ['outOfOffice', { read: MatExpansionPanel, static: true }]
             }], notifications: [{
@@ -18222,10 +18289,8 @@ class SlotRouterDirective {
     }
     ngOnInit() {
         const path = this._link.join('/');
-        this._router.events.pipe(takeUntil(this._destroy)).subscribe(e => (e instanceof NavigationStart || e instanceof ParamNavigation || e instanceof NavigationSelected) && e.pane.path && e.pane.mode === 'pane'
+        this._router.events.pipe(takeUntil(this._destroy)).subscribe(e => (e instanceof NavigationStart || e instanceof ParamNavigation || e instanceof NavigationFocus) && e.pane.path && e.pane.mode === 'pane'
             && this._toggle(e.pane.fullPath.startsWith(path)));
-        this._router.active && this._router.active.path && this._router.active.fullPath.startsWith(path) &&
-            this._toggle(true);
     }
     _toggle(val) {
         if (val)
@@ -18554,6 +18619,7 @@ class SlotsComponent {
         this.accent = this._session.getAccent();
         this._pending = [];
         this._rtl = this._session.inverse;
+        this._resizing = new Subject();
         this._destroy = new Subject();
         _session.themeChange.pipe(takeUntil(this._destroy)).
             subscribe(() => this.accent = _session.getAccent());
@@ -18666,7 +18732,7 @@ class SlotsComponent {
                                 this.group = tab.group;
                                 this.selectedTabIndex = i;
                                 this._cd.detectChanges();
-                                this._sync();
+                                this._syncBrowserHistory();
                                 return;
                             }
                         }
@@ -18674,7 +18740,7 @@ class SlotsComponent {
                             await this._navParams(path, tab, params, queryParams, state);
                             this.group = tab.group;
                             this.selectedTabIndex = i;
-                            this._sync();
+                            this._syncBrowserHistory();
                             return;
                         }
                         i++;
@@ -18696,13 +18762,13 @@ class SlotsComponent {
                             else {
                                 this._navQueryParams(pane, queryParams, state);
                                 this.scrollTo(i);
-                                this._sync();
+                                this._syncBrowserHistory();
                                 return;
                             }
                         }
                         else if (pane.route === route) {
                             await this._navParams(path, pane, params, queryParams, state);
-                            this._sync();
+                            this._syncBrowserHistory();
                             return;
                         }
                         i++;
@@ -18726,8 +18792,8 @@ class SlotsComponent {
                             queryParams,
                             policy
                         });
-                    else {
-                        const pane = this._insertPane(component || route.component, {
+                    else
+                        this._insertPane(component || route.component, {
                             queryString,
                             path,
                             route,
@@ -18740,16 +18806,14 @@ class SlotsComponent {
                             queryParams,
                             policy
                         });
-                        pane._fullscreen$.next(this.panes.length === 1);
-                    }
                     route &&
-                        this._sync();
+                        this._syncBrowserHistory();
                 }
                 else {
                     const pane = (policy & OpenPolicy.Tab) == OpenPolicy.Tab ?
                         this.tabs[this.selectedTabIndex] : this.panes[this.selectedIndex];
                     this._navQueryParams(pane, queryParams, state);
-                    this._sync();
+                    this._syncBrowserHistory();
                     if ((policy & OpenPolicy.Tab) != OpenPolicy.Tab)
                         this.select(this.selectedIndex);
                 }
@@ -18768,8 +18832,8 @@ class SlotsComponent {
                         queryParams,
                         policy
                     });
-                else {
-                    const pane = this._insertPane(component, {
+                else
+                    this._insertPane(component, {
                         data: state,
                         icon, title, help,
                         parent,
@@ -18779,25 +18843,29 @@ class SlotsComponent {
                         params,
                         policy, queryParams
                     });
-                    pane._fullscreen$.next(this.panes.length === 1);
-                }
             }
         });
         window.removeAllListeners('popstate');
         window.addEventListener('popstate', e => {
-            if (this._navigating) {
-                this._navigating = false;
+            if (this._navigationInProcess) {
+                this._navigationInProcess = false;
                 return;
             }
-            const state = e.state && e.state.bizdoc ? e.state : undefined;
-            this._deserialize(location.pathname.substring(1), state);
-            if (state) {
+            if (e.state && e.state.bizdoc) {
+                const evt = new BackNavigation();
+                if (evt._preventDefault)
+                    return;
+                this._router._events$.next(evt);
+                const state = e.state;
+                this._deserialize(location.pathname.substring(1), state);
                 this.swap = state.swap;
                 this.swapTab = state.swapTab;
                 this.prevGroup = state.prevGroup;
                 this.group = state.group;
                 this.selectedTabIndex = state.selectedTabIndex;
             }
+            else
+                this._deserialize(location.pathname.substring(1));
         });
         if (location.pathname.length > 1)
             this._deserialize(location.pathname.substring(1), history.state && history.state.bizdoc ? history.state : undefined);
@@ -18805,6 +18873,7 @@ class SlotsComponent {
             this._router._navigate$.next({
                 commands: DEFAULT_ROUTE,
             });
+        this._resizing.pipe(debounceTime$1(150)).subscribe(this._resize.bind(this));
     }
     async _deserialize(url, state) {
         const sections = decodeURIComponent(url).split(PANE_CHAR), panes = deserialize(sections[0]), tabs = sections.length > 1 ? deserialize(sections[1]) : [];
@@ -18860,8 +18929,10 @@ class SlotsComponent {
         const n = this.panes.length;
         for (let i = 0; i < n; i++) {
             let pane = this.panes[i];
-            pane.fullscreen !== (n === 1) &&
-                pane._fullscreen$.next(n === 1);
+            if (pane.expanded !== (n === 1)) {
+                const evt = new NavigationExpand(pane._expanded = n === 1, pane);
+                pane._events$.next(evt);
+            }
         }
     }
     /**
@@ -18965,7 +19036,9 @@ class SlotsComponent {
         pane._queryString = this._queryString(queryParams);
         state && pane._data$.next(state);
         pane._queryParams$.next(queryParams);
-        this._router._events$.next(new QueryParamNavigation(queryParams, pane));
+        const evt = new QueryParamNavigation(queryParams, pane);
+        pane._events$.next(evt);
+        this._router._events$.next(evt);
     }
     /**
      *
@@ -18992,7 +19065,9 @@ class SlotsComponent {
             pane._queryString = '';
             pane._queryParams$.next({});
         }
-        this._router._events$.next(new ParamNavigation(params, pane));
+        const evt = new ParamNavigation(params, pane);
+        pane._events$.next(evt);
+        this._router._events$.next(evt);
         this.panes.concat(this.tabs).forEach(child => {
             if (child.route && child.route.parent === pane.route) {
                 child._data$.next(Object.assign(child.data, state));
@@ -19009,23 +19084,20 @@ class SlotsComponent {
         this._cd.detectChanges();
     }
     /** */
-    _sync() {
-        this._navigating = true;
-        this._history('push');
-        setTimeout(() => this._navigating = false, 200);
-    }
-    /**
-     *
-     * @param mode
-     */
-    _history(mode) {
+    _syncBrowserHistory() {
         let path = this.panes.filter(p => p.route).map(s => s.fullPath).join(PATH_CHAR);
         if (this.tabs.length) {
             const tabs = this.tabs.filter(p => p.route);
             if (tabs.length)
                 path += PANE_CHAR + tabs.map(s => s.fullPath).join(PATH_CHAR);
         }
-        const state = {
+        const state = this._constructHistoryState();
+        this._navigationInProcess = true;
+        history.pushState(state, '', '/' + path);
+        setTimeout(() => this._navigationInProcess = false, 200);
+    }
+    _constructHistoryState() {
+        return {
             bizdoc: true,
             step: history.state && history.state.bizdoc ? history.state.step + 1 : 1,
             selectedTabIndex: this.selectedTabIndex,
@@ -19036,16 +19108,12 @@ class SlotsComponent {
             swapTab: this.swapTab,
             prevGroup: this.prevGroup
         };
-        if (mode === 'push')
-            history.pushState(state, '', '/' + path);
-        else
-            history.replaceState(state, '');
     }
     drop(evt) {
         const pane = this.panes[evt.previousIndex];
         this.panes.splice(evt.previousIndex, 1);
         this.panes.splice(evt.currentIndex, 0, pane);
-        this._sync();
+        this._syncBrowserHistory();
     }
     togglePinned(pane) {
         pane.pinned = !pane.pinned;
@@ -19174,13 +19242,14 @@ class SlotsComponent {
     }
     insert(position, component, options) {
         const pane = this._insertPane(component, options || {}, position);
-        pane._fullscreen$.next(this.panes.length === 1);
         return pane;
     }
     _insertPane(component, options, position) {
-        const stretch = (options.policy & OpenPolicy.Stretch) == OpenPolicy.Stretch;
-        const pane = this._constract(component, 'pane', {
-            stretch,
+        const stretchable = (options.policy & OpenPolicy.Stretch) == OpenPolicy.Stretch;
+        const pane = this._constract(component, {
+            mode: 'pane',
+            expanded: !this.panes.length,
+            stretchable,
             ...options
         });
         if (position === undefined)
@@ -19188,15 +19257,15 @@ class SlotsComponent {
         this.panes.push(pane);
         this.titleAnimation++;
         this._cd.detectChanges();
-        this._router._events$.next(new NavigationStart(pane));
+        const evt = new NavigationStart(pane);
+        this._router._events$.next(evt);
         if (options.focus !== false) {
             this.selectedIndex = position;
-            this._router._active = pane;
             this._title.set(pane.title);
             if (this.panes.length > 1)
                 this.scrollTo(position);
         }
-        this.navigationArrows();
+        this.enableNavigationArrows();
         return pane;
     }
     /**
@@ -19204,12 +19273,9 @@ class SlotsComponent {
      * @param component
      * @param options
      */
-    _constract(component, mode, options) {
-        const pane = new PaneRef(component, mode, options);
-        pane._injector = Injector.create([
-            { provide: PaneRef, useValue: pane }
-        ], this._injector);
-        pane._comm$.subscribe(e => this._action(e, pane));
+    _constract(component, options) {
+        const pane = new PaneRef(component, this._injector, options);
+        pane._comm$.subscribe(e => this._paneCommand(e, pane));
         return pane;
     }
     /**
@@ -19219,15 +19285,17 @@ class SlotsComponent {
      */
     _insertTab(component, options) {
         const { policy } = options, dialog = (policy & OpenPolicy.Dialog) == OpenPolicy.Dialog, expandable = (policy & OpenPolicy.Expandable) == OpenPolicy.Expandable, dismissable = (policy & OpenPolicy.Dismissable) == OpenPolicy.Dismissable;
-        const tab = this._constract(component, 'tab', {
+        const tab = this._constract(component, {
+            mode: 'tab',
+            expanded: false,
             ...options,
             dialog,
             dismissable,
             expandable
         });
         this.tabs.push(tab);
-        this._router._events$.next(new NavigationStart(tab));
         this._cd.detectChanges();
+        this._router._events$.next(new NavigationStart(tab));
         if (tab.group && this.group !== tab.group && options.swap !== false) {
             let i = 0, swap = false;
             do {
@@ -19257,24 +19325,27 @@ class SlotsComponent {
         this._guide.start(name);
     }
     back() {
-        this._back(this.swap);
+        this._navBack(this.swap);
         this.swap = null;
     }
-    async _back(steps) {
-        this._router._events$.next(new BackNavigation());
+    /**
+     *
+     * @param steps
+     */
+    async _navBack(steps) {
         history.go(steps - history.state.step);
     }
     tabBack() {
-        this._back(this.swapTab);
+        this._navBack(this.swapTab);
         this.swapTab = null;
     }
     /**
      *
-     * @param e
+     * @param command
      * @param pane
      */
-    async _action(e, pane) {
-        switch (e) {
+    async _paneCommand(command, pane) {
+        switch (command) {
             case 'focus':
                 {
                     if (pane.mode === 'tab') {
@@ -19293,9 +19364,12 @@ class SlotsComponent {
                 }
                 else {
                     const index = this.panes.indexOf(pane);
-                    this.collapse();
                     await this.removeAt(index);
-                    !this.panes.length &&
+                    this._clearPending();
+                    await this._clearTabs();
+                    if (this.panes.length)
+                        this._syncBrowserHistory();
+                    else
                         this._router.navigate(DEFAULT_ROUTE);
                 }
                 break;
@@ -19306,7 +19380,8 @@ class SlotsComponent {
                     this.expandPane();
                 break;
             case 'refresh': {
-                this._history('replace');
+                const state = this._constructHistoryState();
+                history.replaceState(state, '');
                 break;
             }
         }
@@ -19315,35 +19390,54 @@ class SlotsComponent {
      * escape
      * @param event
      */
-    collapse() {
+    async collapse() {
         if (!this.tabs.length)
             return;
+        const evt = new CollapseNavigation();
+        this._router._events$.next(evt);
+        if (evt._preventDefault)
+            return;
         this._clearPending();
-        this._clearTabs();
-        this._sync();
-        this._router._events$.next(new CollapseNavigation());
+        await this._clearTabs();
+        this._syncBrowserHistory();
     }
     onResize() {
-        if (this.panes.length && !this.panes[this.panes.length - 1].stretch) {
+        this._resizing.next();
+    }
+    /** */
+    _resize() {
+        if (this.panes.length > 1 && !this.panes[this.panes.length - 1].stretchable) {
             const el = this._panesContainerRef.element.nativeElement, child = el.lastElementChild;
             child.style.minWidth =
                 (el.parentElement.parentElement.clientWidth - el.parentElement.offsetLeft - child.offsetLeft - 2) + 'px';
         }
-    }
-    _resize() {
-        //this.tabs.concat(this.panes).forEach(t => t._resize$.next({
-        //} as any));
-        window.dispatchEvent(new Event('resize'));
+        this.tabs.concat(this.panes).forEach(p => p._events$.next(new NavigationResize({}, p)));
     }
     closeTab(position) {
         const tab = this.tabs[position];
+        if (!this._closing(tab))
+            return;
         this.tabs.splice(position, 1);
         this._destroyPane(tab);
         this.selectedTabIndex = this.tabs.length ? position > 0 ? position - 1 : 0 : -1;
-        this._sync();
+        this._syncBrowserHistory();
+    }
+    /**
+     *
+     * @param pane
+     */
+    _closing(pane) {
+        let evt = new NavigationClose(pane);
+        pane._events$.next(evt);
+        return !evt._preventDefault;
     }
     expandPane() {
         const pane = this.panes[this.selectedIndex];
+        const evt = new NavigationExpand(pane._expanded = true, pane);
+        pane._events$.next(evt);
+        this._router._events$.next(evt);
+        if (evt._preventDefault)
+            return;
         this.swap = this._getHistoryStep();
         let i = 0;
         do {
@@ -19355,23 +19449,26 @@ class SlotsComponent {
                 i++;
         } while (i < this.panes.length);
         this.selectedIndex = 0;
-        this._sync();
-        pane._fullscreen$.next(true);
+        this._syncBrowserHistory();
     }
     _getHistoryStep() {
         return history.state && history.state.bizdoc ? history.state.step : 0;
     }
     expandTab() {
+        const tab = this.tabs[this.selectedTabIndex];
+        const evt = new NavigationExpand(tab._expanded = true, tab);
+        tab._events$.next(evt);
+        this._router._events$.next(evt);
+        if (evt._preventDefault)
+            return;
         this.swap = this._getHistoryStep();
         this.swapTab = null;
         this.panes.forEach(p => this._destroyPane(p));
-        const tab = this.tabs[this.selectedTabIndex];
         this.tabs.splice(this.selectedTabIndex, 1);
         this.panes.splice(0, this.panes.length, tab);
-        tab._mode$.next('pane');
-        tab._fullscreen$.next(true);
+        tab._mode = 'pane';
         this.selectedTabIndex = this.tabs.length ? 0 : -1;
-        this._sync();
+        this._syncBrowserHistory();
     }
     select(position) {
         if (this.selectedIndex === position)
@@ -19384,17 +19481,20 @@ class SlotsComponent {
         }
         this.selectedIndex = position;
         const pane = this.panes[position];
-        this._router._events$.next(new NavigationSelected(pane));
-        this._router._active = pane;
+        const evt = new NavigationFocus(pane);
+        pane._events$.next(evt);
+        this._router._events$.next(evt);
         this._title.set(pane.title);
     }
     async removeAt(position) {
         const pane = this.panes[position];
+        if (!this._closing(pane))
+            return;
         await this._dismiss(pane);
         this._discardPane(pane);
         if (position >= this.selectedIndex)
             this.select(-1);
-        this._sync();
+        this._syncBrowserHistory();
     }
     /**
      *
@@ -19437,6 +19537,8 @@ class SlotsComponent {
         this.swap = null;
     }
     async _clearTabs() {
+        if (!this.tabs.length)
+            return;
         await this._dismissAll(this.tabs);
         this.tabs.forEach(t => this._destroyPane(t));
         this.tabs.splice(0, this.tabs.length);
@@ -19478,10 +19580,10 @@ class SlotsComponent {
         return this._panesContainerRef.element.nativeElement.querySelectorAll('.pane-content');
     }
     done() {
-        this.navigationArrows();
+        this.enableNavigationArrows();
         this._resize();
     }
-    navigationArrows(_) {
+    enableNavigationArrows(_) {
         const container = this._panesContainerRef.element.nativeElement, scrollLeft = Math.round(container.scrollLeft);
         this.next = this._rtl ? container.clientWidth - scrollLeft < container.scrollWidth :
             scrollLeft + container.clientWidth < container.scrollWidth;
@@ -19511,7 +19613,7 @@ class SlotsComponent {
             const delta = (e.clientX - event.clientX) * d;
             el.style.width = el.style.minWidth
                 = Math.max(width + delta, 350) + 'px';
-            pane && pane._resize$.next({});
+            pane._events$.next(new NavigationResize({}, pane));
         }
     }
     onTabResize(event) {
@@ -19526,8 +19628,7 @@ class SlotsComponent {
             event.srcElement.classList.remove('resizing');
             document.onmousemove = document.onmouseup = null;
             this.dragging = false;
-            me.navigationArrows();
-            //this._cd.detectChanges();
+            me.enableNavigationArrows();
             this._resize();
         };
         function onMouseMove(e) {
@@ -19539,7 +19640,9 @@ class SlotsComponent {
     }
     _destroyPane(pane) {
         pane._destroy();
-        this._router._events$.next(new NavigationEnd(pane));
+        const evt = new NavigationEnd(pane);
+        pane._events$.next(evt);
+        this._router._events$.next(evt);
     }
     ngOnDestroy() {
         this._destroy.next();
@@ -19547,7 +19650,7 @@ class SlotsComponent {
     }
 }
 SlotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SlotsComponent, deps: [{ token: PANES_DATA }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PanesRouter }, { token: WindowTitleService }, { token: GuideService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SlotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown.escape": "collapse()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panning"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabing"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div class=\"panes\">\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #panning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onPaneResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"backdrop\" *ngIf=\"dialog\" (click)=\"closeTab(selectedTabIndex)\"></div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <!--*ngIf=\"selectedTabIndex <=< -1 && tabs[selectedTabIndex].expandable\"-->\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let t of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{t.icon}}</mat-icon>&nbsp;\r\n        {{t.title}}\r\n        <mat-icon *ngIf=\"t.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"], components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: QuickToolsComponent, selector: "bizdoc-quicktools" }, { type: i8$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: NgxComponentOutlet, selector: "ngx-component-outlet", inputs: ["type", "injector", "ngxComponentOutletContent"], outputs: ["create"] }, { type: i8$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe }, animations: [panesAnimation,
+SlotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown.escape": "collapse()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panning"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabing"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div class=\"panes\">\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #panning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"enableNavigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onPaneResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"backdrop\" *ngIf=\"dialog\" (click)=\"closeTab(selectedTabIndex)\"></div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <!--*ngIf=\"selectedTabIndex <=< -1 && tabs[selectedTabIndex].expandable\"-->\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let t of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{t.icon}}</mat-icon>&nbsp;\r\n        {{t.title}}\r\n        <mat-icon *ngIf=\"t.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"], components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: QuickToolsComponent, selector: "bizdoc-quicktools" }, { type: i8$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: NgxComponentOutlet, selector: "ngx-component-outlet", inputs: ["type", "injector", "ngxComponentOutletContent"], outputs: ["create"] }, { type: i8$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe }, animations: [panesAnimation,
         panesTitleAnimation,
         paneAnimation,
         paramAnimation,
@@ -19564,7 +19667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         queryAnimation,
                         tabsAnimation,
                         tabAnimation
-                    ], template: "<div class=\"panes\">\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #panning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onPaneResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"backdrop\" *ngIf=\"dialog\" (click)=\"closeTab(selectedTabIndex)\"></div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <!--*ngIf=\"selectedTabIndex <=< -1 && tabs[selectedTabIndex].expandable\"-->\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let t of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{t.icon}}</mat-icon>&nbsp;\r\n        {{t.title}}\r\n        <mat-icon *ngIf=\"t.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"] }]
+                    ], template: "<div class=\"panes\">\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #panning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"enableNavigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onPaneResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"backdrop\" *ngIf=\"dialog\" (click)=\"closeTab(selectedTabIndex)\"></div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <!--*ngIf=\"selectedTabIndex <=< -1 && tabs[selectedTabIndex].expandable\"-->\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let t of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{t.icon}}</mat-icon>&nbsp;\r\n        {{t.title}}\r\n        <mat-icon *ngIf=\"t.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PANES_DATA]
@@ -19986,7 +20089,7 @@ class HomeMobileComponent extends HomeBase {
     }
 }
 HomeMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: HomeMobileComponent, deps: [{ token: i0.Injector }, { token: i1$6.Router }, { token: i2$5.MatBottomSheet }, { token: i7$2.Directionality }, { token: SessionService }, { token: Popup }, { token: HubService }, { token: TranslateService }, { token: i8$2.MatSnackBar }, { token: ChatInfo }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-HomeMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: HomeMobileComponent, selector: "bizdoc-mobile-home", viewQueries: [{ propertyName: "menuDrawer", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "secondaryDrawer", first: true, predicate: ["secondaryDrawer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\" [class.loading]=\"loading\">\r\n  <button mat-icon-button (click)='menuDrawer.toggle()' [bizdocTooltip]=\"'Menu' | translate\" [attr.aria-label]=\"'Menu' | translate\"><mat-icon>menu</mat-icon></button>\r\n  <div [routerLink]='[\"/dashboard\"]' matRipple [matRippleUnbounded]=\"true\" [matRippleRadius]=\"100\" [matRippleCentered]=\"true\" style=\"outline: none\">\r\n    <img id=\"logo\" src=\"logo.svg\" alt=\"\" />\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"notifs()\" data-help=\"notifications\" [attr.aria-label]=\"'Notifications' | translate\" [bizdocTooltip]=\"'Notifications' | translate\"><mat-icon [matBadge]=\"profile.notificationsCount\" [matBadgeHidden]=\"!profile.notificationsCount\" matBadgeColor=\"accent\">notifications</mat-icon></button>\r\n  <button mat-icon-button *ngIf='chatEnabled' (click)=\"chat()\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\" [bizdocTooltip]=\"'Chat' | translate\"><mat-icon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\">chat</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container autosize>\r\n  <mat-sidenav #menuDrawer data-help=\"menu\" mode=\"over\" closed class=\"mat-elevation-z5\">\r\n    <mat-nav-list>\r\n      <mat-list-item [routerLink]='[\"/dashboard\"]' [attr.aria-label]=\"'Dashboard' | translate\" routerLinkActive=\"active\" data-help=\"dashboard\">\r\n        <mat-icon matListIcon>apps</mat-icon><span>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-expansion-panel class=\"mat-elevation-z0\" [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>inbox</mat-icon>\r\n            <span>{{'Mailbox' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let f of profile.folders\" [routerLink]='[\"/mailbox/f\", f.name]' routerLinkActive=\"active\" [attr.data-help]=\"'folder-'+f.name\" [attr.aria-label]=\"f.title\">\r\n          <mat-icon matListIcon>{{f.icon}}</mat-icon><span>{{f.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-list-item [routerLink]='[\"/schedule\"]' routerLinkActive=\"active\" *ngIf=\"schedulerEnabled\" [attr.aria-label]=\"'Scheduler' | translate\">\r\n        <mat-icon matListIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span>{{ 'Schedule' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <ng-container *ngIf=\"enableAnalysis\">\r\n      <ng-container *ngFor=\"let c of profile.cubes\">\r\n        <mat-expansion-panel class=\"mat-elevation-z0\" *ngIf=\"c.views.length\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              <mat-icon>{{ c.icon || 'insert_chart_outlined'}}</mat-icon>\r\n              <span>{{c.title}}</span>\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <mat-list-item *ngFor=\"let v of c.views\" [routerLink]='[\"/cube\", c.name, \"v\", v.name]' routerLinkActive=\"active\" [attr.data-help]=\"'cube-view-'+v.name\">\r\n            <mat-icon matListIcon>{{v.icon || 'insights'}}</mat-icon><span>{{v.title}}</span>\r\n          </mat-list-item>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n      </ng-container>\r\n      <mat-expansion-panel *ngIf=\"profile.reports.length\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Reports' | translate\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>list_alt</mat-icon>\r\n            <span>{{'Reports' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let r of profile.reports\" [routerLink]='[\"/reports\", r.name]' routerLinkActive=\"active\"\r\n                       [attr.aria-label]=\"r.title\" [attr.data-help]=\"'report-'+r.name\">\r\n          <mat-icon matListIcon>{{r.icon}}</mat-icon><span>{{r.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" data-help=\"options\"\r\n                     (click)=\"options($event)\">\r\n        <mat-icon matListIcon>settingson</mat-icon>\r\n        <span>{{'Settings' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" (click)=\"signout($event)\">\r\n        <mat-icon matListIcon>logout</mat-icon>\r\n        <span>{{'Power' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n  <mat-sidenav #secondaryDrawer position=\"end\" closed mode=\"over\" autoFocus=\"false\" class=\"mat-elevation-z3\">\r\n    <ng-container [ngSwitch]=\"mode\">\r\n    <bizdoc-chat [(contact)]=\"contact\" *ngSwitchCase=\"'chat'\"></bizdoc-chat>\r\n    <bizdoc-notifications-table *ngSwitchCase=\"'notifications'\"></bizdoc-notifications-table>\r\n    </ng-container>\r\n  </mat-sidenav>\r\n  <mat-sidenav-content data-help=\"main\">\r\n    <router-outlet></router-outlet>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n<button mat-fab [attr.aria-label]=\"'Compose'| translate\" [@fabFull]=\"composeState\" *ngIf=\"composeEnabled\" color=\"accent\" (click)=\"compose()\" data-help=\"compose\"><mat-icon>add</mat-icon></button>\r\n", styles: ["#logo{padding-left:12px;padding-right:12px;vertical-align:middle;width:120px;filter:invert(1)}:host ::ng-deep .mat-sidenav-container{height:calc(100% - 58px)}:host ::ng-deep .mat-sidenav-container .home-content{padding:unset}::ng-deep .mat-drawer-inner-container{height:auto}router-outlet~*{position:absolute;height:100%;width:100%}::ng-deep [dir=rtl] .mat-fab{left:30px;right:unset}.mat-fab{z-index:1;position:absolute;bottom:30px;right:30px}:host ::ng-deep .mat-expansion-panel-header{padding:0 18px}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-panel-header-title .mat-icon{padding:0 3px}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i9$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i2$3.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i12$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: ChatComponent, selector: "bizdoc-chat", inputs: ["contact"], outputs: ["contactChange"] }, { type: NotificationsTableComponent, selector: "bizdoc-notifications-table" }, { type: i9$4.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i1$6.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i2$3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$6.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": TranslatePipe }, animations: [fabAnimation] });
+HomeMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: HomeMobileComponent, selector: "bizdoc-mobile-home", viewQueries: [{ propertyName: "menuDrawer", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "secondaryDrawer", first: true, predicate: ["secondaryDrawer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\" [class.loading]=\"loading\">\r\n  <button mat-icon-button (click)='menuDrawer.toggle()' [bizdocTooltip]=\"'Menu' | translate\" [attr.aria-label]=\"'Menu' | translate\"><mat-icon>menu</mat-icon></button>\r\n  <div [routerLink]='[\"/dashboard\"]' matRipple [matRippleUnbounded]=\"true\" [matRippleRadius]=\"100\" [matRippleCentered]=\"true\" style=\"outline: none\">\r\n    <img id=\"logo\" src=\"logo.svg\" alt=\"\" />\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"notifs()\" data-help=\"notifications\" [attr.aria-label]=\"'Notifications' | translate\" [bizdocTooltip]=\"'Notifications' | translate\"><mat-icon [matBadge]=\"profile.notificationsCount\" [matBadgeHidden]=\"!profile.notificationsCount\" matBadgeColor=\"accent\">notifications</mat-icon></button>\r\n  <button mat-icon-button *ngIf='chatEnabled' (click)=\"chat()\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\" [bizdocTooltip]=\"'Chat' | translate\"><mat-icon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\">chat</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container autosize>\r\n  <mat-sidenav #menuDrawer data-help=\"menu\" mode=\"over\" closed class=\"mat-elevation-z5\">\r\n    <mat-nav-list>\r\n      <mat-list-item [routerLink]='[\"/dashboard\"]' [attr.aria-label]=\"'Dashboard' | translate\" routerLinkActive=\"active\" data-help=\"dashboard\">\r\n        <mat-icon matListIcon>apps</mat-icon><span>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-expansion-panel class=\"mat-elevation-z0\" [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>inbox</mat-icon>\r\n            <span>{{'Mailbox' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let f of profile.folders\" [routerLink]='[\"/mailbox/f\", f.name]' routerLinkActive=\"active\" [attr.data-help]=\"'folder-'+f.name\" [attr.aria-label]=\"f.title\">\r\n          <mat-icon matListIcon>{{f.icon}}</mat-icon><span>{{f.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-list-item [routerLink]='[\"/schedule\"]' routerLinkActive=\"active\" *ngIf=\"schedulerEnabled\" [attr.aria-label]=\"'Scheduler' | translate\">\r\n        <mat-icon matListIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span>{{ 'Schedule' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <ng-container *ngIf=\"enableAnalysis\">\r\n      <ng-container *ngFor=\"let c of profile.cubes\">\r\n        <mat-expansion-panel class=\"mat-elevation-z0\" *ngIf=\"c.views.length\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              <mat-icon>{{ c.icon || 'insert_chart_outlined'}}</mat-icon>\r\n              <span>{{c.title}}</span>\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <mat-list-item *ngFor=\"let v of c.views\" [routerLink]='[\"/cube\", c.name, \"v\", v.name]' routerLinkActive=\"active\" [attr.data-help]=\"'cube-view-'+v.name\">\r\n            <mat-icon matListIcon>{{v.icon || 'insights'}}</mat-icon><span>{{v.title}}</span>\r\n          </mat-list-item>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n      </ng-container>\r\n      <mat-expansion-panel *ngIf=\"profile.reports.length\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Reports' | translate\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>list_alt</mat-icon>\r\n            <span>{{'Reports' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let r of profile.reports\" [routerLink]='[\"/reports\", r.name]' routerLinkActive=\"active\"\r\n                       [attr.aria-label]=\"r.title\" [attr.data-help]=\"'report-'+r.name\">\r\n          <mat-icon matListIcon>{{r.icon}}</mat-icon><span>{{r.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" data-help=\"options\"\r\n                     (click)=\"options($event)\">\r\n        <mat-icon matListIcon>settingson</mat-icon>\r\n        <span>{{'Settings' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" (click)=\"signout($event)\">\r\n        <mat-icon matListIcon>logout</mat-icon>\r\n        <span>{{'Power' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n  <mat-sidenav #secondaryDrawer position=\"end\" closed mode=\"over\" autoFocus=\"false\" class=\"mat-elevation-z3\">\r\n    <ng-container [ngSwitch]=\"mode\">\r\n    <bizdoc-chat [(contact)]=\"contact\" *ngSwitchCase=\"'chat'\"></bizdoc-chat>\r\n    <bizdoc-notifications-table *ngSwitchCase=\"'notifications'\"></bizdoc-notifications-table>\r\n    </ng-container>\r\n  </mat-sidenav>\r\n  <mat-sidenav-content data-help=\"main\">\r\n    <router-outlet></router-outlet>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n<button mat-fab [attr.aria-label]=\"'Compose'| translate\" [@fabFull]=\"composeState\" *ngIf=\"composeEnabled\" color=\"accent\" (click)=\"compose()\" data-help=\"compose\"><mat-icon>add</mat-icon></button>\r\n", styles: ["#logo{padding-left:12px;padding-right:12px;vertical-align:middle;width:120px;filter:invert(1)}:host ::ng-deep .mat-sidenav-container{height:calc(100% - 58px)}:host ::ng-deep .mat-sidenav-container .home-content{padding:unset}::ng-deep .mat-drawer-inner-container{height:auto}router-outlet~*{position:absolute;height:100%;width:100%}::ng-deep [dir=rtl] .mat-fab{left:30px;right:unset}.mat-fab{z-index:1;position:absolute;bottom:30px;right:30px}:host ::ng-deep .mat-expansion-panel-header{padding:0 18px}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-panel-header-title .mat-icon{padding:0 3px}\n"], components: [{ type: i7$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i9$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i2$3.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i6$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i12$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: ChatComponent, selector: "bizdoc-chat", inputs: ["contact"], outputs: ["contactChange"] }, { type: NotificationsTableComponent, selector: "bizdoc-notifications-table" }, { type: i9$4.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i1$6.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i2$3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i6$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$6.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "translate": TranslatePipe }, animations: [fabAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: HomeMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-mobile-home', animations: [fabAnimation], template: "<mat-toolbar color=\"primary\" [class.loading]=\"loading\">\r\n  <button mat-icon-button (click)='menuDrawer.toggle()' [bizdocTooltip]=\"'Menu' | translate\" [attr.aria-label]=\"'Menu' | translate\"><mat-icon>menu</mat-icon></button>\r\n  <div [routerLink]='[\"/dashboard\"]' matRipple [matRippleUnbounded]=\"true\" [matRippleRadius]=\"100\" [matRippleCentered]=\"true\" style=\"outline: none\">\r\n    <img id=\"logo\" src=\"logo.svg\" alt=\"\" />\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"notifs()\" data-help=\"notifications\" [attr.aria-label]=\"'Notifications' | translate\" [bizdocTooltip]=\"'Notifications' | translate\"><mat-icon [matBadge]=\"profile.notificationsCount\" [matBadgeHidden]=\"!profile.notificationsCount\" matBadgeColor=\"accent\">notifications</mat-icon></button>\r\n  <button mat-icon-button *ngIf='chatEnabled' (click)=\"chat()\" data-help=\"chat\" [attr.aria-label]=\"'Chat' | translate\" [bizdocTooltip]=\"'Chat' | translate\"><mat-icon [matBadge]=\"profile.conversationsCount\" [matBadgeHidden]=\"!profile.conversationsCount\" matBadgeColor=\"accent\">chat</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-sidenav-container autosize>\r\n  <mat-sidenav #menuDrawer data-help=\"menu\" mode=\"over\" closed class=\"mat-elevation-z5\">\r\n    <mat-nav-list>\r\n      <mat-list-item [routerLink]='[\"/dashboard\"]' [attr.aria-label]=\"'Dashboard' | translate\" routerLinkActive=\"active\" data-help=\"dashboard\">\r\n        <mat-icon matListIcon>apps</mat-icon><span>{{'Dashboard' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-expansion-panel class=\"mat-elevation-z0\" [attr.aria-label]=\"'Mailbox' | translate\" data-help=\"folders\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>inbox</mat-icon>\r\n            <span>{{'Mailbox' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let f of profile.folders\" [routerLink]='[\"/mailbox/f\", f.name]' routerLinkActive=\"active\" [attr.data-help]=\"'folder-'+f.name\" [attr.aria-label]=\"f.title\">\r\n          <mat-icon matListIcon>{{f.icon}}</mat-icon><span>{{f.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-list-item [routerLink]='[\"/schedule\"]' routerLinkActive=\"active\" *ngIf=\"schedulerEnabled\" [attr.aria-label]=\"'Scheduler' | translate\">\r\n        <mat-icon matListIcon class=\"mat-icon-rtl-mirror\">date_range</mat-icon><span>{{ 'Schedule' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <ng-container *ngIf=\"enableAnalysis\">\r\n      <ng-container *ngFor=\"let c of profile.cubes\">\r\n        <mat-expansion-panel class=\"mat-elevation-z0\" *ngIf=\"c.views.length\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              <mat-icon>{{ c.icon || 'insert_chart_outlined'}}</mat-icon>\r\n              <span>{{c.title}}</span>\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <mat-list-item *ngFor=\"let v of c.views\" [routerLink]='[\"/cube\", c.name, \"v\", v.name]' routerLinkActive=\"active\" [attr.data-help]=\"'cube-view-'+v.name\">\r\n            <mat-icon matListIcon>{{v.icon || 'insights'}}</mat-icon><span>{{v.title}}</span>\r\n          </mat-list-item>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n      </ng-container>\r\n      <mat-expansion-panel *ngIf=\"profile.reports.length\" class=\"mat-elevation-z0\" [attr.aria-label]=\"'Reports' | translate\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title>\r\n            <mat-icon>list_alt</mat-icon>\r\n            <span>{{'Reports' | translate}}</span>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <mat-list-item *ngFor=\"let r of profile.reports\" [routerLink]='[\"/reports\", r.name]' routerLinkActive=\"active\"\r\n                       [attr.aria-label]=\"r.title\" [attr.data-help]=\"'report-'+r.name\">\r\n          <mat-icon matListIcon>{{r.icon}}</mat-icon><span>{{r.title}}</span>\r\n        </mat-list-item>\r\n      </mat-expansion-panel>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" data-help=\"options\"\r\n                     (click)=\"options($event)\">\r\n        <mat-icon matListIcon>settingson</mat-icon>\r\n        <span>{{'Settings' | translate}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      <mat-list-item role=\"listitem\" (click)=\"signout($event)\">\r\n        <mat-icon matListIcon>logout</mat-icon>\r\n        <span>{{'Power' | translate}}</span>\r\n      </mat-list-item>\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n  <mat-sidenav #secondaryDrawer position=\"end\" closed mode=\"over\" autoFocus=\"false\" class=\"mat-elevation-z3\">\r\n    <ng-container [ngSwitch]=\"mode\">\r\n    <bizdoc-chat [(contact)]=\"contact\" *ngSwitchCase=\"'chat'\"></bizdoc-chat>\r\n    <bizdoc-notifications-table *ngSwitchCase=\"'notifications'\"></bizdoc-notifications-table>\r\n    </ng-container>\r\n  </mat-sidenav>\r\n  <mat-sidenav-content data-help=\"main\">\r\n    <router-outlet></router-outlet>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n<button mat-fab [attr.aria-label]=\"'Compose'| translate\" [@fabFull]=\"composeState\" *ngIf=\"composeEnabled\" color=\"accent\" (click)=\"compose()\" data-help=\"compose\"><mat-icon>add</mat-icon></button>\r\n", styles: ["#logo{padding-left:12px;padding-right:12px;vertical-align:middle;width:120px;filter:invert(1)}:host ::ng-deep .mat-sidenav-container{height:calc(100% - 58px)}:host ::ng-deep .mat-sidenav-container .home-content{padding:unset}::ng-deep .mat-drawer-inner-container{height:auto}router-outlet~*{position:absolute;height:100%;width:100%}::ng-deep [dir=rtl] .mat-fab{left:30px;right:unset}.mat-fab{z-index:1;position:absolute;bottom:30px;right:30px}:host ::ng-deep .mat-expansion-panel-header{padding:0 18px}:host ::ng-deep .mat-expansion-panel-header .mat-expansion-panel-header-title .mat-icon{padding:0 3px}\n"] }]
@@ -21195,23 +21298,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 args: ['nameInput', { static: true, read: ElementRef }]
             }] } });
 
-class UserNamePipe {
-    constructor(_accounts) {
-        this._accounts = _accounts;
-    }
-    transform(value) {
-        const subject = new BehaviorSubject(null);
-        this._accounts.get(value).subscribe(u => subject.next(u.name));
-        return subject;
-    }
-}
-UserNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: UserNamePipe, deps: [{ token: AccountService }], target: i0.ɵɵFactoryTarget.Pipe });
-UserNamePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: UserNamePipe, name: "userName" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: UserNamePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'userName' }]
-        }], ctorParameters: function () { return [{ type: AccountService }]; } });
-
 let ReturnActionComponent = class ReturnActionComponent {
     constructor(_fb, actionRef, session) {
         this._fb = _fb;
@@ -21611,7 +21697,7 @@ class CubeInfo {
      */
     _mapAxes(cube, axes) {
         const filters = {};
-        axes.forEach((a, i) => a && (filters[cube.axes[i].name] = a));
+        axes.forEach((a, i) => a && cube.axes.length > i && (filters[cube.axes[i].name] = a));
         return filters;
     }
     _open(comp, element, data) {
@@ -23089,7 +23175,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$4.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$4.ColumnsDirective, selector: "ejs-gantt>e-columns" }, { type: i16.ColumnsDirective, selector: "ejs-chart>e-columns" }, { type: i6$4.ColumnsDirective, selector: "ejs-grid>e-columns" }, { type: i6$4.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$4.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$4.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$4.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$3.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$3.ColumnsDirective, selector: "ejs-grid>e-columns" }, { type: i6$3.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$3.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$3.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" }]
@@ -28751,6 +28837,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
             this._start = r.start, this._end = r.end;
             this._list();
         });
+        //let r = localStorage.getItem('trace-range');
         this.range = [now.add(-2, 'w').toDate(),
             now.toDate()];
         this.form.valueChanges.pipe(takeUntil(this._destroy), debounceTime(200)).
@@ -28759,7 +28846,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
             const { documentId } = p;
             documentId && this._open(documentId.decodeId());
         });
-        this._pane.resize.pipe(takeUntil(this._destroy)).subscribe(() => this.diagram?.refresh());
+        this._pane.resized.pipe(takeUntil(this._destroy)).subscribe(() => this.diagram?.refresh());
     }
     openFilter(evt) {
         this._popup.open(this.filterArgs, evt.target).opened.subscribe(() => this.searchInput.focus());
@@ -28773,6 +28860,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         });
     }
     rangeChanged(args) {
+        //localStorage.setItem('trace-range', args.);
         this._dateschange.next(args);
     }
     guide(evt) {
@@ -29729,69 +29817,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
-class OutOfOfficeDialog {
-    constructor(_accounts, _dialogRef, _fb, _data) {
+class ProfileSettingsDialog {
+    constructor(_accounts, _dialogRef, _fb, model) {
         this._accounts = _accounts;
         this._dialogRef = _dialogRef;
         this._fb = _fb;
-        this._data = _data;
-        this.userCtrl = this._fb.control(null);
-        this.form = this._fb.group({
+        this.model = model;
+        this.separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
+        this.substitute = this._fb.control([]);
+        this.grants = this._fb.control([]);
+        this.outOfOffice = this._fb.group({
             active: this._fb.control(false),
-            substitueId: this._fb.control(null, Validators.required),
+            substitueId: this._fb.control(null),
             from: this._fb.control(null),
             to: this._fb.control(null)
         });
+        this.grantAccess = this._fb.group({
+            active: this._fb.control(false),
+            users: this._fb.control(null)
+        });
+        this.form = this._fb.group({
+            outOfOffice: this.outOfOffice,
+            grantAccess: this.grantAccess
+        });
         this.userDisplay = (item) => {
             return item ? item.name : null;
         };
     }
-    get model() { return this._data.outOfOffice; }
     ngOnInit() {
-        this.users$ = this.userCtrl.valueChanges.pipe(takeUntil$1(this._dialogRef.afterClosed()), filter$1(v => isString(v)), switchMap$1(v => this._accounts.findAll(v)), map$1(r => r.filter(u => u.id !== this._data.userId)));
         this.form.patchValue(this.model);
-        !this.model.from &&
-            this.form.controls['to'].disable({ emitEvent: false });
-        this.model.substitueId &&
-            this._accounts.get(this.model.substitueId).subscribe(u => this.userCtrl.setValue(u, { emitEvent: false }));
-        this.form.controls['active'].
-            valueChanges.pipe(takeUntil$1(this._dialogRef.afterClosed())).
+        const { active, to, from } = this.outOfOffice.controls;
+        if (!this.model.outOfOffice || !this.model.outOfOffice.active) {
+            to.disable({ emitEvent: false });
+            from.disable({ emitEvent: false });
+            this.substitute.disable({ emitEvent: false });
+        }
+        else {
+            this.substitute.addValidators(Validators.required);
+            if (!this.model.outOfOffice.from)
+                to.disable({ emitEvent: false });
+        }
+        this.model.outOfOffice.substitueId &&
+            this._accounts.get(this.model.outOfOffice.substitueId).subscribe(u => this.substitute.setValue(u, { emitEvent: false }));
+        active.valueChanges.pipe(takeUntil$1(this._dialogRef.afterClosed())).
             subscribe(active => {
             if (active) {
-                this.form.controls['from'].enable({ emitEvent: false });
-                this.form.controls['from'].value && this.form.controls['to'].enable({ emitEvent: false });
-                this.userCtrl.enable();
-                this.userInput.focus();
+                from.enable();
+                from.value && to.enable();
+                this.substitute.enable();
+                this.substitute.addValidators(Validators.required);
+                this.substitueInput.focus();
             }
             else {
-                this.form.controls['from'].disable({ emitEvent: false });
-                this.form.controls['to'].disable({ emitEvent: false });
-                this.userCtrl.disable({ emitEvent: false });
+                from.disable();
+                to.disable();
+                this.substitute.clearValidators();
+                this.substitute.disable();
             }
         });
-        this.form.controls['from'].valueChanges.pipe(takeUntil$1(this._dialogRef.afterClosed())).
+        this.ousers$ = this.substitute.valueChanges.pipe(takeUntil$1(this._dialogRef.afterClosed()), filter$1(v => isString(v)), switchMap$1(v => this._accounts.findAll(v)), map$1(r => r.filter(u => u.id !== this.model.userId)));
+        from.valueChanges.pipe(takeUntil$1(this._dialogRef.afterClosed())).
             subscribe(v => {
             if (v)
-                this.form.controls['to'].enable({ emitEvent: false });
+                to.enable();
             else
-                this.form.controls['to'].disable({ emitEvent: false });
+                to.disable();
         });
+        if (!this.model.grantAccess || !this.model.grantAccess.active) {
+            this.grants.disable({ emitEvent: false });
+        }
+        this.grantAccess.controls['active'].valueChanges.pipe(takeUntil$1(this._dialogRef.afterClosed())).
+            subscribe(v => {
+            if (v) {
+                this.grants.enable();
+                this.grants.addValidators(Validators.required);
+                this.grantInput.focus();
+            }
+            else {
+                this.grants.clearValidators();
+            }
+        });
+        this.gusers$ = this.grants.valueChanges.pipe(takeUntil$1(this._dialogRef.afterClosed()), filter$1(v => isString(v)), switchMap$1(v => this._accounts.findAll(v)), map$1(r => r.filter(u => u.id !== this.model.userId)));
     }
     setId(event) {
-        this.form.controls['substitueId'].setValue(event.option.value.id);
+        const { id } = event.option.value;
+        this.outOfOffice.controls['substitueId'].setValue(id);
+    }
+    /**
+     *
+     * @param id
+     */
+    removeGrant(id) {
+        const users = this.form.value.grantAccess.users;
+        const index = users.indexOf(id);
+        if (index >= 0)
+            users.splice(index, 1);
+        this.form.patchValue({});
+    }
+    /**
+     *
+     * @param inp
+     * @param event
+     */
+    addGrant(inp, event) {
+        const users = this.form.value.grantAccess.users;
+        const id = event.option.value;
+        if (!users)
+            this.grantAccess.controls['users'].setValue([id]);
+        else
+            users.push(id);
+        inp.value = '';
+        this.form.patchValue({});
     }
 }
-OutOfOfficeDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: OutOfOfficeDialog, deps: [{ token: AccountService }, { token: i3$1.MatDialogRef }, { token: i1$2.FormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-OutOfOfficeDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: OutOfOfficeDialog, selector: "ng-component", viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true, read: MatInput }], ngImport: i0, template: "<h2 mat-dialog-title>{{'OutOfOffice' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" fxLayout=\"column\" [formGroup]=\"form\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field fxFlex>\r\n      <input matInput [formControl]=\"userCtrl\" type=\"search\" [matAutocomplete]=\"sauto\" #userInput\r\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.active\" />\r\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                        (optionSelected)=\"setId($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    </mat-form-field>\r\n    <div>\r\n      <mat-form-field>\r\n        <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n        <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n        <mat-datepicker #from></mat-datepicker>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value?.from\" placeholder=\"{{'To'| translate}}\" />\r\n        <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n        <mat-datepicker #to></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n", components: [{ type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { 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"] }], directives: [{ 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: i23.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: i23.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: 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: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { 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: { "translate": TranslatePipe, "async": i10.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: OutOfOfficeDialog, decorators: [{
+ProfileSettingsDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ProfileSettingsDialog, deps: [{ token: AccountService }, { token: i3$1.MatDialogRef }, { token: i1$2.FormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ProfileSettingsDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ProfileSettingsDialog, selector: "ng-component", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }], ngImport: i0, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div fxLayout=\"column\" formGroupName=\"outOfOffice\">\r\n      <h3 class=\"mat-body-strong\">{{'OutOfOffice'|translate}}</h3>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field fxFlex>\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          <mat-option *ngFor=\"let u of ousers$ | async\" [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <div>\r\n        <mat-form-field>\r\n          <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n          <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #from></mat-datepicker>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value?.from\" placeholder=\"{{'To'| translate}}\" />\r\n          <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #to></mat-datepicker>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div fxLayout=\"column\" formGroupName=\"grantAccess\">\r\n      <h3 class=\"mat-body-strong\">{{'GrantAccess'|translate}}</h3>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <mat-form-field>\r\n        <mat-chip-list #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          <mat-chip *ngFor=\"let u of grantAccess.value.users || []\"\r\n                    [removable]=\"grantAccess.value.active\"\r\n                    (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip>\r\n          <input [formControl]=\"grants\" placeholder=\"{{'Users'| translate}}\"\r\n                 [required]=\"grantAccess.value.active\"\r\n                 [matAutocomplete]=\"grantAuto\"\r\n                 #grantInput\r\n                 [matChipInputFor]=\"grantList\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        </mat-chip-list>\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n            {{u.name}}\r\n            <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div> \r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n", components: [{ type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: i3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i3$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { 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"] }], directives: [{ 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: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i23.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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i23.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: 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: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i3$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: { "translate": TranslatePipe, "async": i10.AsyncPipe, "userName": UserNamePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ProfileSettingsDialog, decorators: [{
             type: Component,
-            args: [{ template: "<h2 mat-dialog-title>{{'OutOfOffice' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" fxLayout=\"column\" [formGroup]=\"form\">\r\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n    <br />\r\n    <mat-form-field fxFlex>\r\n      <input matInput [formControl]=\"userCtrl\" type=\"search\" [matAutocomplete]=\"sauto\" #userInput\r\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.active\" />\r\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                        (optionSelected)=\"setId($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    </mat-form-field>\r\n    <div>\r\n      <mat-form-field>\r\n        <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n        <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n        <mat-datepicker #from></mat-datepicker>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value?.from\" placeholder=\"{{'To'| translate}}\" />\r\n        <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n        <mat-datepicker #to></mat-datepicker>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n" }]
+            args: [{ template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div fxLayout=\"column\" formGroupName=\"outOfOffice\">\r\n      <h3 class=\"mat-body-strong\">{{'OutOfOffice'|translate}}</h3>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field fxFlex>\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          <mat-option *ngFor=\"let u of ousers$ | async\" [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <div>\r\n        <mat-form-field>\r\n          <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n          <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #from></mat-datepicker>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value?.from\" placeholder=\"{{'To'| translate}}\" />\r\n          <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #to></mat-datepicker>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div fxLayout=\"column\" formGroupName=\"grantAccess\">\r\n      <h3 class=\"mat-body-strong\">{{'GrantAccess'|translate}}</h3>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <mat-form-field>\r\n        <mat-chip-list #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          <mat-chip *ngFor=\"let u of grantAccess.value.users || []\"\r\n                    [removable]=\"grantAccess.value.active\"\r\n                    (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip>\r\n          <input [formControl]=\"grants\" placeholder=\"{{'Users'| translate}}\"\r\n                 [required]=\"grantAccess.value.active\"\r\n                 [matAutocomplete]=\"grantAuto\"\r\n                 #grantInput\r\n                 [matChipInputFor]=\"grantList\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        </mat-chip-list>\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n            {{u.name}}\r\n            <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div> \r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n" }]
         }], ctorParameters: function () { return [{ type: AccountService }, { type: i3$1.MatDialogRef }, { type: i1$2.FormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }]; }, propDecorators: { userInput: [{
+                }] }]; }, propDecorators: { substitueInput: [{
+                type: ViewChild,
+                args: ['substitueInput', { read: MatInput }]
+            }], grantInput: [{
                 type: ViewChild,
-                args: ['userInput', { read: MatInput }]
+                args: ['grantInput', { read: MatChipInput }]
             }] } });
 
 let ProfilerComponent = class ProfilerComponent {
@@ -29854,6 +30006,7 @@ let ProfilerComponent = class ProfilerComponent {
         this.theme = this._session.theme.dark ? 'MaterialDark' : 'Material';
         this.cols = 2;
         this._destroy = new Subject();
+        this.separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
         media.media$.pipe(takeUntil(this._destroy)).subscribe(m => this.cols = m.mqAlias === 'sm' || m.mqAlias === 'xm' ? 1 : 2);
         _session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
             this.theme = t.dark ? 'MaterialDark' : 'Material';
@@ -29865,16 +30018,16 @@ let ProfilerComponent = class ProfilerComponent {
             const { userId } = p;
             userId && this._open(userId);
         });
-        this._pane.resize.pipe(takeUntil(this._destroy)).subscribe(this.resize.bind(this));
+        this._pane.resized.pipe(takeUntil(this._destroy)).subscribe(() => this.chart?.chartResize());
         this.users$ = this.search.valueChanges.pipe(takeUntil(this._destroy), debounceTime(250), filter(v => !isObject(v)), switchMap(v => this._accounts.findAll(v)));
     }
     guide(evt) {
-        const steps = [{
-                selector: '[data-help=search]',
-                position: 'Below',
-                content: this._translate.get('ProfilerSearchHelp')
-            }];
+        const steps = [];
         if (this.data) {
+            steps.push({
+                selector: '[data-help=settings]',
+                content: this._translate.get('OutOfOfficeHelp')
+            });
             Object.keys(this.data.activity).length &&
                 steps.push({
                     selector: '[data-help=activity]',
@@ -29897,8 +30050,9 @@ let ProfilerComponent = class ProfilerComponent {
         }
         else
             steps.push({
-                selector: '[data-help=out-of-office]',
-                content: this._translate.get('OutOfOfficeHelp')
+                selector: '[data-help=search]',
+                position: 'Below',
+                content: this._translate.get('ProfilerSearchHelp')
             });
         this._guide.start({
             name: 'profiler',
@@ -29947,11 +30101,6 @@ let ProfilerComponent = class ProfilerComponent {
         const action = this._session.profile.actions.find(a => a.name === name);
         return action ? action.past || action.title : name;
     }
-    resize() {
-        //  const { width, height } = getComputedStyle(this.chartElement.nativeElement.parentElement);
-        //  this.chart.width = width;
-        //  this.chart.height = height;
-    }
     pointClick(evt) {
         const { id } = evt.series.dataSource[evt.pointIndex];
         this._documentInfo.open(id);
@@ -29973,17 +30122,21 @@ let ProfilerComponent = class ProfilerComponent {
         this._dialog.open(this.assignTpl, {}).afterClosed().
             subscribe(u => u && this._reassign(u, position));
     }
-    outOfOffice() {
-        this._dialog.open(OutOfOfficeDialog, {
+    settings() {
+        this._dialog.open(ProfileSettingsDialog, {
             closeOnNavigation: true,
-            disableClose: true,
             data: {
                 userId: this.data.info.id,
+                grantAccess: this.data.grantAccess,
                 outOfOffice: this.data.outOfOffice
             }
         }).afterClosed().
-            subscribe(v => v && this._utilityRef.execute({ outOfOffice: v, userId: this.data.info.id }).subscribe(() => {
-            this.data.outOfOffice = v;
+            subscribe(v => v && this._utilityRef.execute({
+            outOfOffice: v.outOfOffice,
+            grantAccess: v.grantAccess,
+            userId: this.data.info.id
+        }).subscribe(() => {
+            Object.assign(this.data);
             this._sb.toast('ChangesSaved');
         }, () => this._sb.error()));
     }
@@ -30006,7 +30159,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: i0.ChangeDetectorRef }, { 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: "assignTpl", first: true, predicate: ["assignTpl"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\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  <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 *ngIf=\"data\" fxLayout=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card fxFlex>\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      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"outOfOffice()\" [bizdocTooltip]=\"'OutOfOffice' | translate\" [disabled]=\"!data\" data-help=\"out-of-office\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card fxFlex 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  <!-- pending -->\r\n  <mat-card fxFlex 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  <!-- positions -->\r\n  <mat-card fxFlex 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-actions>\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    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\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{margin:5px}.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: i19.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i19.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: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i23.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: i23.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: i19.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i19.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i19.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i16.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { 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: 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)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["activity"], descendants: true }, { propertyName: "chartElement", first: true, predicate: ["activity"], descendants: true, read: ElementRef }, { propertyName: "assignTpl", first: true, predicate: ["assignTpl"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\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  <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 *ngIf=\"data\" fxLayout=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card fxFlex>\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      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card fxFlex 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  <!-- pending -->\r\n  <mat-card fxFlex 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  <!-- positions -->\r\n  <mat-card fxFlex 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-actions>\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    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\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{margin:5px}.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: i19.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i19.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: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i23.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: i23.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: i19.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i19.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i19.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { type: i16.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { 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: 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*/
@@ -30015,7 +30168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             type: Component,
             args: [{ host: {
                         class: 'pane'
-                    }, entryComponents: [OutOfOfficeDialog], template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\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  <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 *ngIf=\"data\" fxLayout=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card fxFlex>\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      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"outOfOffice()\" [bizdocTooltip]=\"'OutOfOffice' | translate\" [disabled]=\"!data\" data-help=\"out-of-office\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card fxFlex 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  <!-- pending -->\r\n  <mat-card fxFlex 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  <!-- positions -->\r\n  <mat-card fxFlex 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-actions>\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    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\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{margin:5px}.mat-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-table{width:100%}\n"] }]
+                    }, entryComponents: [ProfileSettingsDialog], template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\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  <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 *ngIf=\"data\" fxLayout=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card fxFlex>\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      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card fxFlex 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  <!-- pending -->\r\n  <mat-card fxFlex 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  <!-- positions -->\r\n  <mat-card fxFlex 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-actions>\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    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\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{margin:5px}.mat-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-table{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: PromptService }, { type: UtilityRef }, { type: SessionService }, { type: i3$1.MatDialog }, { type: DocumentInfo }, { type: i2$4.MediaObserver }, { type: ChatInfo }, { type: GuideService }, { type: PanesRouter }, { type: i0.ChangeDetectorRef }, { type: PaneRef }, { type: TranslateService }, { type: AccountService }, { type: i1$2.FormBuilder }]; }, propDecorators: { chart: [{
                 type: ViewChild,
                 args: ['activity']
@@ -30028,9 +30181,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             }], guide: [{
                 type: HostListener,
                 args: ['window:keydown.f1', ['$event']]
-            }], resize: [{
-                type: HostListener,
-                args: ['window:resize']
             }] } });
 
 const SYSTEM_COMPONENTS = [RoleNodeComponent, ManageCubeIndexUtility, PermissionsUtility, PositionsComponent, ProfilerComponent,
@@ -30046,7 +30196,7 @@ class SystemModule {
     }
 }
 SystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SystemModule, declarations: [PermissionsUtility, ManageCubeIndexUtility, OutOfOfficeDialog,
+SystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SystemModule, declarations: [PermissionsUtility, ManageCubeIndexUtility, ProfileSettingsDialog,
         UtilityWrapperComponent, UtilityPaneComponent,
         SearchInput,
         ReassignDialog,
@@ -30082,7 +30232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             type: NgModule,
             args: [{
                     declarations: [
-                        PermissionsUtility, ManageCubeIndexUtility, OutOfOfficeDialog,
+                        PermissionsUtility, ManageCubeIndexUtility, ProfileSettingsDialog,
                         UtilityWrapperComponent, UtilityPaneComponent,
                         SearchInput,
                         ReassignDialog,
@@ -30111,7 +30261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         PositionsComponent,
                         WorkflowComponent, WorkflowNodeComponent, RoleNodeComponent,
                         PatternsComponent
-                    ]
+                    ],
+                    entryComponents: [ProfileSettingsDialog]
                 }]
         }] });
 
@@ -30298,5 +30449,5 @@ function withRoute(routes) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AvatarComponent, BIZDOC_CONFIG, BizDoc, BizDocApp, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, ColorPicker, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareGroupDirective, CompareGroupsWidget, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeCompareWidget, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeMatrixComponent, CubeParallelComponent, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateFormatPipe, DateRangePipe, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, FadeSlideInOut, FieldType, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideRef, GuideService, INBOX, IdentityName, ItemResolveService, JoinPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationEnd, NavigationSelected, NavigationStart, NgxComponentOutlet, NotificationsTableComponent, OpenPolicy, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SessionService, ShakeAnimation, SharedModule, SlotRouterDirective, StateDirective, StatePipe, SubstitutionComponent, SwapAnimation, TagsComponent, TasksComponent, TimeAgoPipe, TimePicker, TimespanInput, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, WidgetItemComponent, WidgetRef, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, registerComponents };
+export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AvatarComponent, BIZDOC_CONFIG, BackNavigation, BizDoc, BizDocApp, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, CollapseNavigation, ColorPicker, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareGroupDirective, CompareGroupsWidget, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeCompareWidget, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeMatrixComponent, CubeParallelComponent, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateFormatPipe, DateRangePipe, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, FadeSlideInOut, FieldType, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideRef, GuideService, INBOX, IdentityName, ItemResolveService, JoinPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationClose, NavigationEnd, NavigationExpand, NavigationFocus, NavigationMode, NavigationResize, NavigationStart, NgxComponentOutlet, NotificationsTableComponent, OpenPolicy, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SessionService, ShakeAnimation, SharedModule, SlotRouterDirective, StateDirective, StatePipe, SubstitutionComponent, SwapAnimation, TagsComponent, TasksComponent, TimeAgoPipe, TimePicker, TimespanInput, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, WidgetItemComponent, WidgetRef, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, registerComponents };
 //# sourceMappingURL=bizdoc-core.mjs.map