@bizdoc/core 1.9.9 → 1.9.14

package/fesm2020/bizdoc-core.mjs

@@ -114,7 +114,7 @@ import * as i24 from '@angular/flex-layout/extended';
 import * as i4$1 from '@ctrl/ngx-emoji-mart';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import * as i8$2 from '@syncfusion/ej2-angular-charts';
-import { AccumulationChart, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationLegend, Export, PieSeries, ChartModule, AccumulationChartAllModule, BulletChartAllModule, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService, SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService, StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService, BarSeriesService, StackingBarSeriesService, RangeColumnSeriesService, BubbleSeriesService, TooltipService, CrosshairService, CategoryService, DateTimeService, LogarithmicService, LegendService, ZoomService, DataLabelService, SelectionService, ChartAnnotationService, WaterfallSeriesService, RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService, MultiLevelLabelService, ParetoSeriesService, TooltipRenderService, ExportService, AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService, AccumulationChartComponent, Chart as Chart$1, DateTime as DateTime$1, BarSeries as BarSeries$1, AreaSeries as AreaSeries$1, BubbleSeries as BubbleSeries$1, ColumnSeries as ColumnSeries$1, LineSeries as LineSeries$1, PolarSeries as PolarSeries$1, RadarSeries as RadarSeries$1, SplineSeries as SplineSeries$1, SplineAreaSeries as SplineAreaSeries$1, ScatterSeries as ScatterSeries$1, StackingLineSeries as StackingLineSeries$1, StackingAreaSeries as StackingAreaSeries$1, StackingColumnSeries as StackingColumnSeries$1, StackingBarSeries as StackingBarSeries$1, StepAreaSeries as StepAreaSeries$1, StepLineSeries as StepLineSeries$1, ChartComponent, SparklineAllModule } from '@syncfusion/ej2-angular-charts';
+import { AccumulationChart, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationLegend, Export, PieSeries, ChartModule, AccumulationChartAllModule, SparklineAllModule, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService, SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService, StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService, BarSeriesService, StackingBarSeriesService, RangeColumnSeriesService, BubbleSeriesService, TooltipService, CrosshairService, CategoryService, DateTimeService, LogarithmicService, LegendService, ZoomService, DataLabelService, SelectionService, ChartAnnotationService, WaterfallSeriesService, RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService, MultiLevelLabelService, ParetoSeriesService, TooltipRenderService, ExportService, AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService, AccumulationChartComponent, Chart as Chart$1, DateTime as DateTime$1, BarSeries as BarSeries$1, AreaSeries as AreaSeries$1, BubbleSeries as BubbleSeries$1, ColumnSeries as ColumnSeries$1, LineSeries as LineSeries$1, PolarSeries as PolarSeries$1, RadarSeries as RadarSeries$1, SplineSeries as SplineSeries$1, SplineAreaSeries as SplineAreaSeries$1, ScatterSeries as ScatterSeries$1, StackingLineSeries as StackingLineSeries$1, StackingAreaSeries as StackingAreaSeries$1, StackingColumnSeries as StackingColumnSeries$1, StackingBarSeries as StackingBarSeries$1, StepAreaSeries as StepAreaSeries$1, StepLineSeries as StepLineSeries$1, ChartComponent } from '@syncfusion/ej2-angular-charts';
 import * as XLSX from 'xlsx';
 import { Chart, Category, DateTime, Tooltip, Export as Export$1, BarSeries, AreaSeries, StackingStepAreaSeries, BubbleSeries, ColumnSeries, LineSeries, Legend, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries } from '@syncfusion/ej2-charts';
 import * as i6$5 from '@syncfusion/ej2-angular-grids';
@@ -131,7 +131,7 @@ import { KanbanComponent, KanbanModule } from '@syncfusion/ej2-angular-kanban';
 import { CircularGaugeModule, AnnotationsService, GaugeTooltipService, LegendService as LegendService$1, CircularGauge, Annotations, GaugeTooltip, CircularGaugeComponent, Legend as Legend$1 } from '@syncfusion/ej2-angular-circulargauge';
 import { PivotViewModule, ExcelExportService as ExcelExportService$1, GroupingBarService, NumberFormattingService, GroupingService, PivotChartService, ConditionalFormattingService, PivotView as PivotView$1, ExcelExport as ExcelExport$2, PivotViewComponent } from '@syncfusion/ej2-angular-pivotview';
 import * as i7$6 from '@syncfusion/ej2-angular-gantt';
-import { Gantt, SelectionService as SelectionService$3, DayMarkersService, GanttModule } from '@syncfusion/ej2-angular-gantt';
+import { GanttModule, Gantt, SelectionService as SelectionService$3, DayMarkersService } from '@syncfusion/ej2-angular-gantt';
 import { __decorate } from 'tslib';
 import player from 'lottie-web/build/player/lottie';
 
@@ -795,6 +795,9 @@ function getParameterByName(name, url = window.location.href) {
     return decodeURIComponent(results[2].replace(/\+/g, ' '));
 }
 
+class AuthenticationImpl {
+}
+
 class PopupRef {
     constructor(_data) {
         this._data = _data;
@@ -911,9 +914,6 @@ class FirebaseService {
     }
 }
 
-class AuthenticationImpl {
-}
-
 /** Listen to hub contracts */
 class HubService {
     constructor(_auth) {
@@ -1703,8 +1703,8 @@ const STRINGS = {
         MailVersionUpdate: '#{0} updated by {1}',
         NewComment: 'Someone commented...',
         Commented: '{0} commented',
-        DeleteFile: 'Delete File',
-        DeleteFileAsk: 'Are you sure you want to delete this file?',
+        DeleteFile: 'Delete Attachment',
+        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',
@@ -1810,7 +1810,7 @@ const STRINGS = {
         Form: 'Form',
         ActionAsk: 'Are you sure you want to {0}?',
         Discard: 'Discard',
-        DiscardAsk: 'Are you sure you want to permenently discard form?',
+        DiscardAsk: 'Are you sure you want to permenently discard this document?',
         DiscardSelected: 'Discard {0} item(s)',
         TypeHere: 'Type here',
         ChatHere: 'Chat here',
@@ -2688,16 +2688,17 @@ const IMAGE_TYPE = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];
 function isImage(contentType) {
     return IMAGE_TYPE.indexOf(contentType) > -1;
 }
-function formatUrl(documentId, fileId) {
-    return `/api/mailbox/download/${documentId}?fileId=${fileId}`;
+function formatUrl(documentId, fileId, token) {
+    return `/api/mailbox/download/${documentId}?fileId=${fileId}&access_token=${token}`;
 }
 const ANIMATION_TIMINGS = '400ms cubic-bezier(0.25, 0.8, 0.25, 1)';
 /** attachment-preview component*/
 class AttachmentPreview {
     /** attachment-preview ctor */
-    constructor(_directionality, _renderer, data, sanitizer, _overlayRef) {
+    constructor(_directionality, _renderer, data, sanitizer, _auth, _overlayRef) {
         this._renderer = _renderer;
         this.data = data;
+        this._auth = _auth;
         this._overlayRef = _overlayRef;
         this.loading = true;
         this.animationState = 'enter';
@@ -2727,7 +2728,7 @@ class AttachmentPreview {
         location.assign(this._url());
     }
     _url() {
-        return formatUrl(this.data.documentId, this.data.file.id);
+        return formatUrl(this.data.documentId, this.data.file.id, this._auth.getAccessToken());
     }
     rotate() {
         const elem = (this.isImage ? this.img : this.obj).nativeElement;
@@ -2769,7 +2770,7 @@ class AttachmentPreview {
         this.animationState = 'leave';
     }
 }
-AttachmentPreview.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: AttachmentPreview, deps: [{ token: i7.Directionality }, { token: i0.Renderer2 }, { token: FILE_PREVIEW_DIALOG_DATA }, { token: i1$2.DomSanitizer }, { token: i1$1.OverlayRef }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentPreview.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: AttachmentPreview, deps: [{ token: i7.Directionality }, { token: i0.Renderer2 }, { token: FILE_PREVIEW_DIALOG_DATA }, { token: i1$2.DomSanitizer }, { token: AuthenticationImpl }, { token: i1$1.OverlayRef }], target: i0.ɵɵFactoryTarget.Component });
 AttachmentPreview.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: AttachmentPreview, selector: "bizdoc-attachment-preview", host: { listeners: { "document:resize": "resize()", "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "obj", first: true, predicate: ["obj"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"overlay-content\" [@slideContent]=\"animationState\" (@slideContent.start)=\"onAnimationStart($event)\"\r\n [dir]=\"dir\" (@slideContent.done)=\"onAnimationDone($event)\">\r\n  <div class=\"toolbar-wrapper\" fxLayout=\"row\" [@slideDown]=\"slideDown\" *ngIf=\"!loading\">\r\n    <button mat-icon-button (click)=\"close()\" bizdocTooltip=\"{{'Back' | translate}}\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n    <span class=\"mat-body-1\">{{data.file.fileName}}</span>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"rotate()\" bizdocTooltip=\"{{'Rotate' | translate }}\"><mat-icon>screen_rotation</mat-icon></button>\r\n    <button mat-icon-button (click)=\"download()\" bizdocTooltip=\"{{'Download' | translate}}\"><mat-icon>save_alt</mat-icon></button>\r\n  </div>\r\n  <div class=\"spinner-wrapper\" *ngIf=\"loading\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  <object (load)=\"onLoad($event)\" [data]=\"objectData\" [type]=\"data.file.contentType\" *ngIf=\"!isImage\" #obj></object>\r\n  <img *ngIf=\"isImage\" (load)=\"onLoad($event)\" [style.opacity]=\"loading ? 0 : 1\" [@fade]=\"loading ? 'fadeOut' : 'fadeIn'\" [src]=\"objectData\" #img>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center}.spinner-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}img{width:100%;max-width:500px;height:auto}.overlay-content{padding:1em}.overlay-content .toolbar-wrapper{align-items:center;color:#f5f5f5}.divider{flex:1 1 auto}\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: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }], pipes: { "translate": TranslatePipe }, animations: [
         trigger('fade', [
             state('fadeOut', style({ opacity: 0 })),
@@ -2813,7 +2814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: i7.Directionality }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FILE_PREVIEW_DIALOG_DATA]
-                }] }, { type: i1$2.DomSanitizer }, { type: i1$1.OverlayRef }]; }, propDecorators: { obj: [{
+                }] }, { type: i1$2.DomSanitizer }, { type: AuthenticationImpl }, { type: i1$1.OverlayRef }]; }, propDecorators: { obj: [{
                 type: ViewChild,
                 args: ['obj', { static: false }]
             }], img: [{
@@ -5954,12 +5955,9 @@ class BrowseFilterComponent {
             const folder = this._session.profile.folders.find(f => f.name === this.folderId);
             if (folder.filters)
                 this.filters = folder.filters;
-            else if (this._config.folders.axes) {
-                const { axes, cube } = this._config.folders;
-                this.filters = { axes, cube };
-            }
+            return;
         }
-        else if (this._config.folders.axes) {
+        if (this._config.folders && this._config.folders.axes) {
             const { axes, cube } = this._config.folders;
             this.filters = { axes, cube };
         }
@@ -6831,7 +6829,7 @@ class BrowseItemsComponent {
         this._loading$.pipe(takeUntil(this._destroy), debounceTime$1(100)).
             subscribe(e => this.loading = e);
     }
-    ngOnChanges(changes) {
+    ngOnChanges(_) {
         this.displayedColumns = this._columns();
         this.refresh();
     }
@@ -7022,7 +7020,7 @@ class BrowseItemsComponent {
         }
     }
     /**
-   * execute function per item in collection
+   * execute function per selected item
    * @param fn
    * @param error
    */
@@ -7069,6 +7067,11 @@ class BrowseItemsComponent {
         const columns = ['select'];
         if (this.folder && this.folder.columns)
             this._appendcolumns(this.folder.columns, columns);
+        else if (!this.folder) {
+            const folder = this._session.profile.folders.find(f => f.name === 'fav');
+            if (folder && folder.columns)
+                this._appendcolumns(folder.columns, columns);
+        }
         else if (this._config.folders && this._config.folders.columns)
             this._appendcolumns(this._config.folders.columns, columns);
         else {
@@ -7092,7 +7095,11 @@ class BrowseItemsComponent {
     }
     sendAll(action, args) {
         const params = queryParams(args);
-        this._forEach(i => this._mailbox.send(i.id, i.version, i.formId, null, action, params).pipe(tap(() => (i.folderId !== this.folderId) && this.dataSource.data.remove(i))), 'SendErr').
+        this._forEach(i => this._mailbox.send(i.id, i.version, i.formId, null, action, params).
+            pipe(tap(() => {
+            if (i.folderId !== this.folderId)
+                this.dataSource.data.remove(i);
+        })), 'SendErr').
             subscribe(is => is.length > 1 ? this._sb.toast('SentMany', is.length.toString(), this._actionAdjective(action, true)) :
             this._sb.toast('Sent', is[0].number, this._actionAdjective(action)));
     }
@@ -8271,8 +8278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
             }] } });
 
 class FormRef {
-    constructor(_router) {
-        this._router = _router;
+    constructor( /*private _router: RouterImpl*/) {
         this._saving = new Subject();
         this._stateChange = new Subject();
         this._modelChange = new Subject();
@@ -8301,10 +8307,10 @@ class FormRef {
      * @param page
      */
     navigate(page) {
-        this._router.navigate([], {
-            queryParams: { page },
-            state: { paging: true }
-        });
+        //this._router.navigate([], {
+        //  queryParams: { page },
+        //  state: { paging: true }
+        //});
         this._navigating.next(page);
     }
     /** release events */
@@ -8773,7 +8779,7 @@ class ComposeFormComponent {
         if (!this.form.template)
             throw (`Form '${this.form.name}' model missing '[Template()]' attribute.`);
         const factory = this._cf.resolve(this.form.template);
-        this._formRef = new FormRef(this._router);
+        this._formRef = new FormRef();
         this._formRef._navigating.
             subscribe(p => this.page = p);
         this._formRef._stateChange.pipe(startWith()).
@@ -9119,7 +9125,7 @@ class ComposePaneComponent {
             this._pane.icon = form.icon;
             if (this.model.draft) {
                 this.mode = 'compose';
-                //this._pane.expand();
+                //setTimeout(()=>this._pane.expand());
             }
             else
                 this.mode = 'preview';
@@ -9157,6 +9163,9 @@ class ComposePaneComponent {
         });
         this._pane.fullscreenChange.subscribe(f => this.expendable = !f);
     }
+    close() {
+        this._pane.close();
+    }
     edit() {
         this.mode = 'compose';
         this.expendable && this.expand();
@@ -9243,12 +9252,12 @@ class ComposePaneComponent {
     }
 }
 ComposePaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ComposePaneComponent, deps: [{ token: SessionService }, { token: MailboxService }, { token: PaneRef }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component });
-ComposePaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: ComposePaneComponent, selector: "bizdoc-compose.pane", host: { listeners: { "document:drop": "handleDocumentDrop($event)", "drop": "handleDrop($event)", "dragenter": "handleEnter($event)", "dragleave": "handleLeave($event)", "dragover": "handleOver($event)", "document:keydown": "handleKeydown($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "dropableElement", first: true, predicate: ["dropable"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button color=\"primary\" (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"form.page !== undefined\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon>\r\n  </button>\r\n  <button mat-stroked-button color=\"primary\" *ngIf=\"model.draft\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  <button mat-stroked-button color=\"primary\" *ngIf=\"model.actions?.length === 1\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" *ngIf=\"model.actions?.length > 1\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Send' | translate\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      <ng-container *ngFor=\"let a of form.actions; let i = index\">\r\n        <mat-divider *ngIf=\"i > 0 && form.actions[i - 1].group !== a.group\"></mat-divider>\r\n        <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      </ng-container>\r\n    </ng-template>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\" *ngIf=\"mode === 'compose'\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon class=\"filled\">{{model.tags && model.tags.length ?'bookmark':'bookmark_border'}}</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\" *ngIf=\"mode !== 'compose' && model.pending && !model.completed\"><mat-icon>create</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.copy()\" data-help=\"copy\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"working\"><mat-icon>content_copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"discard()\" [bizdocTooltip]=\"'Discard' | translate\" *ngIf=\"model.draft && !model.issued\" [disabled]=\"working\"><mat-icon>delete_outlined</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  <button mat-icon-button (click)=\"view()\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.guide(form.help)\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"form.help\" tabindex=\"1\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" *ngIf=\"expendable\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n</mat-toolbar>\r\n<div class=\"file-dropable\" #dropable>\r\n  <bizdoc-form [model]=model #form\r\n               (modelChange)=\"change()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [".nav-toolbar{position:sticky;top:0;z-index:1}.file-dropable.drag{opacity:.5;overflow:hidden;margin:8px;border-style:dashed;border-color:#777;border-width:5px;background-color:#f5f5f5;z-index:2;top:0;left:0;right:0;bottom:0}\n"], components: [{ type: i7$4.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: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange"] }], directives: [{ type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe } });
+ComposePaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: ComposePaneComponent, selector: "bizdoc-compose.pane", host: { listeners: { "document:drop": "handleDocumentDrop($event)", "drop": "handleDrop($event)", "dragenter": "handleEnter($event)", "dragleave": "handleLeave($event)", "dragover": "handleOver($event)", "document:keydown": "handleKeydown($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "dropableElement", first: true, predicate: ["dropable"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button color=\"primary\" (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"form.page !== undefined\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon>\r\n  </button>\r\n  <button mat-stroked-button color=\"primary\" *ngIf=\"model.draft\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  <button mat-stroked-button color=\"primary\" *ngIf=\"model.actions?.length === 1\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" *ngIf=\"model.actions?.length > 1\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Send' | translate\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      <ng-container *ngFor=\"let a of form.actions; let i = index\">\r\n        <mat-divider *ngIf=\"i > 0 && form.actions[i - 1].group !== a.group\"></mat-divider>\r\n        <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      </ng-container>\r\n    </ng-template>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\" *ngIf=\"mode === 'compose'\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon class=\"filled\">{{model.tags && model.tags.length ?'bookmark':'bookmark_border'}}</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\" *ngIf=\"mode !== 'compose' && model.pending && !model.completed\"><mat-icon>create</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  <button mat-icon-button (click)=\"view()\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" *ngIf=\"expendable\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      <button mat-menu-item (click)=\"discard()\" *ngIf=\"model.draft && !model.issued\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      <ng-container *ngIf=\"form.help\">\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n          <!--<mat-icon>help_outline</mat-icon>-->\r\n          <span>{{'Help' | translate}}</span>\r\n        </button>\r\n      </ng-container>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable\" #dropable>\r\n  <bizdoc-form [model]=model #form\r\n               (modelChange)=\"change()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [".nav-toolbar{position:sticky;top:0;z-index:1}.file-dropable.drag{opacity:.5;overflow:hidden;margin:8px;border-style:dashed;border-color:#777;border-width:5px;background-color:#f5f5f5;z-index:2;top:0;left:0;right:0;bottom:0}\n"], components: [{ type: i7$4.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: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange"] }], directives: [{ type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i8$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ComposePaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-compose.pane', host: {
                         class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button color=\"primary\" (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"form.page !== undefined\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon>\r\n  </button>\r\n  <button mat-stroked-button color=\"primary\" *ngIf=\"model.draft\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  <button mat-stroked-button color=\"primary\" *ngIf=\"model.actions?.length === 1\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" *ngIf=\"model.actions?.length > 1\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Send' | translate\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      <ng-container *ngFor=\"let a of form.actions; let i = index\">\r\n        <mat-divider *ngIf=\"i > 0 && form.actions[i - 1].group !== a.group\"></mat-divider>\r\n        <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      </ng-container>\r\n    </ng-template>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\" *ngIf=\"mode === 'compose'\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon class=\"filled\">{{model.tags && model.tags.length ?'bookmark':'bookmark_border'}}</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\" *ngIf=\"mode !== 'compose' && model.pending && !model.completed\"><mat-icon>create</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.copy()\" data-help=\"copy\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"working\"><mat-icon>content_copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"discard()\" [bizdocTooltip]=\"'Discard' | translate\" *ngIf=\"model.draft && !model.issued\" [disabled]=\"working\"><mat-icon>delete_outlined</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  <button mat-icon-button (click)=\"view()\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.guide(form.help)\" [bizdocTooltip]=\"'Help' | translate\" *ngIf=\"form.help\" tabindex=\"1\"><mat-icon>help_outline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" *ngIf=\"expendable\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n</mat-toolbar>\r\n<div class=\"file-dropable\" #dropable>\r\n  <bizdoc-form [model]=model #form\r\n               (modelChange)=\"change()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [".nav-toolbar{position:sticky;top:0;z-index:1}.file-dropable.drag{opacity:.5;overflow:hidden;margin:8px;border-style:dashed;border-color:#777;border-width:5px;background-color:#f5f5f5;z-index:2;top:0;left:0;right:0;bottom:0}\n"] }]
+                    }, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  <button mat-icon-button color=\"primary\" (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" *ngIf=\"form.page !== undefined\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon>\r\n  </button>\r\n  <button mat-stroked-button color=\"primary\" *ngIf=\"model.draft\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  <button mat-stroked-button color=\"primary\" *ngIf=\"model.actions?.length === 1\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" *ngIf=\"model.actions?.length > 1\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Send' | translate\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      <ng-container *ngFor=\"let a of form.actions; let i = index\">\r\n        <mat-divider *ngIf=\"i > 0 && form.actions[i - 1].group !== a.group\"></mat-divider>\r\n        <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      </ng-container>\r\n    </ng-template>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\" *ngIf=\"mode === 'compose'\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon class=\"filled\">{{model.tags && model.tags.length ?'bookmark':'bookmark_border'}}</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\" *ngIf=\"mode !== 'compose' && model.pending && !model.completed\"><mat-icon>create</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  <button mat-icon-button (click)=\"view()\" [bizdocTooltip]=\"'View' | translate\" [attr.aria-label]=\"'View' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" *ngIf=\"expendable\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      <button mat-menu-item (click)=\"discard()\" *ngIf=\"model.draft && !model.issued\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      <ng-container *ngIf=\"form.help\">\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n          <!--<mat-icon>help_outline</mat-icon>-->\r\n          <span>{{'Help' | translate}}</span>\r\n        </button>\r\n      </ng-container>\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable\" #dropable>\r\n  <bizdoc-form [model]=model #form\r\n               (modelChange)=\"change()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [".nav-toolbar{position:sticky;top:0;z-index:1}.file-dropable.drag{opacity:.5;overflow:hidden;margin:8px;border-style:dashed;border-color:#777;border-width:5px;background-color:#f5f5f5;z-index:2;top:0;left:0;right:0;bottom:0}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: MailboxService }, { type: PaneRef }, { type: PanesRouter }]; }, propDecorators: { form: [{
                 type: ViewChild,
                 args: [ComposeFormComponent, { static: true }]
@@ -9300,6 +9309,8 @@ class BrowsePaneComponent {
             this.filterType = p['type'];
             if (this.filterType === 'flagged')
                 this._pane.title = this._translate.get('Flagged');
+            else if (p['tag'])
+                this._pane.title = this._translate.get('Tags');
             this.filters = p;
         });
         const events = this._router.events.pipe(takeUntil(this._destroy));
@@ -9452,6 +9463,7 @@ class CubeAccumulationChartComponent {
                 this.endAngle = 360;
                 this.innerRadius = '0';
         }
+        this.execute();
     }
     textRender(e) {
         e.text = e.point.x;
@@ -9474,10 +9486,13 @@ class CubeAccumulationChartComponent {
      *
      */
     ngOnChanges(changes) {
-        if (changes['filters'])
+        if (changes['filters'] && !changes['filters'].firstChange)
             this.execute();
         else if (changes['height'])
-            this.accumchart && this.accumchart.accumulationResize();
+            this.resize();
+    }
+    resize() {
+        this.accumchart && this.accumchart.accumulationResize();
     }
     execute() {
         this.loadingChange.emit(true);
@@ -9507,11 +9522,17 @@ class CubeAccumulationChartComponent {
             height: this.height,
             currencyCode: this.currencyCode,
             series: [{
-                    dataSource: this.dataSource, xName: 'name', yName: 'y',
-                    startAngle: this.startAngle, endAngle: this.endAngle,
-                    radius: "70%", dataLabel: this.dataLabel,
-                    explode: true, explodeOffset: '10%',
-                    explodeIndex: 0, innerRadius: this.innerRadius,
+                    dataSource: this.dataSource,
+                    xName: 'name',
+                    yName: 'y',
+                    startAngle: this.startAngle,
+                    endAngle: this.endAngle,
+                    radius: "70%",
+                    dataLabel: this.dataLabel,
+                    explode: true,
+                    explodeOffset: '10%',
+                    explodeIndex: 0,
+                    innerRadius: this.innerRadius,
                     palettes: this.palettes
                 }]
         }, this._elementRef.nativeElement);
@@ -9613,6 +9634,8 @@ class CubeChartComponent {
         };
         this.tooltip = {
             enable: true,
+            enableAnimation: false,
+            border: { width: 0 },
             textStyle: {
                 fontFamily: FONT_FAMILY
             }
@@ -9643,26 +9666,35 @@ class CubeChartComponent {
     set series(value) {
         if (value)
             this._series = isArray(value) ? value : [value];
+        else
+            this._series = null;
     }
     get indices() {
         return this._indices;
     }
     set indices(value) {
-        this._indices = isArray(value) ? value : [value];
+        if (value)
+            this._indices = isArray(value) ? value : [value];
+        else
+            this._indices = null;
     }
     ngOnInit() {
         if (this.chartType === 'Line' || this.chartType === 'Spline')
             this.crosshair.enable = true;
         this.primaryYAxis.labelFormat = this.currencyCode ? 'c0' : 'n0';
+        this.execute();
     }
     /**
      *
      */
     ngOnChanges(changes) {
-        if (changes['filters'])
+        if (changes['filters'] && !changes['filters'].firstChange)
             this.execute();
         else if (changes['height'])
-            this.chart && this.chart.chartResize();
+            this.resize();
+    }
+    resize() {
+        this.chart && this.chart.chartResize();
     }
     execute() {
         this.loadingChange.emit(true);
@@ -9774,7 +9806,7 @@ class CubeChartComponent {
 }
 CubeChartComponent.nextId = 0;
 CubeChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CubeChartComponent, deps: [{ token: CubeService }, { token: PromptService }, { token: TranslateService }, { token: SessionService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CubeChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeChartComponent, selector: "bizdoc-cube-chart", inputs: { width: "width", height: "height", cube: "cube", xAxis: "xAxis", series: "series", indices: "indices", filters: "filters", chartType: "chartType", indexChartType: "indexChartType", scope: "scope", currencyCode: "currencyCode", loading: "loading" }, outputs: { explore: "explore", loadingChange: "loadingChange" }, host: { attributes: { "dir": "ltr" }, properties: { "id": "this.id" }, classAttribute: "cube-view" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+CubeChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeChartComponent, selector: "bizdoc-cube-chart", inputs: { width: "width", height: "height", cube: "cube", xAxis: "xAxis", series: "series", indices: "indices", filters: "filters", yAxis: "yAxis", chartType: "chartType", indexChartType: "indexChartType", scope: "scope", currencyCode: "currencyCode", loading: "loading" }, outputs: { explore: "explore", loadingChange: "loadingChange" }, host: { attributes: { "dir": "ltr" }, properties: { "id": "this.id" }, classAttribute: "cube-view" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CubeChartComponent, decorators: [{
             type: Component,
             args: [{
@@ -9799,6 +9831,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                 type: Input
             }], filters: [{
                 type: Input
+            }], yAxis: [{
+                type: Input
             }], chartType: [{
                 type: Input
             }], indexChartType: [{
@@ -9834,9 +9868,20 @@ class CubeGridComponent {
         this._rows = [];
         this._columns = [];
     }
+    set xAxis(val) {
+        this._xAxis = isArray(val) ? val : [val];
+    }
+    set series(val) {
+        if (val)
+            this._series = isArray(val) ? val : [val];
+    }
+    set indices(val) {
+        if (val)
+            this._indices = isArray(val) ? val : [val];
+    }
     ngOnInit() {
-        const cube = this._session.profile.cubes.find(c => c.name === this.cube);
-        const x = cube.axes.find(a => a.name === this.xAxis[0]), y = cube.axes.find(a => a.name === this.series[0]);
+        this._cube = this.cube ? this._session.profile.cubes.find(c => c.name === this.cube) : this._session.profile.cubes[0];
+        const x = this._cube.axes.find(a => a.name === this._xAxis[0]), y = this._cube.axes.find(a => a.name === this._series[0]);
         const promises = [];
         // aquire columns source
         let observe = this._ds.all(x.dataType).
@@ -9876,17 +9921,18 @@ class CubeGridComponent {
         // prepare
         this._prepare =
             forkJoin(promises).toPromise();
+        this.execute();
     }
     /** */
     ngOnChanges(changes) {
-        if (changes['filters'])
+        if (changes['filters'] && !changes['filters'].firstChange)
             this.execute();
         else if (changes['height'])
             this.resize();
     }
     execute() {
         this.loadingChange.emit(true);
-        this._service.series(this.cube, this.xAxis, { series: this.series, filters: this.filters, indices: this.indices }).
+        this._service.series(this._cube.name, this._xAxis, { series: this._series, filters: this.filters, indices: this._indices }).
             subscribe(series => {
             this._prepare.then(() => {
                 const rows = [];
@@ -9957,9 +10003,9 @@ class CubeGridComponent {
         if (data[`_${column}`] === 0)
             return;
         const axes = {};
-        axes[this.xAxis[0]] = column;
+        axes[this._xAxis[0]] = column;
         if (type !== 'Index')
-            axes[this.series[0]] = row;
+            axes[this._series[0]] = row;
         this.explore.emit({ axes, index: type === 'Index' ? row : null });
     }
     customAggregate(_, column) {
@@ -9981,7 +10027,7 @@ class CubeGridComponent {
 }
 CubeGridComponent.nextId = 0;
 CubeGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CubeGridComponent, deps: [{ token: SessionService }, { token: PromptService }, { token: DatasourceService }, { token: CubeService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CubeGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeGridComponent, selector: "bizdoc-cube-grid", inputs: { width: "width", height: "height", cube: "cube", xAxis: "xAxis", yAxis: "yAxis", series: "series", indices: "indices", filters: "filters", currencyCode: "currencyCode", loading: "loading" }, outputs: { explore: "explore", loadingChange: "loadingChange" }, host: { properties: { "id": "this.id" }, classAttribute: "cube-view" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [".nowrap{white-space:nowrap;word-wrap:normal}::ng-deep .e-rowcell:not(.e-headertext){cursor:pointer}::ng-deep .e-grid td.e-cellselectionbackground{background-color:none}\n"] });
+CubeGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeGridComponent, selector: "bizdoc-cube-grid", inputs: { width: "width", height: "height", cube: "cube", xAxis: "xAxis", series: "series", indices: "indices", filters: "filters", currencyCode: "currencyCode", loading: "loading" }, outputs: { explore: "explore", loadingChange: "loadingChange" }, host: { properties: { "id": "this.id" }, classAttribute: "cube-view" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [".nowrap{white-space:nowrap;word-wrap:normal}::ng-deep .e-rowcell:not(.e-headertext){cursor:pointer}::ng-deep .e-grid td.e-cellselectionbackground{background-color:none}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CubeGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-cube-grid', template: '', host: {
@@ -9995,8 +10041,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                 type: Input
             }], xAxis: [{
                 type: Input
-            }], yAxis: [{
-                type: Input
             }], series: [{
                 type: Input
             }], indices: [{
@@ -10120,6 +10164,8 @@ class CubePivotComponent {
                     }
                 },
                 tooltip: {
+                    enableAnimation: false,
+                    border: { width: 0 },
                     textStyle: {
                         fontFamily: FONT_FAMILY
                     }
@@ -10165,6 +10211,7 @@ class CubePivotComponent {
                     currency: this.currencyCode,
                 });
             });
+        this.execute();
     }
     _getIndexTitle(name) {
         return this._cube.indices.find(i => i.name === name).title;
@@ -10177,7 +10224,7 @@ class CubePivotComponent {
      *
      */
     ngOnChanges(changes) {
-        if (changes['filters'])
+        if (changes['filters'] && !changes['filters'].firstChange)
             this.execute();
         else if (changes['height'] || changes['width'])
             this.resize();
@@ -10200,7 +10247,7 @@ class CubePivotComponent {
         // columns
         const columns = xAxis2.concat(series2);
         // query
-        this._service.table(this.cube, columns, { filters: this.filters, indices: this.indices }).subscribe(r => {
+        this._service.table(this._cube.name, columns, { filters: this.filters, indices: this.indices }).subscribe(r => {
             this._presets(xAxis2, series2, r);
             this._draw();
             this.loadingChange.emit(false);
@@ -10362,9 +10409,9 @@ class CubePivotComponent {
         }
     }
     ngOnDestroy() {
+        this.pivot && this.pivot.destroy();
         this._destroy.next();
         this._destroy.complete();
-        this.pivot && this.pivot.destroy();
     }
 }
 CubePivotComponent.nextId = 0;
@@ -10425,6 +10472,8 @@ class CubeSpreadsheetComponent {
         this.loadingChange = new EventEmitter();
         this.id = `cube-spreadsheet-${CubeSpreadsheetComponent.nextId++}`;
         this.dataSource = [];
+        this.numberStyle = { textAlign: 'right' };
+        this.autoFillSettings = { showFillOptions: false };
         this._yrows = [];
         this._xcolumns = [];
         this._intl = new Internationalization();
@@ -10448,7 +10497,7 @@ class CubeSpreadsheetComponent {
             maximumFractionDigits: this._service.fractionDigits,
             minimumFractionDigits: this._service.fractionDigits
         });
-        this._cube = this._session.profile.cubes.find(c => c.name === this.cube);
+        this._cube = this.cube ? this._session.profile.cubes.find(c => c.name === this.cube) : this._session.profile.cubes[0];
         if (!this._series) {
             this._axes = this._xAxis.map(c => this._cube.axes.find(a => a.name == c));
             if (this._indices)
@@ -10486,52 +10535,27 @@ class CubeSpreadsheetComponent {
             promises.push(observe);
             this._prepare = Promise.all(promises);
         }
+        this.execute();
     }
     ngOnChanges(changes) {
-        if (changes['filters'])
+        if (changes['filters'] && !changes['filters'].firstChange)
             this.execute();
         else if (changes['height'] || changes['width'])
-            if (this.spreadsheet) {
-                this.spreadsheet.height = this.height;
-                this.spreadsheet.width = this.width;
-                this.spreadsheet.resize();
-            }
+            this.resize();
+    }
+    resize() {
+        if (this.spreadsheet) {
+            this.spreadsheet.height = this.height;
+            this.spreadsheet.width = this.width;
+            this.spreadsheet.resize();
+        }
     }
     execute() {
         this.loadingChange.emit(true);
-        const numberStyle = { textAlign: 'right' };
         if (!this._series)
-            this._service.table(this.cube, this._xAxis, { filters: this.filters, indices: this._indices }).
+            this._service.table(this._cube.name, this._xAxis, { filters: this.filters, indices: this._indices }).
                 subscribe(data => {
-                const cells = [], style = { fontWeight: 'bold', textAlign: 'center' };
-                this._axes.forEach(c => cells.push({
-                    value: c.title, style
-                }));
-                this._indices && this._cindices.forEach(i => cells.push({ value: i.title, style }));
-                cells.push({
-                    value: this.yAxis ? this.yAxis.title : this._translate.get('Value'),
-                    style
-                });
-                this.dataSource = [{
-                        cells, height: 20
-                    }];
-                data.forEach(d => {
-                    const cells = [];
-                    this._xAxis.forEach(c => cells.push({
-                        value: d[c],
-                    }));
-                    this._indices && this._indices.forEach(i => cells.push({
-                        style: numberStyle,
-                        format: this._numberFormat,
-                        value: (d[i] || 0).toString(),
-                    }));
-                    cells.push({
-                        style: numberStyle,
-                        format: this._numberFormat,
-                        value: (d.value || 0).toString(),
-                    });
-                    this.dataSource.push({ cells, source: d, height: 20 });
-                });
+                this._datatable(data);
                 this._draw();
                 this.loadingChange.emit(false);
             }, (e) => {
@@ -10540,39 +10564,9 @@ class CubeSpreadsheetComponent {
             });
         else
             this._service.series(this.cube, this._xAxis, { series: this._series, filters: this.filters }).
-                subscribe(d => {
+                subscribe(data => {
                 this._prepare.then(() => {
-                    const style = { fontWeight: 'bold', textAlign: 'center' };
-                    const cells = [{ value: '' }];
-                    this._xcolumns.forEach(c => cells.push({ value: c.value, style }));
-                    this.dataSource = [{ cells, height: 20 }];
-                    this._indices && this._cube.indices.filter(i => this._indices.indexOf(i.name) > 0).
-                        forEach(i => {
-                        const cells = [{ value: i.title, style }], serie = d.find(s => s.index === i.name), map = {};
-                        if (serie) {
-                            serie.points.forEach(p => map[p.x] = p.y);
-                            this._xcolumns.forEach(c => cells.push({
-                                value: (map[c.key] || 0).toString(),
-                                format: this._numberFormat,
-                                style: numberStyle
-                            }));
-                            this.dataSource.push({ cells, height: 20 });
-                        }
-                    });
-                    this._yrows.forEach(r => {
-                        const cells = [{ value: r.value, style }], serie = d.find(s => s.name === r.key), map = {};
-                        if (serie) {
-                            serie.points.forEach(p => map[p.x] = p.y);
-                            this._xcolumns.forEach(c => cells.push({
-                                value: (map[c.key] || 0).toString(),
-                                format: this._numberFormat,
-                                style: numberStyle
-                            }));
-                        }
-                        else
-                            this._xcolumns.forEach(_ => cells.push({ value: '0' }));
-                        this.dataSource.push({ cells, height: 20 });
-                    });
+                    this._dataseries(data);
                     this._draw();
                     this.loadingChange.emit(false);
                 });
@@ -10581,6 +10575,70 @@ class CubeSpreadsheetComponent {
                 this.loadingChange.emit(false);
             });
     }
+    _datatable(data) {
+        const cells = [], style = { fontWeight: 'bold', textAlign: 'center' };
+        this._axes.forEach(c => cells.push({
+            value: c.title, style
+        }));
+        this._indices && this._cindices.forEach(i => cells.push({ value: i.title, style }));
+        cells.push({
+            value: this.yAxis ? this.yAxis.title : this._translate.get('Value'),
+            style
+        });
+        this.dataSource = [{
+                cells, height: 25
+            }];
+        data.forEach(d => {
+            const cells = [];
+            this._xAxis.forEach(c => cells.push({
+                value: d[c],
+            }));
+            this._indices && this._indices.forEach(i => cells.push({
+                style: this.numberStyle,
+                format: this._numberFormat,
+                value: (d[i] || 0).toString(),
+            }));
+            cells.push({
+                style: this.numberStyle,
+                format: this._numberFormat,
+                value: (d.value || 0).toString(),
+            });
+            this.dataSource.push({ cells, source: d, height: 25 });
+        });
+    }
+    _dataseries(d) {
+        const style = { fontWeight: 'bold', textAlign: 'center' };
+        const cells = [{ value: '' }];
+        this._xcolumns.forEach(c => cells.push({ value: c.value, style }));
+        this.dataSource = [{ cells, height: 25 }];
+        this._indices && this._cindices.
+            forEach(i => {
+            const cells = [{ value: i.title, style }], serie = d.find(s => s.index === i.name), map = {};
+            if (serie) {
+                serie.points.forEach(p => map[p.x] = p.y);
+                this._xcolumns.forEach(c => cells.push({
+                    value: (map[c.key] || 0).toString(),
+                    format: this._numberFormat,
+                    style: this.numberStyle
+                }));
+                this.dataSource.push({ cells, height: 25 });
+            }
+        });
+        this._yrows.forEach(r => {
+            const cells = [{ value: r.value, style }], serie = d.find(s => s.name === r.key), map = {};
+            if (serie) {
+                serie.points.forEach(p => map[p.x] = p.y);
+                this._xcolumns.forEach(c => cells.push({
+                    value: (map[c.key] || 0).toString(),
+                    format: this._numberFormat,
+                    style: this.numberStyle
+                }));
+            }
+            else
+                this._xcolumns.forEach(_ => cells.push({ value: '0' }));
+            this.dataSource.push({ cells, height: 25 });
+        });
+    }
     _draw() {
         this.spreadsheet && this.spreadsheet.destroy();
         this.spreadsheet = new Spreadsheet({
@@ -10589,19 +10647,13 @@ class CubeSpreadsheetComponent {
             allowDelete: false,
             allowInsert: false,
             allowSorting: true,
-            //allowSave: false,
             showRibbon: false,
             allowAutoFill: false,
-            autoFillSettings: { showFillOptions: false },
-            //enableClipboard: true,
-            //allowChart: false,
-            //allowFiltering: false,
-            //allowDataValidation: false,
-            //allowFindAndReplace: false,
+            autoFillSettings: this.autoFillSettings,
+            enableClipboard: true,
             enableContextMenu: false,
             showFormulaBar: false,
             showSheetTabs: false,
-            //scrollSettings: { isFinite: true },
             select: this.select.bind(this),
             sheets: [{
                     columns: this.columns,
@@ -10635,8 +10687,10 @@ class CubeSpreadsheetComponent {
                     const key = this.dataSource[i].source['_' + a.name];
                     if (!axes[a.name])
                         axes[a.name] = key;
-                    else if (isString(axes[a.name]))
-                        axes[a.name] = [axes[a.name], key];
+                    else if (isString(axes[a.name])) {
+                        if (axes[a.name] !== key)
+                            axes[a.name] = [axes[a.name], key];
+                    }
                     else if (axes[a.name].indexOf(key) < 0)
                         axes[a.name].push(key);
                 });
@@ -10646,18 +10700,14 @@ class CubeSpreadsheetComponent {
         }
         else {
             if (y === 0) {
-                if (y < y1) {
-                    const { key } = this._xcolumns[x - 1], xName = this._xAxis[0];
-                    axes[xName] = key;
-                }
+                if (y < y1)
+                    this._fillx(x, x1, axes);
                 else
                     return;
             }
             else if (x === 0) {
-                if (x < x1) {
-                    const { key } = this._yrows[y - 1], yName = this._series[0];
-                    axes[yName] = key;
-                }
+                if (x < x1)
+                    this._filly(y, y1, axes);
                 else
                     return;
             }
@@ -10666,34 +10716,41 @@ class CubeSpreadsheetComponent {
             else if (y > this.dataSource.length - 1 || x > this.dataSource[y].cells.length - 1)
                 return;
             else {
-                const xName = this._xAxis[0], yName = this._series[0];
-                let i = y - 1, j = x - 1;
-                while (j < x1) {
-                    let { key } = this._xcolumns[j];
-                    if (!axes[xName])
-                        axes[xName] = key;
-                    else if (isString(axes[xName]))
-                        axes[xName] = [axes[xName], key];
-                    else if (axes[xName].indexOf(key) < 0)
-                        axes[xName].push(key);
-                    j++;
-                }
-                while (i < y1) {
-                    let { key } = this._yrows[i];
-                    if (!axes[yName])
-                        axes[yName] = key;
-                    else if (isString(axes[yName]))
-                        axes[yName] = [axes[yName], key];
-                    else if (axes[yName].indexOf(key) < 0)
-                        axes[yName].push(key);
-                    i++;
-                }
+                this._fillx(x, x1, axes);
+                this._filly(y, y1, axes);
             }
             this.explore.emit({ axes });
         }
     }
+    _filly(y, y1, axes) {
+        const yName = this._series[0];
+        let i = y - 1;
+        while (i < y1) {
+            let { key } = this._yrows[i];
+            if (!axes[yName])
+                axes[yName] = key;
+            else if (isString(axes[yName]))
+                axes[yName] = [axes[yName], key];
+            else if (axes[yName].indexOf(key) < 0)
+                axes[yName].push(key);
+            i++;
+        }
+    }
+    _fillx(x, x1, axes) {
+        const xName = this._xAxis[0];
+        let i = x - 1;
+        while (i < x1) {
+            let { key } = this._xcolumns[i];
+            if (!axes[xName])
+                axes[xName] = key;
+            else if (isString(axes[xName]))
+                axes[xName] = [axes[xName], key];
+            else if (axes[xName].indexOf(key) < 0)
+                axes[xName].push(key);
+            i++;
+        }
+    }
     exportToExcel(title) {
-        //this.spreadsheet.save({ saveType: 'Xlsx', fileName: `${title}.xlsx`})
         const wb = XLSX.utils.book_new();
         const rows = this.spreadsheet.sheets[0].rows.map(r => r.cells.map(c => c.value));
         const ws = XLSX.utils.aoa_to_sheet(rows);
@@ -10708,16 +10765,12 @@ class CubeSpreadsheetComponent {
 }
 CubeSpreadsheetComponent.nextId = 0;
 CubeSpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CubeSpreadsheetComponent, deps: [{ token: SessionService }, { token: PromptService }, { token: CubeService }, { token: TranslateService }, { token: DatasourceService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CubeSpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeSpreadsheetComponent, selector: "bizdoc-cube-spreadsheet", inputs: { width: "width", height: "height", cube: "cube", xAxis: "xAxis", yAxis: "yAxis", series: "series", indices: "indices", filters: "filters", currencyCode: "currencyCode", loading: "loading" }, outputs: { explore: "explore", loadingChange: "loadingChange" }, host: { properties: { "id": "this.id" }, classAttribute: "cube-view" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: ["::ng-deep .e-spreadsheet .e-dragfill-ddb{display:none!important}\n"] });
+CubeSpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeSpreadsheetComponent, selector: "bizdoc-cube-spreadsheet", inputs: { width: "width", height: "height", cube: "cube", xAxis: "xAxis", yAxis: "yAxis", series: "series", indices: "indices", filters: "filters", currencyCode: "currencyCode", loading: "loading" }, outputs: { explore: "explore", loadingChange: "loadingChange" }, host: { properties: { "id": "this.id" }, classAttribute: "cube-view" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CubeSpreadsheetComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bizdoc-cube-spreadsheet',
                     template: '',
-                    styles: [`::ng-deep .e-spreadsheet .e-dragfill-ddb {
-  display: none !important;
-}
-`],
                     host: {
                         class: 'cube-view'
                     }
@@ -10776,13 +10829,11 @@ class CubeViewComponent {
             this._instance.ngOnChanges({ 'height': {}, 'width': {} });
         });
     }
+    ngAfterViewInit() {
+        setTimeout(this._createView.bind(this));
+    }
     ngOnChanges(changes) {
-        if (changes['view']) {
-            // dom
-            setTimeout(this._createView.bind(this));
-        }
-        else if (changes['axes'])
-            this.refresh();
+        changes['axes'] && !changes['axes'].firstChange && this.refresh();
     }
     _createView() {
         this._viewDestroy.next();
@@ -10806,7 +10857,6 @@ class CubeViewComponent {
                     comp.width = `${dim.width - 4}px`;
                     comp.series = this.view.series;
                     comp.indices = this.view.indices;
-                    comp.yAxis = this.cube.yAxis;
                     break;
                 }
             case 'Spreadsheet':
@@ -10834,15 +10884,15 @@ class CubeViewComponent {
                     default:
                         {
                             let comp = this._attach(CubeChartComponent);
-                            comp.height = `${dim.height}px`;
+                            //comp.height = `${dim.height}px`;
                             comp.chartType = this.view.chartType;
                             comp.series = this.view.series;
                             comp.indices = this.view.indices;
+                            comp.yAxis = this.cube.yAxis;
                             comp.indexChartType = this.view.indexChartType;
                         }
                 }
         }
-        this.refresh();
     }
     _attach(comp) {
         const factory = this._factoryResolver.resolveComponentFactory(comp);
@@ -10860,6 +10910,7 @@ class CubeViewComponent {
         instance.cube = this.cube.name;
         instance.xAxis = this.view.xAxis;
         instance.currencyCode = this.cube.currencyCode;
+        instance.filters = { ...this.view.filters, ...this.axes };
         instance.loadingChange.pipe(takeUntil(this._viewDestroy), debounceTime(150)).subscribe(e => this.loadingChange.emit(this.loading = e));
         return instance;
     }
@@ -10875,7 +10926,7 @@ class CubeViewComponent {
     }
     refresh() {
         this._instance.filters = { ...this.view.filters, ...this.axes };
-        this._instance.ngOnChanges({ 'filters': {} });
+        this._instance.execute();
     }
     exportToExcel() {
         this._instance.exportToExcel(this.view.title);
@@ -11050,12 +11101,12 @@ class CubeViewPaneComponent extends ViewBase {
     }
 }
 CubeViewPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", 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.0.2", 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\">filter_alt</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>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-filter-tags [(filters)]=\"axes\" [cube]=\"cube\"></bizdoc-filter-tags>-->\r\n<bizdoc-cube-view [axes]=\"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%;min-width:650px}:host ::ng-deep .cube-view{flex:1 auto}\n"], components: [{ type: i7$4.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: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: CubeViewComponent, selector: "bizdoc-cube-view", inputs: ["axes", "cube", "view", "loading"], outputs: ["explore", "loadingChange"] }], directives: [{ type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": TranslatePipe } });
+CubeViewPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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\">filter_alt</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>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-filter-tags [(filters)]=\"axes\" [cube]=\"cube\"></bizdoc-filter-tags>-->\r\n<bizdoc-cube-view [axes]=\"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$4.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: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: CubeViewComponent, selector: "bizdoc-cube-view", inputs: ["axes", "cube", "view", "loading"], outputs: ["explore", "loadingChange"] }], directives: [{ type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: MatIconAnimate, selector: "[matAnimate]" }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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\">filter_alt</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>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-filter-tags [(filters)]=\"axes\" [cube]=\"cube\"></bizdoc-filter-tags>-->\r\n<bizdoc-cube-view [axes]=\"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%;min-width:650px}: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\">filter_alt</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>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-filter-tags [(filters)]=\"axes\" [cube]=\"cube\"></bizdoc-filter-tags>-->\r\n<bizdoc-cube-view [axes]=\"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 }]
@@ -12043,7 +12094,8 @@ class WorkflowComponent {
                     nodes, connectors
                 },
                 policy: OpenPolicy.Tab,
-                expandable: false
+                expandable: false,
+                group: ''
             }).then(p => {
                 p.instance.change.
                     pipe(takeUntil(this._destroy)).subscribe(() => {
@@ -13329,17 +13381,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
 /** component*/
 class VersionCompareComponent {
     /** ctor */
-    constructor(_session, _cf, _container, _router, _injector) {
+    constructor(_session, _cf, _container, _injector) {
         this._session = _session;
         this._cf = _cf;
         this._container = _container;
-        this._router = _router;
         this._injector = _injector;
     }
     get form() { return this._form; }
     get currentVersion() { return this._currentVersion; }
     get baseVersion() { return this._baseVersion; }
-    ngOnChanges(changes) {
+    ngOnChanges(_) {
         this._form = this._session.profile.forms.find(f => f.name === this.model.formId);
         const log = this.model.log.find(l => l.type === 'ModelChange' && l.time === this.version);
         const idx = this.model.log.indexOf(log);
@@ -13349,7 +13400,7 @@ class VersionCompareComponent {
         const componentFactory = this._cf.resolve(this._form.template);
         const injector = Injector.create([
             { provide: VersionCompareComponent, useValue: this },
-            { provide: FormRef, useValue: new FormRef(this._router) },
+            { provide: FormRef, useValue: new FormRef() },
             { provide: DOCUMENT_MODEL, useValue: this.model }
         ], this._injector);
         this._container.clear();
@@ -13360,7 +13411,7 @@ class VersionCompareComponent {
         instance.onBind(newModel, this._baseVersion);
     }
 }
-VersionCompareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: VersionCompareComponent, deps: [{ token: SessionService }, { token: BizDocComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: PanesRouter }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+VersionCompareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: VersionCompareComponent, deps: [{ token: SessionService }, { token: BizDocComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 VersionCompareComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: VersionCompareComponent, selector: "bizdoc-version-compare", inputs: { model: "model", version: "version" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: VersionCompareComponent, decorators: [{
             type: Component,
@@ -13368,7 +13419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                     selector: 'bizdoc-version-compare',
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: BizDocComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: PanesRouter }, { type: i0.Injector }]; }, propDecorators: { model: [{
+        }], ctorParameters: function () { return [{ type: SessionService }, { type: BizDocComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { model: [{
                 type: Input
             }], version: [{
                 type: Input
@@ -15542,16 +15593,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: SessionService }, { type: TranslateService }, { type: PaneRef }]; } });
 
 class DocumentInfoComponent {
-    constructor(_session, _cf, _router, _injector) {
+    constructor(_session, _cf, _injector) {
         this._session = _session;
         this._cf = _cf;
-        this._router = _router;
         this._injector = _injector;
     }
-    ngOnChanges(changes) {
+    ngOnChanges(_) {
         const form = this._session.profile.forms.find(f => f.name === this.model.formId);
         this._formRef && this._formRef._destroy();
-        this._formRef = new FormRef(this._router);
+        this._formRef = new FormRef();
         const factory = this._cf.resolve(form.template);
         const injector = Injector.create([{
                 provide: DOCUMENT_MODEL, useValue: this.model
@@ -15567,12 +15617,12 @@ class DocumentInfoComponent {
         this._formRef._destroy();
     }
 }
-DocumentInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DocumentInfoComponent, deps: [{ token: SessionService }, { token: BizDocComponentFactoryResolver }, { token: RouterImpl }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DocumentInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DocumentInfoComponent, deps: [{ token: SessionService }, { token: BizDocComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 DocumentInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: DocumentInfoComponent, selector: "bizdoc-document", inputs: { model: "model" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["component"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header\">\r\n  <bizdoc-people [model]=\"model\"></bizdoc-people>\r\n  <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"false\" [viewedIndicator]=\"true\"></bizdoc-attachments>\r\n</div>\r\n<ng-container #component></ng-container>\r\n", components: [{ type: PeopleComponent, selector: "bizdoc-people", inputs: ["model"] }, { type: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DocumentInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-document', template: "<div class=\"form-header\">\r\n  <bizdoc-people [model]=\"model\"></bizdoc-people>\r\n  <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"false\" [viewedIndicator]=\"true\"></bizdoc-attachments>\r\n</div>\r\n<ng-container #component></ng-container>\r\n" }]
-        }], ctorParameters: function () { return [{ type: SessionService }, { type: BizDocComponentFactoryResolver }, { type: RouterImpl }, { type: i0.Injector }]; }, propDecorators: { _container: [{
+        }], ctorParameters: function () { return [{ type: SessionService }, { type: BizDocComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { _container: [{
                 type: ViewChild,
                 args: ['component', { read: ViewContainerRef, static: true }]
             }], model: [{
@@ -16286,10 +16336,10 @@ class ComposeMenuComponent {
     }
 }
 ComposeMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ComposeMenuComponent, deps: [{ token: SessionService }, { token: MailboxService }, { token: PromptService }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component });
-ComposeMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: ComposeMenuComponent, selector: "bizdoc-new-menu", outputs: { change: "change" }, ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"working ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"container\">\r\n  <span class=\"mat-subheader\">BizDoc</span>\r\n  <h1 class=\"mat-display-1\">{{'New'|translate}}</h1>\r\n\r\n  <mat-nav-list>\r\n    <mat-list-item *ngFor=\"let f of forms\" (click)=\"create(f.name)\" [attr.data-help]=\"f.name + '-form'\">\r\n      <mat-icon matListIcon>{{f.icon}}</mat-icon>\r\n      <span matLine>{{f.title}}</span>\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n\r\n  <!--<hr />\r\n\r\n  <form>\r\n    <mat-form-field floatLabel=\"never\" data-help=\"copy\">\r\n      <input matInput type=\"search\" [placeholder]=\"'Copy'|translate\" [formControl]=\"search\" autocomplete=\"off\" />\r\n      <mat-icon class=\"mat-icon-rtl-mirror\" matSuffix aria-disabled=\"true\">search</mat-icon>\r\n    </mat-form-field>\r\n    <ul class=\"mat-body-2\">\r\n      <li *ngFor=\"let i of items | async\" (click)=\"copy(i)\">\r\n        <a>\r\n          {{i.number}}\r\n          <ng-container *ngIf=\"i.subject\">&nbsp;{{i.subject}}</ng-container>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n  </form>-->\r\n</div>\r\n", styles: ["h1{margin:0 16px}form{padding:8px}hr{opacity:.4}\n"], components: [{ type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i6$1.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "translate": TranslatePipe }, animations: [] });
+ComposeMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: ComposeMenuComponent, selector: "bizdoc-new-menu", outputs: { change: "change" }, ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"working ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"container\">\r\n  <span class=\"mat-subheader\">BizDoc</span>\r\n  <h1 class=\"mat-display-1\">{{'New'|translate}}</h1>\r\n\r\n  <mat-nav-list>\r\n    <mat-list-item *ngFor=\"let f of forms\" (click)=\"create(f.name)\" [attr.data-help]=\"f.name + '-form'\">\r\n      <mat-icon matListIcon>{{f.icon}}</mat-icon>\r\n      <span matLine>{{f.title}}</span>\r\n      <!--<mat-spinner radius=\"25\" *ngIf=\"creating===f.name\"></mat-spinner>-->\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: ["h1{margin:0 16px}form{padding:8px}hr{opacity:.4}\n"], components: [{ type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i6$1.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "translate": TranslatePipe }, animations: [] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ComposeMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-new-menu', animations: [], template: "<mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"working ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"container\">\r\n  <span class=\"mat-subheader\">BizDoc</span>\r\n  <h1 class=\"mat-display-1\">{{'New'|translate}}</h1>\r\n\r\n  <mat-nav-list>\r\n    <mat-list-item *ngFor=\"let f of forms\" (click)=\"create(f.name)\" [attr.data-help]=\"f.name + '-form'\">\r\n      <mat-icon matListIcon>{{f.icon}}</mat-icon>\r\n      <span matLine>{{f.title}}</span>\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n\r\n  <!--<hr />\r\n\r\n  <form>\r\n    <mat-form-field floatLabel=\"never\" data-help=\"copy\">\r\n      <input matInput type=\"search\" [placeholder]=\"'Copy'|translate\" [formControl]=\"search\" autocomplete=\"off\" />\r\n      <mat-icon class=\"mat-icon-rtl-mirror\" matSuffix aria-disabled=\"true\">search</mat-icon>\r\n    </mat-form-field>\r\n    <ul class=\"mat-body-2\">\r\n      <li *ngFor=\"let i of items | async\" (click)=\"copy(i)\">\r\n        <a>\r\n          {{i.number}}\r\n          <ng-container *ngIf=\"i.subject\">&nbsp;{{i.subject}}</ng-container>\r\n        </a>\r\n      </li>\r\n    </ul>\r\n  </form>-->\r\n</div>\r\n", styles: ["h1{margin:0 16px}form{padding:8px}hr{opacity:.4}\n"] }]
+            args: [{ selector: 'bizdoc-new-menu', animations: [], template: "<mat-progress-bar mode=\"indeterminate\" [style.visibility]=\"working ? 'visible':'hidden'\"></mat-progress-bar>\r\n<div class=\"container\">\r\n  <span class=\"mat-subheader\">BizDoc</span>\r\n  <h1 class=\"mat-display-1\">{{'New'|translate}}</h1>\r\n\r\n  <mat-nav-list>\r\n    <mat-list-item *ngFor=\"let f of forms\" (click)=\"create(f.name)\" [attr.data-help]=\"f.name + '-form'\">\r\n      <mat-icon matListIcon>{{f.icon}}</mat-icon>\r\n      <span matLine>{{f.title}}</span>\r\n      <!--<mat-spinner radius=\"25\" *ngIf=\"creating===f.name\"></mat-spinner>-->\r\n    </mat-list-item>\r\n  </mat-nav-list>\r\n</div>\r\n", styles: ["h1{margin:0 16px}form{padding:8px}hr{opacity:.4}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: MailboxService }, { type: PromptService }, { type: PanesRouter }]; }, propDecorators: { change: [{
                 type: Output
             }] } });
@@ -16368,7 +16418,7 @@ class FoldersMenuComponent {
             //folder.group;
             return true;
         };
-        this.folders = this._session.profile.folders;
+        this.folders = this._session.profile.folders.filter(f => f.name !== 'fav');
     }
     /**
      * Mail drop
@@ -16524,11 +16574,14 @@ class SearchService {
                 if (u.title.toLowerCase().indexOf(val) > -1)
                     xs.push({ path: `admin/utilities/${u.name}`, title: u.title, section: this._translate.get('Utilities'), icon: u.icon });
             });
+            profile.options.tags &&
+                profile.options.tags.forEach(t => {
+                    if (t.toLowerCase().indexOf(val) > -1)
+                        xs.push({ path: `mailbox/f?tag=${t}`, title: t, section: this._translate.get('Tags'), icon: 'bookmark' });
+                });
             //profile.contacts.forEach()
-            //if (this._guide.guides) this._guide.guides.forEach(g => {
-            //  if (g.mode !== 'Private' && (g.title.toLowerCase().indexOf(value) > -1 ||
-            //    g.steps.some(s => (s.title && s.title.toLowerCase().indexOf(value) > -1) ||
-            //      s.content.toLowerCase().indexOf(value) > -1)))
+            //this._guide.guides.forEach(g => {
+            //  if (g.mode !== 'Private' && g.title.toLowerCase().indexOf(value) > -1)
             //    xs.push({ fn: this._guide.start, args: [g.name], title: g.title, section: this._translate.get('Guides'), icon: 'help' })
             //});
             this._mailbox.senders(value).subscribe(r => r.forEach(s => xs.push({ path: `mailbox/f/ib?senderId=${s.id}`, title: s.name, section: this._translate.get('Senders'), icon: 'recent_actors' })));
@@ -16734,7 +16787,7 @@ class SlotsComponent {
                                 return;
                             }
                             else {
-                                this._navQueryParams(tab, queryParams, state);
+                                this._navQueryParams(tab, queryParams);
                                 this.group = tab.group;
                                 this.selectedTabIndex = i;
                                 this._cd.detectChanges();
@@ -16766,7 +16819,7 @@ class SlotsComponent {
                                 return;
                             }
                             else {
-                                this._navQueryParams(pane, queryParams, state);
+                                this._navQueryParams(pane, queryParams);
                                 this.scrollTo(i);
                                 this._replaceUrl();
                                 return;
@@ -16820,7 +16873,7 @@ class SlotsComponent {
                 else {
                     const pane = (policy & OpenPolicy.Tab) == OpenPolicy.Tab ?
                         this.tabs[this.selectedTabIndex] : this.panes[this.selectedIndex];
-                    this._navQueryParams(pane, queryParams, state);
+                    this._navQueryParams(pane, queryParams);
                     this._replaceUrl();
                     if ((policy & OpenPolicy.Tab) != OpenPolicy.Tab)
                         this.select(this.selectedIndex);
@@ -16947,7 +17000,7 @@ class SlotsComponent {
                 }
                 else {
                     const queryParams = this._parseQueryParams(queryString);
-                    this._navQueryParams(pane, queryParams, state);
+                    this._navQueryParams(pane, queryParams);
                     return;
                 }
             }
@@ -16985,7 +17038,7 @@ class SlotsComponent {
                 }
                 else {
                     const queryParams = this._parseQueryParams(queryString);
-                    this._navQueryParams(tab, queryParams, state);
+                    this._navQueryParams(tab, queryParams);
                     return;
                 }
             }
@@ -17022,11 +17075,9 @@ class SlotsComponent {
      *
      * @param pane
      * @param queryParams
-     * @param data
      */
-    _navQueryParams(pane, queryParams, data) {
+    _navQueryParams(pane, queryParams) {
         pane._queryString = this._queryString(queryParams);
-        pane._data$.next({ ...pane.data, ...data });
         pane._queryParams$.next(queryParams);
         this._router._events$.next(new QueryParamNavigation(queryParams, pane));
     }
@@ -17503,15 +17554,15 @@ class SlotsComponent {
         this.navigationArrows();
         this._resize();
     }
-    navigationArrows(evt) {
-        const container = this._panesContainerRef.element.nativeElement;
-        this.next = this._rtl ? container.clientWidth - container.scrollLeft < container.scrollWidth :
-            container.scrollLeft + container.clientWidth < container.scrollWidth;
-        this.prev = this._rtl ? container.scrollLeft < 0 : container.scrollLeft > 0;
+    navigationArrows(_) {
+        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;
+        this.prev = this._rtl ? scrollLeft < 0 : scrollLeft > 0;
     }
     scrollBy(n) {
-        const { nativeElement } = this._panesContainerRef.element;
-        nativeElement.scrollBy({ behavior: 'smooth', left: n * (this._rtl ? -1 : 1) });
+        const left = n * (this._rtl ? -1 : 1);
+        this._panesContainerRef.element.nativeElement.scrollBy({ behavior: 'smooth', left });
     }
     focus(index) {
         const el = this._children.item(index);
@@ -18089,13 +18140,13 @@ const PANES_CONFIG = [{
                     {
                         path: 'views',
                         component: DocumentViewPaneComponent,
-                        policy: OpenPolicy.Tab | OpenPolicy.Expandable
+                        policy: OpenPolicy.Tab
                     },
                     {
                         path: 'comments',
                         icon: 'format_quote',
                         component: CommentsPaneComponent,
-                        policy: OpenPolicy.Scope | OpenPolicy.Pinnable | OpenPolicy.Tab,
+                        policy: OpenPolicy.Scope | OpenPolicy.Tab,
                         children: [{
                                 path: ':commentId/versions',
                                 icon: 'history',
@@ -18123,7 +18174,7 @@ const PANES_CONFIG = [{
             }, {
                 path: 'd/:id',
                 component: DocumentInfoPaneComponent,
-                policy: OpenPolicy.Tab | OpenPolicy.Expandable,
+                policy: OpenPolicy.Tab,
                 resolve: {
                     item: DocumentResolver
                 },
@@ -18153,7 +18204,7 @@ const PANES_CONFIG = [{
                 path: ':cube/v/:view',
                 icon: 'bar_chart',
                 component: CubeViewPaneComponent,
-                policy: OpenPolicy.Clear | OpenPolicy.Expandable
+                policy: OpenPolicy.Clear
             }, {
                 path: ':cube/explore',
                 icon: 'summarize',
@@ -18162,7 +18213,7 @@ const PANES_CONFIG = [{
                 children: [{
                         path: 'i/:template/:key',
                         component: ExploreItemPaneComponent,
-                        policy: OpenPolicy.Pinnable | OpenPolicy.Tab,
+                        policy: OpenPolicy.Tab,
                         resolve: { item: ItemResolver }
                     }]
             },
@@ -18170,7 +18221,7 @@ const PANES_CONFIG = [{
                 path: ':cube/i/:xAxis/:serie',
                 icon: 'bar_chart',
                 component: CubeMatrixPaneComponent,
-                policy: OpenPolicy.Pinnable | OpenPolicy.Tab | OpenPolicy.Expandable
+                policy: OpenPolicy.Tab
             }]
     }, {
         path: 'reports',
@@ -18222,7 +18273,7 @@ const PANES_CONFIG = [{
         path: 'chatroom/:id',
         icon: 'person',
         component: ConversationPaneComponent,
-        policy: OpenPolicy.Tab | OpenPolicy.Expandable,
+        policy: OpenPolicy.Tab
     }
 ];
 
@@ -18818,7 +18869,7 @@ const ROUTES = [
 class SyncfusionChartModule {
 }
 SyncfusionChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SyncfusionChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SyncfusionChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SyncfusionChartModule, imports: [ChartModule, AccumulationChartAllModule, BulletChartAllModule], exports: [ChartModule, AccumulationChartAllModule, BulletChartAllModule] });
+SyncfusionChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SyncfusionChartModule, imports: [ChartModule, AccumulationChartAllModule, SparklineAllModule], exports: [ChartModule, AccumulationChartAllModule, SparklineAllModule] });
 SyncfusionChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SyncfusionChartModule, providers: [LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService,
         SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService,
         StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService,
@@ -18828,12 +18879,12 @@ SyncfusionChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService,
         MultiLevelLabelService, ParetoSeriesService, TooltipRenderService,
         ExportService,
-        AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService], imports: [[ChartModule, AccumulationChartAllModule, BulletChartAllModule], ChartModule, AccumulationChartAllModule, BulletChartAllModule] });
+        AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService], imports: [[ChartModule, AccumulationChartAllModule, SparklineAllModule], ChartModule, AccumulationChartAllModule, SparklineAllModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SyncfusionChartModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [ChartModule, AccumulationChartAllModule, BulletChartAllModule],
-                    exports: [ChartModule, AccumulationChartAllModule, BulletChartAllModule],
+                    imports: [ChartModule, AccumulationChartAllModule, SparklineAllModule],
+                    exports: [ChartModule, AccumulationChartAllModule, SparklineAllModule],
                     providers: [LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService,
                         SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService,
                         StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService,
@@ -18973,6 +19024,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                 }]
         }] });
 
+class SyncfusionGanttModule {
+}
+SyncfusionGanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SyncfusionGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SyncfusionGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SyncfusionGanttModule, imports: [GanttModule], exports: [GanttModule] });
+SyncfusionGanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SyncfusionGanttModule, providers: [], imports: [[GanttModule], GanttModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: SyncfusionGanttModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [GanttModule],
+                    exports: [GanttModule],
+                    providers: []
+                }]
+        }] });
+
 let AssignActionComponent = class AssignActionComponent {
     constructor(_fb, _session, _accounts) {
         this._fb = _fb;
@@ -19581,7 +19646,7 @@ class CubeAccumAnalysisWidget extends CubeAnalysisBase {
             visible: true,
             position: 'Outside',
             connectorStyle: { length: '10%' },
-            name: 'x',
+            name: 'name',
             font: {
                 size: '14px',
                 fontFamily: FONT_FAMILY,
@@ -19727,6 +19792,7 @@ class CubeChartAnalysisWidget extends CubeAnalysisBase {
         };
         this.tooltip = {
             enable: true,
+            enableAnimation: false,
             shared: false,
             textStyle: {
                 fontFamily: FONT_FAMILY
@@ -23387,8 +23453,8 @@ let CubeDocumentMatrixComponent = class CubeDocumentMatrixComponent extends Cube
         const { xAxis, serie, indices, sum, scope, filters } = this._viewRef.options;
         if (!xAxis || !serie)
             throw 'xAxis and serie required';
-        this.xAxis = xAxis;
-        this.serie = serie;
+        this.xAxis = isArray(xAxis) ? xAxis[0] : xAxis;
+        this.serie = isArray(serie) ? serie[0] : serie;
         this.indices = indices;
         this.sum = sum;
         this.scope = scope;
@@ -23435,7 +23501,7 @@ let CubeDocumentMatrixComponent = class CubeDocumentMatrixComponent extends Cube
     }
 };
 CubeDocumentMatrixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CubeDocumentMatrixComponent, deps: [{ token: DocumentViewRef }, { token: RouterImpl }, { token: CubeService }, { token: DatasourceService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
-CubeDocumentMatrixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeDocumentMatrixComponent, selector: "ng-component", host: { classAttribute: "view" }, viewQueries: [{ propertyName: "table", first: true, predicate: CubeMatrixComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hasdata; else none\">\r\n  <div class=\"nav-toolbar\">\r\n    <ng-container *ngIf=\"alternate\">\r\n      <button mat-button [matMenuTriggerFor]=\"cmenu\">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #cmenu>\r\n        <button mat-menu-item *ngFor=\"let a of alternate\"\r\n                (click)=\"switchTo(a)\">\r\n          {{a.title}}\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <span class=\"divider\"></span>\r\n    <!-- title -->\r\n    <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"patterns && patterns.length\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\r\n    <mat-menu #options xPosition=\"before\">\r\n      <!-- patterns -->\r\n      <button mat-menu-item *ngFor=\"let p of patterns\" (click)=\"patternChange(p)\">{{p.title}}</button>\r\n    </mat-menu>\r\n    <button mat-icon-button (click)=\"reset()\" [disabled]=\"!pattern\" [bizdocTooltip]=\"'Clear' | translate\">\r\n      <mat-icon>clear_all</mat-icon>\r\n    </button>\r\n    <!-- filters -->\r\n    <ng-container *ngFor=\"let f of filters\">\r\n      <button mat-button [matMenuTriggerFor]=\"fmenu\">{{axes[f.name] | typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #fmenu xPosition=\"before\">\r\n        <button mat-menu-item *ngFor=\"let kv of sources[f.name] | async\"\r\n                (click)=\"filter(f.name, kv.key, kv.value)\">\r\n          {{kv.value}}\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"loading-view\" *ngIf=\"loading\">\r\n    <mat-spinner color=\"accent\"></mat-spinner>\r\n  </div>\r\n  <bizdoc-cube-matrix [cube]=\"cube.name\" [xAxis]=\"xAxis\" [serie]=\"serie\" [indices]=\"indices\" [sum]=sum\r\n                          [axes]=\"axes\" [scope]=\"scope\" class=\"table\"\r\n                          (explore)='explore($event)' [(loading)]=\"loading\"></bizdoc-cube-matrix>\r\n</ng-container>\r\n<ng-template #none>\r\n  <bizdoc-none icon=\"insert_chart_outlined\" subtitle=\"NothingHere\"></bizdoc-none>\r\n</ng-template>\r\n", styles: [".table{padding:0 8px}\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: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i10.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: ["cube", "xAxis", "serie", "indices", "scope", "sum", "axes", "loading", "interactive"], outputs: ["explore", "loadingChange"] }, { type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }], directives: [{ type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }], pipes: { "translate": TranslatePipe, "async": i10$1.AsyncPipe, "typeValue": TypeValuePipe } });
+CubeDocumentMatrixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeDocumentMatrixComponent, selector: "ng-component", host: { classAttribute: "view" }, viewQueries: [{ propertyName: "table", first: true, predicate: CubeMatrixComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hasdata; else none\">\r\n  <div class=\"nav-toolbar\">\r\n    <ng-container *ngIf=\"alternate\">\r\n      <button mat-button [matMenuTriggerFor]=\"cmenu\">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #cmenu>\r\n        <button mat-menu-item *ngFor=\"let a of alternate\"\r\n                (click)=\"switchTo(a)\">\r\n          {{a.title}}\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <span class=\"divider\"></span>\r\n    <!-- title -->\r\n    <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"patterns && patterns.length\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\r\n    <mat-menu #options xPosition=\"before\">\r\n      <!-- patterns -->\r\n      <button mat-menu-item *ngFor=\"let p of patterns\" (click)=\"patternChange(p)\">{{p.title}}</button>\r\n    </mat-menu>\r\n    <button mat-icon-button (click)=\"reset()\" [disabled]=\"!pattern\" [bizdocTooltip]=\"'Clear' | translate\">\r\n      <mat-icon>clear_all</mat-icon>\r\n    </button>\r\n    <!-- filters -->\r\n    <ng-container *ngFor=\"let f of filters\">\r\n      <button mat-button [matMenuTriggerFor]=\"fmenu\">{{axes[f.name] | typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #fmenu xPosition=\"before\">\r\n        <button mat-menu-item *ngFor=\"let kv of sources[f.name] | async\"\r\n                (click)=\"filter(f.name, kv.key, kv.value)\">\r\n          {{kv.value}}\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"loading-view\" *ngIf=\"loading\">\r\n    <mat-spinner color=\"accent\"></mat-spinner>\r\n  </div>\r\n  <bizdoc-cube-matrix [cube]=\"cube.name\" [xAxis]=\"xAxis\" [serie]=\"serie\" [indices]=\"indices\" [sum]=\"sum\"\r\n                          [axes]=\"axes\" [scope]=\"scope\" class=\"table\"\r\n                          (explore)='explore($event)' [(loading)]=\"loading\"></bizdoc-cube-matrix>\r\n</ng-container>\r\n<ng-template #none>\r\n  <bizdoc-none icon=\"insert_chart_outlined\" subtitle=\"NothingHere\"></bizdoc-none>\r\n</ng-template>\r\n", styles: [".table{padding:0 8px}\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: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i10.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: CubeMatrixComponent, selector: "bizdoc-cube-matrix", inputs: ["cube", "xAxis", "serie", "indices", "scope", "sum", "axes", "loading", "interactive"], outputs: ["explore", "loadingChange"] }, { type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }], directives: [{ type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }], pipes: { "translate": TranslatePipe, "async": i10$1.AsyncPipe, "typeValue": TypeValuePipe } });
 CubeDocumentMatrixComponent = __decorate([
     BizDoc({
         selector: 'bizdoc-cube-matrix'
@@ -23443,7 +23509,7 @@ CubeDocumentMatrixComponent = __decorate([
 ], CubeDocumentMatrixComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CubeDocumentMatrixComponent, decorators: [{
             type: Component,
-            args: [{ host: { class: 'view' }, template: "<ng-container *ngIf=\"hasdata; else none\">\r\n  <div class=\"nav-toolbar\">\r\n    <ng-container *ngIf=\"alternate\">\r\n      <button mat-button [matMenuTriggerFor]=\"cmenu\">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #cmenu>\r\n        <button mat-menu-item *ngFor=\"let a of alternate\"\r\n                (click)=\"switchTo(a)\">\r\n          {{a.title}}\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <span class=\"divider\"></span>\r\n    <!-- title -->\r\n    <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"patterns && patterns.length\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\r\n    <mat-menu #options xPosition=\"before\">\r\n      <!-- patterns -->\r\n      <button mat-menu-item *ngFor=\"let p of patterns\" (click)=\"patternChange(p)\">{{p.title}}</button>\r\n    </mat-menu>\r\n    <button mat-icon-button (click)=\"reset()\" [disabled]=\"!pattern\" [bizdocTooltip]=\"'Clear' | translate\">\r\n      <mat-icon>clear_all</mat-icon>\r\n    </button>\r\n    <!-- filters -->\r\n    <ng-container *ngFor=\"let f of filters\">\r\n      <button mat-button [matMenuTriggerFor]=\"fmenu\">{{axes[f.name] | typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #fmenu xPosition=\"before\">\r\n        <button mat-menu-item *ngFor=\"let kv of sources[f.name] | async\"\r\n                (click)=\"filter(f.name, kv.key, kv.value)\">\r\n          {{kv.value}}\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"loading-view\" *ngIf=\"loading\">\r\n    <mat-spinner color=\"accent\"></mat-spinner>\r\n  </div>\r\n  <bizdoc-cube-matrix [cube]=\"cube.name\" [xAxis]=\"xAxis\" [serie]=\"serie\" [indices]=\"indices\" [sum]=sum\r\n                          [axes]=\"axes\" [scope]=\"scope\" class=\"table\"\r\n                          (explore)='explore($event)' [(loading)]=\"loading\"></bizdoc-cube-matrix>\r\n</ng-container>\r\n<ng-template #none>\r\n  <bizdoc-none icon=\"insert_chart_outlined\" subtitle=\"NothingHere\"></bizdoc-none>\r\n</ng-template>\r\n", styles: [".table{padding:0 8px}\n"] }]
+            args: [{ host: { class: 'view' }, template: "<ng-container *ngIf=\"hasdata; else none\">\r\n  <div class=\"nav-toolbar\">\r\n    <ng-container *ngIf=\"alternate\">\r\n      <button mat-button [matMenuTriggerFor]=\"cmenu\">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #cmenu>\r\n        <button mat-menu-item *ngFor=\"let a of alternate\"\r\n                (click)=\"switchTo(a)\">\r\n          {{a.title}}\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <span class=\"divider\"></span>\r\n    <!-- title -->\r\n    <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"patterns && patterns.length\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\r\n    <mat-menu #options xPosition=\"before\">\r\n      <!-- patterns -->\r\n      <button mat-menu-item *ngFor=\"let p of patterns\" (click)=\"patternChange(p)\">{{p.title}}</button>\r\n    </mat-menu>\r\n    <button mat-icon-button (click)=\"reset()\" [disabled]=\"!pattern\" [bizdocTooltip]=\"'Clear' | translate\">\r\n      <mat-icon>clear_all</mat-icon>\r\n    </button>\r\n    <!-- filters -->\r\n    <ng-container *ngFor=\"let f of filters\">\r\n      <button mat-button [matMenuTriggerFor]=\"fmenu\">{{axes[f.name] | typeValue : f.dataType | async}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #fmenu xPosition=\"before\">\r\n        <button mat-menu-item *ngFor=\"let kv of sources[f.name] | async\"\r\n                (click)=\"filter(f.name, kv.key, kv.value)\">\r\n          {{kv.value}}\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"loading-view\" *ngIf=\"loading\">\r\n    <mat-spinner color=\"accent\"></mat-spinner>\r\n  </div>\r\n  <bizdoc-cube-matrix [cube]=\"cube.name\" [xAxis]=\"xAxis\" [serie]=\"serie\" [indices]=\"indices\" [sum]=\"sum\"\r\n                          [axes]=\"axes\" [scope]=\"scope\" class=\"table\"\r\n                          (explore)='explore($event)' [(loading)]=\"loading\"></bizdoc-cube-matrix>\r\n</ng-container>\r\n<ng-template #none>\r\n  <bizdoc-none icon=\"insert_chart_outlined\" subtitle=\"NothingHere\"></bizdoc-none>\r\n</ng-template>\r\n", styles: [".table{padding:0 8px}\n"] }]
         }], ctorParameters: function () { return [{ type: DocumentViewRef }, { type: RouterImpl }, { type: CubeService }, { type: DatasourceService }, { type: SessionService }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: [CubeMatrixComponent, { static: true }]
@@ -23873,7 +23939,7 @@ class CubeSumComponent {
         this.forward = false;
         this.Math = Math;
     }
-    ngOnChanges(changes) {
+    ngOnChanges(_) {
         this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
         this.currencyCode = this._cube.currencyCode;
         this.digitsInfo = this._service.digitsInfo;
@@ -24351,7 +24417,7 @@ let CubeChartViewComponent = class CubeChartViewComponent extends CubeBase {
     }
 };
 CubeChartViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: CubeChartViewComponent, deps: [{ token: SessionService }, { token: DocumentViewRef }, { token: CubeService }, { token: RouterImpl }], target: i0.ɵɵFactoryTarget.Component });
-CubeChartViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeChartViewComponent, selector: "ng-component", host: { classAttribute: "view" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hasdata; \">\r\n  <!--else none-->\r\n  <ng-container [ngSwitch]=\"isAccum\">\r\n    <bizdoc-cube-accum *ngSwitchCase=\"true\" [chartType]=\"chartType\" [width]=\"width\" [scope]=\"scope\"\r\n                       (explore)=\"explore($event)\"\r\n                       [cube]=\"cube.name\"\r\n                       [filters]=\"filters\"\r\n                       [xAxis]=\"xAxis\"></bizdoc-cube-accum>\r\n    <bizdoc-cube-chart *ngSwitchDefault [cube]=\"cube.name\"\r\n                       [xAxis]=\"xAxis\" [series]=\"series\" [indices]=\"indices\"\r\n                       [filters]=\"filters\"\r\n                       [chartType]=\"chartType\" [indexChartType]=\"indexChartType\"\r\n                       [width]=\"width\" [scope]=\"scope\"\r\n                       (explore)=\"explore($event)\"></bizdoc-cube-chart>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #none>\r\n  <bizdoc-none icon=\"insert_chart_outlined\" subtitle=\"NothingHere\"></bizdoc-none>\r\n</ng-template>\r\n", components: [{ type: CubeAccumulationChartComponent, selector: "bizdoc-cube-accum", inputs: ["height", "width", "cube", "xAxis", "indices", "filters", "chartType", "scope", "loading"], outputs: ["loadingChange", "explore"] }, { type: CubeChartComponent, selector: "bizdoc-cube-chart", inputs: ["width", "height", "cube", "xAxis", "series", "indices", "filters", "chartType", "indexChartType", "scope", "currencyCode", "loading"], outputs: ["explore", "loadingChange"] }, { type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }], directives: [{ type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+CubeChartViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: CubeChartViewComponent, selector: "ng-component", host: { classAttribute: "view" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hasdata; \">\r\n  <!--else none-->\r\n  <ng-container [ngSwitch]=\"isAccum\">\r\n    <bizdoc-cube-accum *ngSwitchCase=\"true\" [chartType]=\"chartType\" [width]=\"width\" [scope]=\"scope\"\r\n                       (explore)=\"explore($event)\"\r\n                       [cube]=\"cube.name\"\r\n                       [filters]=\"filters\"\r\n                       [xAxis]=\"xAxis\"></bizdoc-cube-accum>\r\n    <bizdoc-cube-chart *ngSwitchDefault [cube]=\"cube.name\"\r\n                       [xAxis]=\"xAxis\" [series]=\"series\" [indices]=\"indices\"\r\n                       [filters]=\"filters\"\r\n                       [chartType]=\"chartType\" [indexChartType]=\"indexChartType\"\r\n                       [width]=\"width\" [scope]=\"scope\"\r\n                       (explore)=\"explore($event)\"></bizdoc-cube-chart>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #none>\r\n  <bizdoc-none icon=\"insert_chart_outlined\" subtitle=\"NothingHere\"></bizdoc-none>\r\n</ng-template>\r\n", components: [{ type: CubeAccumulationChartComponent, selector: "bizdoc-cube-accum", inputs: ["height", "width", "cube", "xAxis", "indices", "filters", "chartType", "scope", "loading"], outputs: ["loadingChange", "explore"] }, { type: CubeChartComponent, selector: "bizdoc-cube-chart", inputs: ["width", "height", "cube", "xAxis", "series", "indices", "filters", "yAxis", "chartType", "indexChartType", "scope", "currencyCode", "loading"], outputs: ["explore", "loadingChange"] }, { type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }], directives: [{ type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 CubeChartViewComponent = __decorate([
     BizDoc({
         selector: 'bizdoc-chart-view'
@@ -24429,6 +24495,7 @@ class Item {
         this.fill = fill;
         this.tooltipSettings = {
             visible: true,
+            border: { width: 0 },
             format: '${name} : ${y}',
             trackLineSettings: {},
             textStyle: {
@@ -24681,7 +24748,7 @@ const CORE_COMPONENTS = [CubeParallelViewComponent, CubeExploreViewComponent, Cu
 ];
 class SharedModule {
     static forChild(config) {
-        const { formats, maps } = config || {};
+        const { formats } = config || {};
         registerComponents(CORE_COMPONENTS);
         const providers = [{
                 provide: RouterImpl, useClass: !config || !config.routing || config.routing === 'ng' ? NgRouter : PaneRouter
@@ -24768,11 +24835,11 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         RouterModule,
         MomentModule,
         PickerModule,
-        GanttModule,
+        SyncfusionGanttModule,
         SyncfusionScheduleModule,
         SyncfusionCircularGaugeModule,
         SyncfusionChartModule,
-        SparklineAllModule,
+        SyncfusionGanttModule,
         SyncfusionGridModule,
         RichTextEditorModule,
         SyncfusionSpreadsheetModule,
@@ -24828,11 +24895,11 @@ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             RouterModule,
             MomentModule,
             PickerModule,
-            GanttModule,
+            SyncfusionGanttModule,
             SyncfusionScheduleModule,
             SyncfusionCircularGaugeModule,
             SyncfusionChartModule,
-            SparklineAllModule,
+            SyncfusionGanttModule,
             SyncfusionGridModule,
             RichTextEditorModule,
             SyncfusionSpreadsheetModule,
@@ -24908,11 +24975,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                         RouterModule,
                         MomentModule,
                         PickerModule,
-                        GanttModule,
+                        SyncfusionGanttModule,
                         SyncfusionScheduleModule,
                         SyncfusionCircularGaugeModule,
                         SyncfusionChartModule,
-                        SparklineAllModule,
+                        SyncfusionGanttModule,
                         SyncfusionGridModule,
                         RichTextEditorModule,
                         SyncfusionSpreadsheetModule,
@@ -26836,7 +26903,7 @@ let PositionsComponent = class PositionsComponent {
             let positions = model.positions;
             if (!positions || !Object.keys(positions).length)
                 continue;
-            const roles = this.roles = this._session.profile.roles.filter(r => r.dataType === type.name && positions[r.name]);
+            const roles = this._session.profile.roles.filter(r => r.dataType === type.name && positions[r.name]);
             const rows = [];
             rows.push([this._translate.get('Type'), this._translate.get('Value'), '', ...roles.map(r => r.title)]);
             model.patterns && model.patterns.forEach(p => {
@@ -26875,24 +26942,63 @@ let PositionsComponent = class PositionsComponent {
         }
         XLSX.writeFile(wb, `${this._translate.get('Positions')}.xlsx`);
     }
+    async upload(evt) {
+        const { files } = evt.srcElement;
+        if (files && files.length) {
+            const file = files.item(0);
+            var reader = new FileReader();
+            reader.onload = e => { };
+            const text = await file.text();
+            //reader.readAs(text);
+            const wb = XLSX.readFile(file.name, {});
+            for (let i = 0; i < wb.SheetNames.length; i++) {
+                let title = wb.SheetNames[i], ws = wb.Sheets[title];
+                let type = this.types.find(t => t.title === title);
+                if (!type)
+                    throw '';
+                let roles = this._session.profile.roles.filter(r => r.dataType === type.name);
+                let row = ws['!rows'][0];
+                for (let c = 0; c < ws['!cols'].length; c++) {
+                    let col = ws['!cols'][c];
+                    //let role = roles.find(r => r.title === ws.);
+                    //  if (!role) {
+                    //    this._everything[type.name].roles.push({name: '', title: ''});
+                    //  }
+                }
+                for (let r = 0; r < ws['!rows'].length; r++) {
+                    let row = ws['!rows'][r];
+                    for (let c = 0; c < ws['!cols'].length; c++) {
+                        let col = ws['!cols'][c], content = '';
+                        if (content) {
+                            //let users = content.split(', ').map(name=> this.profiles.find(u=> u.name === name));
+                        }
+                        else { }
+                    }
+                }
+            }
+        }
+    }
     ngOnDestroy() {
         this._destroy.next();
         this._destroy.complete();
     }
 };
 PositionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: PositionsComponent, deps: [{ token: SessionService }, { token: UtilityRef }, { token: DatasourceService }, { token: PromptService }, { token: AccountService }, { token: WindowTitleService }, { token: TranslateService }, { token: Popup }, { token: i3$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: PositionsComponent, selector: "ng-component", viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "noRoleTpl", first: true, predicate: ["noRoleTpl"], descendants: true, static: true }, { propertyName: "roleTpl", first: true, predicate: ["roleTpl"], descendants: true, static: true }, { propertyName: "patternTpl", first: true, predicate: ["patternTpl"], descendants: true, static: true }, { propertyName: "newGroupTpl", first: true, predicate: ["groupTpl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-button [matMenuTriggerFor]=\"typeMenu\">{{type?.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n  <mat-menu #typeMenu>\r\n    <button mat-menu-item *ngFor=\"let t of types\" (click)=\"change(t.name)\">{{t.title}}</button>\r\n  </mat-menu>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\">\r\n  <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"key\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <span [ngSwitch]=\"element.type\">\r\n        <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n        <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          {{element.key}}\r\n        </ng-container>\r\n      </span>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"value\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      {{element.value}}\r\n    </td>\r\n  </ng-container>\r\n  <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n    <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n    <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\">\r\n      <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n        <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n          <ng-container *ngIf=\"!first\">, </ng-container>\r\n          {{profiles[u]?.name}}\r\n        </ng-container>\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"options\">\r\n    <th mat-header-cell *matHeaderCellDef></th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <ng-container *ngIf=\"element.type === 'pattern'\">\r\n          <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n          <mat-divider></mat-divider>\r\n          <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"element.type === 'group'\">\r\n          <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n          <mat-divider></mat-divider>\r\n          <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n        </ng-container>\r\n      </mat-menu>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n</table>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\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]=\"role.value\" color=\"primary\" [disabled]=\"!role.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<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\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]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.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<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </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]=\"group.value\" color=\"primary\" [disabled]=\"!group.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 #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n", styles: ["table{width:100%}.form{padding:8px}table :ng-deep .mat-cell{cursor:pointer;border-left-width:1px;border-left-style:outset;padding:0 4px!important}\n"], components: [{ type: i7$4.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: SearchInput, selector: "bizdoc-search-input", outputs: ["valueChange"] }, { type: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5$1.MatCellDef, selector: "[matCellDef]" }, { type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i10$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i3$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i3$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.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$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i3$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4.MatSelectTrigger, selector: "mat-select-trigger" }], pipes: { "translate": TranslatePipe, "sanitizeHtml": SanitizeHtmlPipe } });
+PositionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: PositionsComponent, selector: "ng-component", viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "noRoleTpl", first: true, predicate: ["noRoleTpl"], descendants: true, static: true }, { propertyName: "roleTpl", first: true, predicate: ["roleTpl"], descendants: true, static: true }, { propertyName: "patternTpl", first: true, predicate: ["patternTpl"], descendants: true, static: true }, { propertyName: "newGroupTpl", first: true, predicate: ["groupTpl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-button [matMenuTriggerFor]=\"typeMenu\">{{type?.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n  <mat-menu #typeMenu>\r\n    <button mat-menu-item *ngFor=\"let t of types\" (click)=\"change(t.name)\">{{t.title}}</button>\r\n  </mat-menu>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\">\r\n  <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"key\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <span [ngSwitch]=\"element.type\">\r\n        <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n        <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          {{element.key}}\r\n        </ng-container>\r\n      </span>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"value\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      {{element.value}}\r\n    </td>\r\n  </ng-container>\r\n  <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n    <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n    <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\">\r\n      <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n        <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n          <ng-container *ngIf=\"!first\">, </ng-container>\r\n          {{profiles[u]?.name}}\r\n        </ng-container>\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"options\">\r\n    <th mat-header-cell *matHeaderCellDef></th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <ng-container *ngIf=\"element.type === 'pattern'\">\r\n          <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n          <mat-divider></mat-divider>\r\n          <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"element.type === 'group'\">\r\n          <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n          <mat-divider></mat-divider>\r\n          <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n        </ng-container>\r\n      </mat-menu>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n</table>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\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]=\"role.value\" color=\"primary\" [disabled]=\"!role.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<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\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]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.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<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </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]=\"group.value\" color=\"primary\" [disabled]=\"!group.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 #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>\r\n", styles: ["table{width:100%}.form{padding:8px}table :ng-deep .mat-cell{cursor:pointer;border-left-width:1px;border-left-style:outset;padding:0 4px!important}\n"], components: [{ type: i7$4.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: SearchInput, selector: "bizdoc-search-input", outputs: ["valueChange"] }, { type: i7$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i5$1.MatCellDef, selector: "[matCellDef]" }, { type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i10$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i3$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i3$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.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$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i3$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4.MatSelectTrigger, selector: "mat-select-trigger" }], pipes: { "translate": TranslatePipe, "sanitizeHtml": SanitizeHtmlPipe } });
 PositionsComponent = __decorate([
     BizDoc({ selector: 'bizdoc-positions' })
     /** positions component*/
 ], PositionsComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: PositionsComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-button [matMenuTriggerFor]=\"typeMenu\">{{type?.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n  <mat-menu #typeMenu>\r\n    <button mat-menu-item *ngFor=\"let t of types\" (click)=\"change(t.name)\">{{t.title}}</button>\r\n  </mat-menu>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\">\r\n  <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"key\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <span [ngSwitch]=\"element.type\">\r\n        <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n        <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          {{element.key}}\r\n        </ng-container>\r\n      </span>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"value\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      {{element.value}}\r\n    </td>\r\n  </ng-container>\r\n  <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n    <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n    <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\">\r\n      <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n        <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n          <ng-container *ngIf=\"!first\">, </ng-container>\r\n          {{profiles[u]?.name}}\r\n        </ng-container>\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"options\">\r\n    <th mat-header-cell *matHeaderCellDef></th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <ng-container *ngIf=\"element.type === 'pattern'\">\r\n          <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n          <mat-divider></mat-divider>\r\n          <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"element.type === 'group'\">\r\n          <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n          <mat-divider></mat-divider>\r\n          <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n        </ng-container>\r\n      </mat-menu>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n</table>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\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]=\"role.value\" color=\"primary\" [disabled]=\"!role.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<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\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]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.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<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </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]=\"group.value\" color=\"primary\" [disabled]=\"!group.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 #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n", styles: ["table{width:100%}.form{padding:8px}table :ng-deep .mat-cell{cursor:pointer;border-left-width:1px;border-left-style:outset;padding:0 4px!important}\n"] }]
+            args: [{ template: "<mat-toolbar>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty\">{{'SaveChanges'|translate}}</button>\r\n  <span class=\"divider\"></span>\r\n  <bizdoc-search-input (valueChange)=\"search($event)\"></bizdoc-search-input>\r\n  <button mat-button [matMenuTriggerFor]=\"typeMenu\">{{type?.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n  <mat-menu #typeMenu>\r\n    <button mat-menu-item *ngFor=\"let t of types\" (click)=\"change(t.name)\">{{t.title}}</button>\r\n  </mat-menu>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"newMenu\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <mat-menu #newMenu>\r\n    <button mat-menu-item (click)=\"newRole()\">{{'Role'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newPattern()\">{{'Pattern'|translate}}</button>\r\n    <button mat-menu-item (click)=\"newGroup()\">{{'Group'|translate}} </button>\r\n  </mat-menu>\r\n  <button mat-icon-button [bizdocTooltip]=\"'Download' | translate\" (click)=\"download()\" [disabled]=\"dirty\"><mat-icon>save_alt</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<table mat-table matSort [dataSource]=\"dataSource\" [style.display]=\"dataSource ? '': 'none'\">\r\n  <ng-container *ngFor=\"let column of (type?.columns ||[])\" [matColumnDef]=\"column.name\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element[column.name]}} </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"key\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <span [ngSwitch]=\"element.type\">\r\n        <ng-container *ngSwitchCase=\"'group'\">({{'Group'|translate}})</ng-container>\r\n        <ng-container *ngSwitchCase=\"'pattern'\">({{'Pattern'|translate}})</ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          {{element.key}}\r\n        </ng-container>\r\n      </span>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"value\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      {{element.value}}\r\n    </td>\r\n  </ng-container>\r\n  <ng-container *ngFor=\"let role of roles\" [matColumnDef]=\"role.name\">\r\n    <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>\r\n    <td mat-cell *matCellDef=\"let element\" [attr.data-role]=\"role.name\">\r\n      <ng-container *ngIf=\"positions[role.name][element.key]\">\r\n        <ng-container *ngFor=\"let u of positions[role.name][element.key]; let first = first\">\r\n          <ng-container *ngIf=\"!first\">, </ng-container>\r\n          {{profiles[u]?.name}}\r\n        </ng-container>\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n  <ng-container matColumnDef=\"options\">\r\n    <th mat-header-cell *matHeaderCellDef></th>\r\n    <td mat-cell *matCellDef=\"let element\">\r\n      <button mat-icon-button [matMenuTriggerFor]=\"options\" *ngIf=\"element.type === 'pattern' || element.type === 'group'\"><mat-icon>more_vert</mat-icon></button>\r\n      <mat-menu #options>\r\n        <ng-container *ngIf=\"element.type === 'pattern'\">\r\n          <button mat-menu-item (click)=\"editPattern(element.key)\">{{'Edit'|translate}}</button>\r\n          <mat-divider></mat-divider>\r\n          <button mat-menu-item (click)=\"deletePattern(element.key)\">{{'Remove'|translate}} </button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"element.type === 'group'\">\r\n          <button mat-menu-item (click)=\"editGroup(element.key)\">{{'Edit'|translate}}</button>\r\n          <mat-divider></mat-divider>\r\n          <button mat-menu-item (click)=\"deleteGroup(element.key)\">{{'Remove'|translate}} </button>\r\n        </ng-container>\r\n      </mat-menu>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let element; columns: displayedColumns\" (click)=\"edit(element.key, $event)\"></tr>\r\n</table>\r\n<!-- role template -->\r\n<ng-template #roleTpl>\r\n  <h2 mat-dialog-title>{{'Role' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"role\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\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]=\"role.value\" color=\"primary\" [disabled]=\"!role.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<!-- pattern template -->\r\n<ng-template #patternTpl>\r\n  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"pattern\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"expression\" [placeholder]=\"'Regex'| translate\" required autocomplete=\"off\" />\r\n        <mat-hint><span [innerHTML]=\"'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml\"></span></mat-hint>\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]=\"pattern.value\" color=\"primary\" [disabled]=\"!pattern.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<!-- group -->\r\n<ng-template #groupTpl>\r\n  <h2 mat-dialog-title>{{'Group' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form [formGroup]=\"group\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <input matInput formControlName=\"title\" [placeholder]=\"'Title'| translate\" required autocomplete=\"off\" />\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-select [placeholder]=\"'Items'|translate\" multiple formControlName=\"items\" required>\r\n          <mat-select-trigger>\r\n            {{group.value.items ? group.value.items[0] : ''}}\r\n            <span *ngIf=\"group.value.items?.length > 1\" class=\"additional-selection\">\r\n              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})\r\n            </span>\r\n          </mat-select-trigger>\r\n          <mat-option *ngFor=\"let v of source\" [value]=\"v.key\">\r\n            <span *ngIf=\"!type.columns\">{{v.value}}</span>\r\n            <span *ngIf=\"type.columns\"><span *ngFor=\"let c of type.columns\">{{v.value[c.name]}}</span></span>\r\n          </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]=\"group.value\" color=\"primary\" [disabled]=\"!group.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 #noRoleTpl>\r\n  <mat-dialog-content>\r\n    {{'NoRoles'|translate : type?.title}}\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">{{'CreateRole' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<form style=\"display:none\">\r\n  <input type=\"file\" name=\"file\" (onchange)=\"upload($event)\" #file/>\r\n</form>\r\n", styles: ["table{width:100%}.form{padding:8px}table :ng-deep .mat-cell{cursor:pointer;border-left-width:1px;border-left-style:outset;padding:0 4px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: SessionService }, { type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
-                }] }, { type: DatasourceService }, { type: PromptService }, { type: AccountService }, { type: WindowTitleService }, { type: TranslateService }, { type: Popup }, { type: i3$2.MatDialog }]; }, propDecorators: { sort: [{
+                }] }, { type: DatasourceService }, { type: PromptService }, { type: AccountService }, { type: WindowTitleService }, { type: TranslateService }, { type: Popup }, { type: i3$2.MatDialog }]; }, propDecorators: { _fileElement: [{
+                type: ViewChild,
+                args: ['file', { static: true }]
+            }], sort: [{
                 type: ViewChild,
                 args: [MatSort]
             }], noRoleTpl: [{