@bizdoc/core 1.16.2 → 1.16.5

package/fesm2020/bizdoc-core.mjs

@@ -106,7 +106,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i7$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i4$4 from '@angular/material/list';
-import { MatListModule, MatSelectionList } from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
 import * as i8$3 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i4$5 from '@angular/material/radio';
@@ -114,13 +114,13 @@ import { MatRadioModule } from '@angular/material/radio';
 import * as i2$4 from '@angular/flex-layout';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i6$3 from '@angular/cdk/scrolling';
-import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { CdkScrollableModule, ScrollingModule } from '@angular/cdk/scrolling';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import { Platform } from '@angular/cdk/platform';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i10$3 from '@angular/flex-layout/extended';
-import * as i12 from '@syncfusion/ej2-angular-charts';
+import * as i13 from '@syncfusion/ej2-angular-charts';
 import { AccumulationChart, ChartModule, AccumulationChartModule, SparklineModule, RangeNavigatorModule, RangeTooltipService, AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService, SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService, StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService, BarSeriesService, StackingBarSeriesService, RangeColumnSeriesService, BubbleSeriesService, TooltipService, CrosshairService, CategoryService, DateTimeService, LogarithmicService, LegendService, ZoomService, DataLabelService, SelectionService, ChartAnnotationService, WaterfallSeriesService, RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService, MultiLevelLabelService, ParetoSeriesService, TooltipRenderService, SparklineTooltipService, SplineRangeAreaSeriesService, AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService, RangeNavigator, AreaSeries, LineSeries, DateTime, RangeTooltip, Sparkline, SparklineTooltip, PieSeries, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationAnnotation, AccumulationLegend, AccumulationSelection, Chart as Chart$1, Category, Tooltip as Tooltip$1, Legend, Selection as Selection$1, Zoom, Crosshair, DataLabel, BarSeries, BubbleSeries, ColumnSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, AccumulationChartComponent, ChartComponent } from '@syncfusion/ej2-angular-charts';
 import { Workbook } from '@syncfusion/ej2-excel-export';
 import { Chart } from '@syncfusion/ej2-charts';
@@ -347,6 +347,12 @@ const STRINGS = {
     'ar': {},
     'ru': {},
     'en': {
+        AnalysisSecurityGlobalHelp: 'Everyone can view analysys data with no restrictions.',
+        AnalysisSecurityPositionsHelp: 'Only users that were assigned a role to the requested analysis can view data.',
+        AnalysisSecurityPatternsHelp: 'Only users that were assigned a role add to one of the analysis patterns can view data.',
+        ReceivedAgo: 'Received ago',
+        IssuedAgo: 'Issued ago',
+        Unlock: '<a>Unlock</a> multilingual resource',
         XAxis: 'XAxis',
         Series: 'Series',
         Steps: 'Steps',
@@ -387,7 +393,7 @@ const STRINGS = {
         ChartType: 'Chart type',
         IndicesChartType: 'Indices chart type',
         States: 'States',
-        Cubes: 'Cubes',
+        Cubes: 'Analysis',
         Types: 'Types',
         Widgets: 'Widgets',
         Rules: 'Rules',
@@ -3817,7 +3823,7 @@ class InputField extends FieldBase {
     focus() { this.input.focus(); }
 }
 InputField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: InputField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-InputField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: InputField, selector: "ng-component", viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], usesInheritance: true, ngImport: i0, template: `<mat-form-field>
+InputField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: InputField, selector: "bizdoc-input-field", viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], usesInheritance: true, ngImport: i0, template: `<mat-form-field>
   <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
   <input matInput [type]="type" autocomplete="off" [formControl]=control [placeholder]="field.placeholder || field.label || field.name"
   [required]="field.required" [minlength]="field.min" [maxlength]="field.max" [pattern]="field.pattern"/>
@@ -3829,6 +3835,7 @@ InputField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "1
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: InputField, decorators: [{
             type: Component,
             args: [{
+                    selector: 'bizdoc-input-field',
                     template: `<mat-form-field>
   <mat-label *ngIf="field.placeholder">{{field.label || field.name}}</mat-label>          
   <input matInput [type]="type" autocomplete="off" [formControl]=control [placeholder]="field.placeholder || field.label || field.name"
@@ -23431,7 +23438,7 @@ class CubeDocumentsGridComponent {
     }
 }
 CubeDocumentsGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeDocumentsGridComponent, deps: [{ token: ReportRef }, { token: DocumentInfo }, { token: SessionService }, { token: AccountService }, { token: CubeService }], target: i0.ɵɵFactoryTarget.Component });
-CubeDocumentsGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeDocumentsGridComponent, selector: "ng-component", viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "<ejs-grid [dataSource]=\"dataSource\" (rowSelected)=\"rowSelected($event)\" [pageSettings]=\"pageSettings\"\r\n          [allowPaging]=false\r\n          [allowExcelExport]=\"true\"\r\n          [height]=\"height\"\r\n          [allowGrouping]=true\r\n          [allowSorting]=true\r\n          [groupSettings]=\"groupSettings\">\r\n  <e-columns>\r\n    <e-column field=\"number\" [headerText]=\"'Number'|translate\"></e-column>\r\n    <e-column field=\"subject\" [headerText]=\"'Subject'|translate\"></e-column>\r\n    <e-column field=\"stateId\" [headerText]=\"'Status'|translate\">\r\n      <ng-template #template let-data>{{data.stateId | state}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"date\" [headerText]=\"'Date'|translate\">\r\n      <ng-template #template let-data>{{data.date | amDateFormat: 'lll'}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"formId\" [headerText]=\"'Form'|translate\">\r\n      <ng-template #template let-data>{{data.formId | form}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"userName\" [headerText]=\"'Name'|translate\">\r\n    </e-column>\r\n    <e-column field=\"total\" [headerText]=\"'Value'|translate\" textAlign=\"Right\" [format]=\"valueFormat\">\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n", dependencies: [{ kind: "directive", type: i6$4.ColumnDirective, selector: "ejs-gantt>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowReordering", "allowResizing", "allowSorting", "clipMode", "customAttributes", "disableHtmlEncode", "displayAsCheckBox", "edit", "editType", "field", "filter", "format", "formatter", "headerTemplate", "headerText", "headerTextAlign", "hideAtMedia", "isPrimaryKey", "maxWidth", "minWidth", "sortComparer", "template", "textAlign", "type", "valueAccessor", "visible", "width"] }, { kind: "directive", type: i6$4.ColumnsDirective, selector: "ejs-gantt>e-columns" }, { kind: "directive", type: i12.ColumnDirective, selector: "e-columns>e-column", inputs: ["border", "width"] }, { kind: "directive", type: i12.ColumnsDirective, selector: "ejs-chart>e-columns" }, { kind: "component", type: i8$7.GridComponent, selector: "ejs-grid", inputs: ["aggregates", "allowExcelExport", "allowFiltering", "allowGrouping", "allowKeyboard", "allowMultiSorting", "allowPaging", "allowPdfExport", "allowReordering", "allowResizing", "allowRowDragAndDrop", "allowSelection", "allowSorting", "allowTextWrap", "childGrid", "clipMode", "columnChooserSettings", "columnMenuItems", "columnQueryMode", "columns", "contextMenuItems", "cssClass", "currencyCode", "currentAction", "dataSource", "detailTemplate", "editSettings", "ej2StatePersistenceVersion", "enableAdaptiveUI", "enableAltRow", "enableAutoFill", "enableColumnVirtualization", "enableHeaderFocus", "enableHover", "enableImmutableMode", "enableInfiniteScrolling", "enablePersistence", "enableRtl", "enableStickyHeader", "enableVirtualization", "filterSettings", "frozenColumns", "frozenRows", "gridLines", "groupSettings", "height", "hierarchyPrintMode", "infiniteScrollSettings", "locale", "pageSettings", "pagerTemplate", "parentDetails", "printMode", "query", "queryString", "resizeSettings", "rowDropSettings", "rowHeight", "rowRenderingMode", "rowTemplate", "searchSettings", "selectedRowIndex", "selectionSettings", "showColumnChooser", "showColumnMenu", "sortSettings", "textWrapSettings", "toolbar", "toolbarTemplate", "width"], outputs: ["actionBegin", "actionComplete", "actionFailure", "batchAdd", "batchCancel", "batchDelete", "beforeAutoFill", "beforeBatchAdd", "beforeBatchDelete", "beforeBatchSave", "beforeCopy", "beforeDataBound", "beforeExcelExport", "beforeOpenAdaptiveDialog", "beforeOpenColumnChooser", "beforePaste", "beforePdfExport", "beforePrint", "beginEdit", "cellDeselected", "cellDeselecting", "cellEdit", "cellSave", "cellSaved", "cellSelected", "cellSelecting", "checkBoxChange", "columnDataStateChange", "columnDeselected", "columnDeselecting", "columnDrag", "columnDragStart", "columnDrop", "columnMenuClick", "columnMenuOpen", "columnSelected", "columnSelecting", "commandClick", "contextMenuClick", "contextMenuOpen", "created", "dataBound", "dataSourceChanged", "dataStateChange", "destroyed", "detailDataBound", "excelAggregateQueryCellInfo", "excelExportComplete", "excelHeaderQueryCellInfo", "excelQueryCellInfo", "exportDetailDataBound", "exportGroupCaption", "headerCellInfo", "keyPressed", "lazyLoadGroupCollapse", "lazyLoadGroupExpand", "load", "pdfAggregateQueryCellInfo", "pdfExportComplete", "pdfHeaderQueryCellInfo", "pdfQueryCellInfo", "printComplete", "queryCellInfo", "recordClick", "recordDoubleClick", "resizeStart", "resizeStop", "resizing", "rowDataBound", "rowDeselected", "rowDeselecting", "rowDrag", "rowDragStart", "rowDragStartHelper", "rowDrop", "rowSelected", "rowSelecting", "toolbarClick", "dataSourceChange"] }, { kind: "directive", type: i8$7.ColumnDirective, selector: "ejs-grid>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowGrouping", "allowReordering", "allowResizing", "allowSearching", "allowSorting", "autoFit", "clipMode", "columns", "commands", "customAttributes", "dataSource", "defaultValue", "disableHtmlEncode", "displayAsCheckBox", "edit", "editTemplate", "editType", "enableGroupByFormat", "field", "filter", "filterBarTemplate", "filterTemplate", "foreignKeyField", "foreignKeyValue", "format", "formatter", "freeze", "headerTemplate", "headerText", "headerTextAlign", "headerValueAccessor", "hideAtMedia", "index", "isFrozen", "isIdentity", "isPrimaryKey", "lockColumn", "maxWidth", "minWidth", "showColumnMenu", "showInColumnChooser", "sortComparer", "template", "textAlign", "type", "uid", "validationRules", "valueAccessor", "visible", "width"] }, { kind: "directive", type: i8$7.ColumnsDirective, selector: "ejs-grid>e-columns" }, { kind: "directive", type: i8$7.AggregateColumnDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns>e-column", inputs: ["columnName", "customAggregate", "field", "footerTemplate", "format", "groupCaptionTemplate", "groupFooterTemplate", "type"] }, { kind: "directive", type: i8$7.AggregateColumnsDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns" }, { kind: "directive", type: i9$5.ColumnDirective, selector: "e-columns>e-column", inputs: ["customWidth", "format", "hidden", "index", "isLocked", "validation", "width"] }, { kind: "directive", type: i9$5.ColumnsDirective, selector: "e-sheet>e-columns" }, { kind: "directive", type: i10$4.ColumnDirective, selector: "e-columns>e-column", inputs: ["allowDrag", "allowDrop", "allowToggle", "headerText", "isExpanded", "keyField", "maxCount", "minCount", "showAddButton", "showItemCount", "template", "transitionColumns"] }, { kind: "directive", type: i10$4.ColumnsDirective, selector: "ejs-kanban>e-columns" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: StatePipe, name: "state" }, { kind: "pipe", type: FormPipe, name: "form" }] });
+CubeDocumentsGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeDocumentsGridComponent, selector: "ng-component", viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "<ejs-grid [dataSource]=\"dataSource\" (rowSelected)=\"rowSelected($event)\" [pageSettings]=\"pageSettings\"\r\n          [allowPaging]=false\r\n          [allowExcelExport]=\"true\"\r\n          [height]=\"height\"\r\n          [allowGrouping]=true\r\n          [allowSorting]=true\r\n          [groupSettings]=\"groupSettings\">\r\n  <e-columns>\r\n    <e-column field=\"number\" [headerText]=\"'Number'|translate\"></e-column>\r\n    <e-column field=\"subject\" [headerText]=\"'Subject'|translate\"></e-column>\r\n    <e-column field=\"stateId\" [headerText]=\"'Status'|translate\">\r\n      <ng-template #template let-data>{{data.stateId | state}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"date\" [headerText]=\"'Date'|translate\">\r\n      <ng-template #template let-data>{{data.date | amDateFormat: 'lll'}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"formId\" [headerText]=\"'Form'|translate\">\r\n      <ng-template #template let-data>{{data.formId | form}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"userName\" [headerText]=\"'Name'|translate\">\r\n    </e-column>\r\n    <e-column field=\"total\" [headerText]=\"'Value'|translate\" textAlign=\"Right\" [format]=\"valueFormat\">\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n", dependencies: [{ kind: "directive", type: i6$4.ColumnDirective, selector: "ejs-gantt>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowReordering", "allowResizing", "allowSorting", "clipMode", "customAttributes", "disableHtmlEncode", "displayAsCheckBox", "edit", "editType", "field", "filter", "format", "formatter", "headerTemplate", "headerText", "headerTextAlign", "hideAtMedia", "isPrimaryKey", "maxWidth", "minWidth", "sortComparer", "template", "textAlign", "type", "valueAccessor", "visible", "width"] }, { kind: "directive", type: i6$4.ColumnsDirective, selector: "ejs-gantt>e-columns" }, { kind: "directive", type: i13.ColumnDirective, selector: "e-columns>e-column", inputs: ["border", "width"] }, { kind: "directive", type: i13.ColumnsDirective, selector: "ejs-chart>e-columns" }, { kind: "component", type: i8$7.GridComponent, selector: "ejs-grid", inputs: ["aggregates", "allowExcelExport", "allowFiltering", "allowGrouping", "allowKeyboard", "allowMultiSorting", "allowPaging", "allowPdfExport", "allowReordering", "allowResizing", "allowRowDragAndDrop", "allowSelection", "allowSorting", "allowTextWrap", "childGrid", "clipMode", "columnChooserSettings", "columnMenuItems", "columnQueryMode", "columns", "contextMenuItems", "cssClass", "currencyCode", "currentAction", "dataSource", "detailTemplate", "editSettings", "ej2StatePersistenceVersion", "enableAdaptiveUI", "enableAltRow", "enableAutoFill", "enableColumnVirtualization", "enableHeaderFocus", "enableHover", "enableImmutableMode", "enableInfiniteScrolling", "enablePersistence", "enableRtl", "enableStickyHeader", "enableVirtualization", "filterSettings", "frozenColumns", "frozenRows", "gridLines", "groupSettings", "height", "hierarchyPrintMode", "infiniteScrollSettings", "locale", "pageSettings", "pagerTemplate", "parentDetails", "printMode", "query", "queryString", "resizeSettings", "rowDropSettings", "rowHeight", "rowRenderingMode", "rowTemplate", "searchSettings", "selectedRowIndex", "selectionSettings", "showColumnChooser", "showColumnMenu", "sortSettings", "textWrapSettings", "toolbar", "toolbarTemplate", "width"], outputs: ["actionBegin", "actionComplete", "actionFailure", "batchAdd", "batchCancel", "batchDelete", "beforeAutoFill", "beforeBatchAdd", "beforeBatchDelete", "beforeBatchSave", "beforeCopy", "beforeDataBound", "beforeExcelExport", "beforeOpenAdaptiveDialog", "beforeOpenColumnChooser", "beforePaste", "beforePdfExport", "beforePrint", "beginEdit", "cellDeselected", "cellDeselecting", "cellEdit", "cellSave", "cellSaved", "cellSelected", "cellSelecting", "checkBoxChange", "columnDataStateChange", "columnDeselected", "columnDeselecting", "columnDrag", "columnDragStart", "columnDrop", "columnMenuClick", "columnMenuOpen", "columnSelected", "columnSelecting", "commandClick", "contextMenuClick", "contextMenuOpen", "created", "dataBound", "dataSourceChanged", "dataStateChange", "destroyed", "detailDataBound", "excelAggregateQueryCellInfo", "excelExportComplete", "excelHeaderQueryCellInfo", "excelQueryCellInfo", "exportDetailDataBound", "exportGroupCaption", "headerCellInfo", "keyPressed", "lazyLoadGroupCollapse", "lazyLoadGroupExpand", "load", "pdfAggregateQueryCellInfo", "pdfExportComplete", "pdfHeaderQueryCellInfo", "pdfQueryCellInfo", "printComplete", "queryCellInfo", "recordClick", "recordDoubleClick", "resizeStart", "resizeStop", "resizing", "rowDataBound", "rowDeselected", "rowDeselecting", "rowDrag", "rowDragStart", "rowDragStartHelper", "rowDrop", "rowSelected", "rowSelecting", "toolbarClick", "dataSourceChange"] }, { kind: "directive", type: i8$7.ColumnDirective, selector: "ejs-grid>e-columns>e-column", inputs: ["allowEditing", "allowFiltering", "allowGrouping", "allowReordering", "allowResizing", "allowSearching", "allowSorting", "autoFit", "clipMode", "columns", "commands", "customAttributes", "dataSource", "defaultValue", "disableHtmlEncode", "displayAsCheckBox", "edit", "editTemplate", "editType", "enableGroupByFormat", "field", "filter", "filterBarTemplate", "filterTemplate", "foreignKeyField", "foreignKeyValue", "format", "formatter", "freeze", "headerTemplate", "headerText", "headerTextAlign", "headerValueAccessor", "hideAtMedia", "index", "isFrozen", "isIdentity", "isPrimaryKey", "lockColumn", "maxWidth", "minWidth", "showColumnMenu", "showInColumnChooser", "sortComparer", "template", "textAlign", "type", "uid", "validationRules", "valueAccessor", "visible", "width"] }, { kind: "directive", type: i8$7.ColumnsDirective, selector: "ejs-grid>e-columns" }, { kind: "directive", type: i8$7.AggregateColumnDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns>e-column", inputs: ["columnName", "customAggregate", "field", "footerTemplate", "format", "groupCaptionTemplate", "groupFooterTemplate", "type"] }, { kind: "directive", type: i8$7.AggregateColumnsDirective, selector: "ejs-grid>e-aggregates>e-aggregate>e-columns" }, { kind: "directive", type: i9$5.ColumnDirective, selector: "e-columns>e-column", inputs: ["customWidth", "format", "hidden", "index", "isLocked", "validation", "width"] }, { kind: "directive", type: i9$5.ColumnsDirective, selector: "e-sheet>e-columns" }, { kind: "directive", type: i10$4.ColumnDirective, selector: "e-columns>e-column", inputs: ["allowDrag", "allowDrop", "allowToggle", "headerText", "isExpanded", "keyField", "maxCount", "minCount", "showAddButton", "showItemCount", "template", "transitionColumns"] }, { kind: "directive", type: i10$4.ColumnsDirective, selector: "ejs-kanban>e-columns" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: StatePipe, name: "state" }, { kind: "pipe", type: FormPipe, name: "form" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeDocumentsGridComponent, decorators: [{
             type: Component,
             args: [{ template: "<ejs-grid [dataSource]=\"dataSource\" (rowSelected)=\"rowSelected($event)\" [pageSettings]=\"pageSettings\"\r\n          [allowPaging]=false\r\n          [allowExcelExport]=\"true\"\r\n          [height]=\"height\"\r\n          [allowGrouping]=true\r\n          [allowSorting]=true\r\n          [groupSettings]=\"groupSettings\">\r\n  <e-columns>\r\n    <e-column field=\"number\" [headerText]=\"'Number'|translate\"></e-column>\r\n    <e-column field=\"subject\" [headerText]=\"'Subject'|translate\"></e-column>\r\n    <e-column field=\"stateId\" [headerText]=\"'Status'|translate\">\r\n      <ng-template #template let-data>{{data.stateId | state}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"date\" [headerText]=\"'Date'|translate\">\r\n      <ng-template #template let-data>{{data.date | amDateFormat: 'lll'}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"formId\" [headerText]=\"'Form'|translate\">\r\n      <ng-template #template let-data>{{data.formId | form}}</ng-template>\r\n    </e-column>\r\n    <e-column field=\"userName\" [headerText]=\"'Name'|translate\">\r\n    </e-column>\r\n    <e-column field=\"total\" [headerText]=\"'Value'|translate\" textAlign=\"Right\" [format]=\"valueFormat\">\r\n    </e-column>\r\n  </e-columns>\r\n</ejs-grid>\r\n" }]
@@ -26964,7 +26971,7 @@ class CubeParallelComponent {
     }
 }
 CubeParallelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeParallelComponent, deps: [{ token: PromptService }, { token: CubeService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component });
-CubeParallelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeParallelComponent, selector: "bizdoc-cube-parallel", inputs: { filters: "filters", xAxis: "xAxis", series: "series", indices: "indices", cube: "cube", size: "size", chartType: "chartType", scope: "scope", palettes: "palettes" }, outputs: { onExplore: "explore" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"items.length\" class=\"row\">\r\n  <div *ngFor=\"let s of items\" class=\"element\">\r\n    <ejs-sparkline [width]='width' height='100px'\r\n                   [type]='s.chartType'\r\n                   [id]=\"s.data.name\"\r\n                   [dataSource]=\"s.data.points\"\r\n                   xName=\"name\"\r\n                   yName=\"y\" [palette]=\"s.palette\"\r\n                   [format]=\"format\"\r\n                   valueType=\"Category\"\r\n                   [enableRtl]=\"enableRtl\"\r\n                   [border]=\"s.border\"\r\n                   [fill]=\"s.fill\"\r\n                   [theme]=\"theme\"\r\n                   [axisSettings]=\"axisSettings\"\r\n                   [markerSettings]=\"s.markerSettings\"\r\n                   (pointRegionMouseClick)=\"sprklineClick(s, $event)\"\r\n                   [tooltipSettings]=\"s.tooltipSettings\">\r\n    </ejs-sparkline>\r\n    <h4 class=\"mat-h4\">{{s.data.title}}</h4>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding:8px}.element{display:flex;flex-direction:column;align-items:center;flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i12.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }] });
+CubeParallelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeParallelComponent, selector: "bizdoc-cube-parallel", inputs: { filters: "filters", xAxis: "xAxis", series: "series", indices: "indices", cube: "cube", size: "size", chartType: "chartType", scope: "scope", palettes: "palettes" }, outputs: { onExplore: "explore" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"items.length\" class=\"row\">\r\n  <div *ngFor=\"let s of items\" class=\"element\">\r\n    <ejs-sparkline [width]='width' height='100px'\r\n                   [type]='s.chartType'\r\n                   [id]=\"s.data.name\"\r\n                   [dataSource]=\"s.data.points\"\r\n                   xName=\"name\"\r\n                   yName=\"y\" [palette]=\"s.palette\"\r\n                   [format]=\"format\"\r\n                   valueType=\"Category\"\r\n                   [enableRtl]=\"enableRtl\"\r\n                   [border]=\"s.border\"\r\n                   [fill]=\"s.fill\"\r\n                   [theme]=\"theme\"\r\n                   [axisSettings]=\"axisSettings\"\r\n                   [markerSettings]=\"s.markerSettings\"\r\n                   (pointRegionMouseClick)=\"sprklineClick(s, $event)\"\r\n                   [tooltipSettings]=\"s.tooltipSettings\">\r\n    </ejs-sparkline>\r\n    <h4 class=\"mat-h4\">{{s.data.title}}</h4>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding:8px}.element{display:flex;flex-direction:column;align-items:center;flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i13.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeParallelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-cube-parallel', template: "<div *ngIf=\"items.length\" class=\"row\">\r\n  <div *ngFor=\"let s of items\" class=\"element\">\r\n    <ejs-sparkline [width]='width' height='100px'\r\n                   [type]='s.chartType'\r\n                   [id]=\"s.data.name\"\r\n                   [dataSource]=\"s.data.points\"\r\n                   xName=\"name\"\r\n                   yName=\"y\" [palette]=\"s.palette\"\r\n                   [format]=\"format\"\r\n                   valueType=\"Category\"\r\n                   [enableRtl]=\"enableRtl\"\r\n                   [border]=\"s.border\"\r\n                   [fill]=\"s.fill\"\r\n                   [theme]=\"theme\"\r\n                   [axisSettings]=\"axisSettings\"\r\n                   [markerSettings]=\"s.markerSettings\"\r\n                   (pointRegionMouseClick)=\"sprklineClick(s, $event)\"\r\n                   [tooltipSettings]=\"s.tooltipSettings\">\r\n    </ejs-sparkline>\r\n    <h4 class=\"mat-h4\">{{s.data.title}}</h4>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding:8px}.element{display:flex;flex-direction:column;align-items:center;flex:1 1 auto}\n"] }]
@@ -27782,7 +27789,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         CubeAccumulationChartComponent, CubeChartComponent, CubePivotComponent, CubeSpreadsheetComponent, CubeGridComponent
                     ]
                 }]
-        }] });
+        }] });
+registerLicense('ORg4AjUWIQA/Gnt2VVhiQlFadVlJXGFWfVJpTGpQdk5xdV9DaVZUTWY/P1ZhSXxRdkJiXX5bdX1VRWlYVEM=');
 
 class MobileModule {
 }
@@ -29265,7 +29273,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
     }
 };
 DocumentTraceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DocumentTraceComponent, deps: [{ token: UtilityRef }, { token: SystemService }, { token: SessionService }, { token: PaneRef }, { token: PanesRouter }, { token: PromptService }, { token: TranslateService }, { token: Popup }, { token: GuideService }, { token: i0.ChangeDetectorRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-DocumentTraceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["args"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\r\n  <!-- diagram -->\r\n  <div *ngSwitchCase=\"'diagram'\" class=\"column\" fxFlex>\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      |\r\n      <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n      <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    </mat-toolbar>\r\n    <div class=\"row\" fxFlex>\r\n      <!-- timeline -->\r\n      <div class=\"timeline\" *ngIf=\"timeline?.items.length > 1\" data-help=\"timeline\">\r\n        <div *ngFor=\"let date of timeline.items; let last = last\" class=\"item\"\r\n             [class.active]=\"date.time === timeline.date\"\r\n             (click)=\"highlightTime(date.time)\" matRipple>\r\n          <div class=\"title\">\r\n            <ng-container *ngIf=\"!last || !timeline.estimate; else estimate\">\r\n              <span class=\"who\" *ngIf=\"userId\">\r\n                {{date.userId | userName | async }}\r\n              </span>\r\n              <br />\r\n              <span class=\"time\">\r\n                {{date.time | amDateFormat: 'MMM Do H:mm' }}\r\n              </span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"indicator-container\">\r\n            <div class=\"indicator\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div fxFlex #diagram dir=\"ltr\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- browse -->\r\n  <div *ngSwitchDefault fxFlex fxLayout=\"column\" fxFlexFill>\r\n    <mat-toolbar fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n    </mat-toolbar>\r\n    <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n    <!-- table -->\r\n    <mat-table fxFlex [dataSource]=\"dataSource\" matSort>\r\n      <!-- Number column -->\r\n      <ng-container matColumnDef=\"number\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n      </ng-container>\r\n\r\n      <!-- Subject column -->\r\n      <ng-container matColumnDef=\"subject\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n      </ng-container>\r\n      <!-- StateId column -->\r\n      <ng-container matColumnDef=\"stateId\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n          <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n        </mat-cell>\r\n      </ng-container>\r\n      <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n      <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\r\n               (click)=\"open(item)\">\r\n      </mat-row>\r\n    </mat-table>\r\n    <!-- range -->\r\n    <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM-dd' background=\"transparent\"\r\n                        [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\r\n                        groupBy=\"Years\" intervalType='Days'\r\n                        (changed)='rangeChanged($event)'>\r\n      <e-rangenavigator-series-collection>\r\n        <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\r\n        </e-rangenavigator-series>\r\n      </e-rangenavigator-series-collection>\r\n    </ejs-rangenavigator>\r\n  </div>\r\n</ng-container>\r\n<!-- args -->\r\n<ng-template #args>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" fxLayout=\"column\">\r\n    <mat-form-field>\r\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\r\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i12.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i12.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i12.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i1$4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] });
+DocumentTraceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["args"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\r\n  <!-- diagram -->\r\n  <div *ngSwitchCase=\"'diagram'\" class=\"column\" fxFlex>\r\n    <mat-toolbar>\r\n      <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      |\r\n      <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\r\n      <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    </mat-toolbar>\r\n    <div class=\"row\" fxFlex>\r\n      <!-- timeline -->\r\n      <div class=\"timeline\" *ngIf=\"timeline?.items.length > 1\" data-help=\"timeline\">\r\n        <div *ngFor=\"let date of timeline.items; let last = last\" class=\"item\"\r\n             [class.active]=\"date.time === timeline.date\"\r\n             (click)=\"highlightTime(date.time)\" matRipple>\r\n          <div class=\"title\">\r\n            <ng-container *ngIf=\"!last || !timeline.estimate; else estimate\">\r\n              <span class=\"who\" *ngIf=\"userId\">\r\n                {{date.userId | userName | async }}\r\n              </span>\r\n              <br />\r\n              <span class=\"time\">\r\n                {{date.time | amDateFormat: 'MMM Do H:mm' }}\r\n              </span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"indicator-container\">\r\n            <div class=\"indicator\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div fxFlex #diagram dir=\"ltr\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- browse -->\r\n  <div *ngSwitchDefault fxFlex fxLayout=\"column\" fxFlexFill>\r\n    <mat-toolbar fxLayout=\"row\">\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\r\n    </mat-toolbar>\r\n    <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n    <!-- table -->\r\n    <mat-table fxFlex [dataSource]=\"dataSource\" matSort>\r\n      <!-- Number column -->\r\n      <ng-container matColumnDef=\"number\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\r\n      </ng-container>\r\n\r\n      <!-- Subject column -->\r\n      <ng-container matColumnDef=\"subject\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\r\n      </ng-container>\r\n      <!-- StateId column -->\r\n      <ng-container matColumnDef=\"stateId\">\r\n        <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n        <mat-cell *matCellDef=\"let item\" class=\"data-column\">\r\n          <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n        </mat-cell>\r\n      </ng-container>\r\n      <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n      <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\r\n               (click)=\"open(item)\">\r\n      </mat-row>\r\n    </mat-table>\r\n    <!-- range -->\r\n    <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM-dd' background=\"transparent\"\r\n                        [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\r\n                        groupBy=\"Years\" intervalType='Days'\r\n                        (changed)='rangeChanged($event)'>\r\n      <e-rangenavigator-series-collection>\r\n        <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\r\n        </e-rangenavigator-series>\r\n      </e-rangenavigator-series-collection>\r\n    </ejs-rangenavigator>\r\n  </div>\r\n</ng-container>\r\n<!-- args -->\r\n<ng-template #args>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" fxLayout=\"column\">\r\n    <mat-form-field>\r\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\r\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n<ng-template #estimate>\r\n  {{'Estimate' | translate}}\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1$4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i13.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i13.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i13.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] });
 DocumentTraceComponent = __decorate([
     BizDoc({ selector: 'bizdoc-trace-utility' })
     /** workflow component*/
@@ -30265,7 +30273,7 @@ let ProfilerComponent = class ProfilerComponent {
     }
 };
 ProfilerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ProfilerComponent, deps: [{ token: PromptService }, { token: UtilityRef }, { token: SessionService }, { token: i2$3.MatDialog }, { token: DocumentInfo }, { token: i2$4.MediaObserver }, { token: ChatInfo }, { token: GuideService }, { token: PanesRouter }, { token: i0.ChangeDetectorRef }, { token: PaneRef }, { token: TranslateService }, { token: AccountService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ProfilerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ProfilerComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["activity"], descendants: true }, { propertyName: "chartElement", first: true, predicate: ["activity"], descendants: true, read: ElementRef }, { propertyName: "assignTpl", first: true, predicate: ["assignTpl"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                    (optionSelected)=\"change($event)\">\r\n    <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n      <span>{{u.name}}</span>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n</mat-toolbar>\r\n<div *ngIf=\"data\" fxLayout=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card fxFlex>\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        <span>{{data.info.name}}</span>\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card fxFlex data-help=\"activity\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Activity' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\r\n        <e-series-collection>\r\n        </e-series-collection>\r\n      </ejs-chart>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- pending -->\r\n  <mat-card fxFlex data-help=\"pending\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Pending' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-table\" *ngIf=\"data.pending.length; else none\">\r\n        <thead>\r\n          <tr class=\"mat-row\">\r\n            <td class=\"mat-header-cell\"></td>\r\n            <td class=\"mat-header-cell\"></td>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let r of data.pending\" class=\"mat-row\">\r\n            <td class=\"mat-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\r\n            <td class=\"mat-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- positions -->\r\n  <mat-card fxFlex data-help=\"positions\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Positions' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-table\" *ngIf=\"data.positions.length; else none\">\r\n        <tr *ngFor=\"let p of data.positions\" class=\"mat-row\">\r\n          <td class=\"mat-cell\">{{p.value }}</td>\r\n          <td class=\"mat-cell\">{{p.role | role}}</td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\r\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form autocomplete=\"off\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\r\n          <mat-option *ngFor=\"let u of assignable$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #none>\r\n  <span class=\"mat-body-2\">{{'None' | translate }}</span>\r\n</ng-template>\r\n", styles: [":host{min-width:560px;display:block}.mat-card{margin:5px}.mat-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-table{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i12.ChartComponent, selector: "ejs-chart", inputs: ["allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i12.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { kind: "component", type: i8$5.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i8$5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$5.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i8$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i8$5.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: DifferencePipe, name: "amDifference" }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: RolePipe, name: "role" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ProfilerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ProfilerComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["activity"], descendants: true }, { propertyName: "chartElement", first: true, predicate: ["activity"], descendants: true, read: ElementRef }, { propertyName: "assignTpl", first: true, predicate: ["assignTpl"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <mat-icon (click)=\"null\" class=\"mat-icon-rtl-mirror\">search</mat-icon>\r\n  <input matInput type=\"search\" [matAutocomplete]=\"auto\" [formControl]=\"search\" data-help=\"search\" width=\"20\" />\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                    (optionSelected)=\"change($event)\">\r\n    <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n      <span>{{u.name}}</span>\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n</mat-toolbar>\r\n<div *ngIf=\"data\" fxLayout=\"row wrap\">\r\n  <!-- info -->\r\n  <mat-card fxFlex>\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        <span>{{data.info.name}}</span>\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <br />\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <button mat-icon-button (click)=\"chat()\" [bizdocTooltip]=\"'Chat' | translate\" [disabled]=\"!data\"><mat-icon>chat</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"settings()\" [bizdocTooltip]=\"'Settings' | translate\" [disabled]=\"!data\" data-help=\"settings\"><mat-icon>settings</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n  <mat-card fxFlex data-help=\"activity\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Activity' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <ejs-chart #activity [primaryXAxis]=\"primaryXAxis\" [primaryYAxis]=\"primaryYAxis\" [zoomSettings]=\"zoomSettings\" [tooltip]='tooltip' (tooltipRender)=\"tooltipRender($event)\" [palettes]=\"palettes\" background=\"transparent\" [theme]='theme' [border]=\"border\" (pointClick)=\"pointClick($event)\">\r\n        <e-series-collection>\r\n        </e-series-collection>\r\n      </ejs-chart>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- pending -->\r\n  <mat-card fxFlex data-help=\"pending\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Pending' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-table\" *ngIf=\"data.pending.length; else none\">\r\n        <thead>\r\n          <tr class=\"mat-row\">\r\n            <td class=\"mat-header-cell\"></td>\r\n            <td class=\"mat-header-cell\"></td>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let r of data.pending\" class=\"mat-row\">\r\n            <td class=\"mat-cell\"><a (click)=\"trace(r.id)\">{{r.number}}</a></td>\r\n            <td class=\"mat-cell\">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <!-- positions -->\r\n  <mat-card fxFlex data-help=\"positions\">\r\n    <mat-card-header>\r\n      <mat-card-title>\r\n        {{'Positions' | translate}}\r\n      </mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content>\r\n      <table class=\"mat-table\" *ngIf=\"data.positions.length; else none\">\r\n        <tr *ngFor=\"let p of data.positions\" class=\"mat-row\">\r\n          <td class=\"mat-cell\">{{p.value }}</td>\r\n          <td class=\"mat-cell\">{{p.role | role}}</td>\r\n          <td class=\"mat-cell\">\r\n            <button mat-icon-button (click)=\"reassign(p)\" [bizdocTooltip]=\"'Reassign' | translate\"><mat-icon>swap_horiz</mat-icon></button>\r\n          </td>\r\n        </tr>\r\n      </table>\r\n    </mat-card-content>\r\n    <mat-card-actions>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"reassign()\" [bizdocTooltip]=\"'ReassignAll' | translate\" [disabled]=\"!data || !data.positions.length\" data-help=\"reassign\"><mat-icon>swap_horiz</mat-icon></button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</div>\r\n<!-- assign dialog -->\r\n<ng-template #assignTpl>\r\n  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n  <mat-dialog-content>\r\n    <form autocomplete=\"off\" fxLayout=\"column\">\r\n      <mat-form-field>\r\n        <mat-select placeholder=\"{{'Who' | translate}}\" [formControl]=\"who\" required>\r\n          <mat-option *ngFor=\"let u of assignable$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"who.value\" color=\"primary\" [disabled]=\"!who.valid\">{{'OK' | translate}}</button>\r\n    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n  </mat-dialog-actions>\r\n</ng-template>\r\n<ng-template #none>\r\n  <span class=\"mat-body-2\">{{'None' | translate }}</span>\r\n</ng-template>\r\n", styles: [":host{min-width:560px;display:block}.mat-card{margin:5px}.mat-card:hover{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.mat-table{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i13.ChartComponent, selector: "ejs-chart", inputs: ["allowExport", "allowMultiSelection", "annotations", "axes", "background", "backgroundImage", "border", "chartArea", "columns", "crosshair", "currencyCode", "dataSource", "description", "enableAnimation", "enableAutoIntervalOnBothAxis", "enableCanvas", "enableExport", "enablePersistence", "enableRtl", "enableSideBySidePlacement", "height", "highlightColor", "highlightMode", "highlightPattern", "indicators", "isMultiSelect", "isTransposed", "legendSettings", "locale", "margin", "palettes", "primaryXAxis", "primaryYAxis", "rangeColorSettings", "rows", "selectedDataIndexes", "selectionMode", "selectionPattern", "series", "subTitle", "subTitleStyle", "tabIndex", "theme", "title", "titleStyle", "tooltip", "useGroupingSeparator", "width", "zoomSettings"], outputs: ["afterExport", "animationComplete", "annotationRender", "axisLabelClick", "axisLabelRender", "axisMultiLabelRender", "axisRangeCalculated", "beforeExport", "beforePrint", "beforeResize", "chartDoubleClick", "chartMouseClick", "chartMouseDown", "chartMouseLeave", "chartMouseMove", "chartMouseUp", "drag", "dragComplete", "dragEnd", "dragStart", "legendClick", "legendRender", "load", "loaded", "multiLevelLabelClick", "onZooming", "pointClick", "pointDoubleClick", "pointMove", "pointRender", "resized", "scrollChanged", "scrollEnd", "scrollStart", "selectionComplete", "seriesRender", "sharedTooltipRender", "textRender", "tooltipRender", "zoomComplete", "dataSourceChange"] }, { kind: "directive", type: i13.SeriesCollectionDirective, selector: "ej-chart>e-series-collection" }, { kind: "component", type: i8$5.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i8$5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$5.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i8$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i8$5.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: DifferencePipe, name: "amDifference" }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: RolePipe, name: "role" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ProfilerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-user-profiler' })
     /** component*/
@@ -30293,51 +30301,54 @@ class DesignerRef {
     constructor(_designer, _element) {
         this._designer = _designer;
         this._element = _element;
+        this._lock$ = new Subject();
     }
     get designer() { return this._designer; }
     get element() { return this._element; }
     get options() { return this._element.options; }
+    get lockChange() { return this._lock$.asObservable(); }
 }
 /** */
-class DesignerElementComponent {
+class DesignerElementComponentBase {
     constructor(_fb, _ref) {
         this._fb = _fb;
         this._ref = _ref;
     }
     get options() { return this.model.options; }
-    ngOnInit() {
-    }
     drop(event, collection) {
         const element = collection.at(event.previousIndex);
         collection.removeAt(event.previousIndex);
         collection.insert(event.currentIndex, element);
     }
 }
-DesignerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerElementComponent, deps: [{ token: i2.FormBuilder }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Directive });
-DesignerElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: DesignerElementComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerElementComponent, decorators: [{
+DesignerElementComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerElementComponentBase, deps: [{ token: i2.FormBuilder }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Directive });
+DesignerElementComponentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: DesignerElementComponentBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerElementComponentBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
                 }] }]; } });
-class DesignerTypeElementComponent extends DesignerElementComponent {
-    setPrivilieges(obj) {
-        this.form.get('privileges').patchValue(obj);
+class DesignerTypeElementComponent extends DesignerElementComponentBase {
+    _arrayOf(val) {
+        if (!val)
+            return [];
+        if (isString(val))
+            return [val];
+        return val;
     }
-    setOptions(obj) {
-        this.form.get('options').patchValue(obj);
+    disable(...names) {
+        names.forEach(n => this.form.get(n).disable({ emitEvent: false }));
     }
-    ngOnInit() {
-        if (this.editMode) {
-            const options = this._fb.group({});
-            this.model.arguments?.forEach(a => options.addControl(a.name, this._fb.control(null, a.required ? Validators.required : null)));
-            this.form.addControl('options', options, { emitEvent: false });
-            this.model.privileges && this.form.addControl('privileges', this._fb.group({
-                rule: null,
-                roles: this._fb.control([]),
-            }), { emitEvent: false });
-        }
+    enable(...names) {
+        names.forEach(n => this.form.get(n).enable({ emitEvent: false }));
+    }
+    unlockResource() { }
+    lockResource(resources) {
+        if (this.model.resource)
+            this.disable(...resources);
+        else
+            this.enable(...resources);
     }
 }
 DesignerTypeElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerTypeElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -30357,7 +30368,7 @@ function programName(name) {
         replace(NON_NAME_CHAR, '_');
 }
 /** */
-class DesignerCubeElementComponent extends DesignerElementComponent {
+class DesignerCubeElementComponent extends DesignerElementComponentBase {
     constructor(fb, ref) {
         super(fb, ref);
         this.cubes = ref.designer.cubes;
@@ -30408,66 +30419,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                     args: [DesignerRef]
                 }] }]; } });
 
+const SVG = {
+    "Azure": `<svg width="34" height="34" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="e399c19f-b68f-429d-b176-18c2117ff73c" x1="-1032.172" x2="-1059.213" y1="145.312" y2="65.426" gradientTransform="matrix(1 0 0 -1 1075 158)" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#114a8b"/>
+            <stop offset="1" stop-color="#0669bc"/>
+        </linearGradient>
+        <linearGradient id="ac2a6fc2-ca48-4327-9a3c-d4dcc3256e15" x1="-1023.725" x2="-1029.98" y1="108.083" y2="105.968" gradientTransform="matrix(1 0 0 -1 1075 158)" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-opacity=".3"/>
+            <stop offset=".071" stop-opacity=".2"/>
+            <stop offset=".321" stop-opacity=".1"/>
+            <stop offset=".623" stop-opacity=".05"/>
+            <stop offset="1" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="a7fee970-a784-4bb1-af8d-63d18e5f7db9" x1="-1027.165" x2="-997.482" y1="147.642" y2="68.561" gradientTransform="matrix(1 0 0 -1 1075 158)" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#3ccbf4"/>
+            <stop offset="1" stop-color="#2892df"/>
+        </linearGradient>
+    </defs>
+    <path fill="url(#e399c19f-b68f-429d-b176-18c2117ff73c)" d="M33.338 6.544h26.038l-27.03 80.087a4.152 4.152 0 0 1-3.933 2.824H8.149a4.145 4.145 0 0 1-3.928-5.47L29.404 9.368a4.152 4.152 0 0 1 3.934-2.825z"/>
+    <path fill="#0078d4" d="M71.175 60.261h-41.29a1.911 1.911 0 0 0-1.305 3.309l26.532 24.764a4.171 4.171 0 0 0 2.846 1.121h23.38z"/>
+    <path fill="url(#ac2a6fc2-ca48-4327-9a3c-d4dcc3256e15)" d="M33.338 6.544a4.118 4.118 0 0 0-3.943 2.879L4.252 83.917a4.14 4.14 0 0 0 3.908 5.538h20.787a4.443 4.443 0 0 0 3.41-2.9l5.014-14.777 17.91 16.705a4.237 4.237 0 0 0 2.666.972H81.24L71.024 60.261l-29.781.007L59.47 6.544z"/>
+    <path fill="url(#a7fee970-a784-4bb1-af8d-63d18e5f7db9)" d="M66.595 9.364a4.145 4.145 0 0 0-3.928-2.82H33.648a4.146 4.146 0 0 1 3.928 2.82l25.184 74.62a4.146 4.146 0 0 1-3.928 5.472h29.02a4.146 4.146 0 0 0 3.927-5.472z"/>
+</svg>`,
+    'SAP': '<svg xmlns="http://www.w3.org/2000/svg" width="92" height="34" viewBox="0 0 92 45"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="45.483" x2="45.483" y2="45.001"><stop offset="0" stop-color="#00AEEF"/><stop offset=".212" stop-color="#0097DC"/><stop offset=".519" stop-color="#007CC5"/><stop offset=".792" stop-color="#006CB8"/><stop offset="1" stop-color="#0066B3"/></linearGradient><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#a)" d="M0 45h45.974L90.966 0H0v45"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M53.984 9H45l.03 21.13-7.823-21.137H29.45l-6.678 17.653c-.71-4.492-5.354-6.042-9.008-7.203-2.413-.775-4.974-1.915-4.948-3.175.02-1.034 1.37-1.993 4.053-1.85 1.8.097 3.39.242 6.553 1.77l3.11-5.42C19.648 9.3 15.66 8.373 12.39 8.37h-.02c-3.813 0-6.988 1.235-8.956 3.27-1.372 1.42-2.112 3.226-2.142 5.223-.05 2.748.957 4.696 3.073 6.253 1.788 1.31 4.075 2.16 6.09 2.784 2.485.77 4.515 1.44 4.49 2.866-.02.52-.216 1.006-.59 1.398-.62.64-1.57.88-2.885.906-2.537.054-4.417-.345-7.413-2.116L1.27 34.444C4.263 36.146 7.44 37 11.05 37l.812-.006c3.142-.057 5.692-.81 7.718-2.44.116-.093.22-.187.328-.282l-.34 1.752 7.58-.024 1.36-3.482c1.43.488 3.056.758 4.782.758 1.682 0 3.264-.256 4.667-.716l.948 3.44 13.6.013.033-7.938h2.894c6.995 0 11.13-3.56 11.13-9.53C66.56 11.896 62.54 9 53.984 9zM33.29 27.062c-1.045 0-2.025-.182-2.868-.502l2.836-8.955h.055l2.79 8.98c-.84.3-1.797.477-2.814.477zm21.22-5.145h-1.974V14.7h1.975c2.63 0 4.73.876 4.73 3.562-.002 2.78-2.1 3.655-4.73 3.655"/><path fill="none" d="M0 0h92v45H0z"/></svg>',
+    'Mfg': '<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 316 316" xmlns:v="https://vecta.io/nano"><path fill="#5987c6" d="M216 317H1V1h316v316H216m-77.47-177.333l4.031-4.007 5.991-5.99 3.987-4.054c2.766-2.149 5.532-4.299 8.657-5.913 1.578 1.47 3.157 2.941 5.068 4.914.885.828 1.769 1.656 3.015 3.004 1.237 1.14 2.475 2.28 3.967 4.001 1.633 2.588 3.698 2.278 5.257.252 3.314-4.309 7.455-8.449 9.204-13.386 2.736-7.719 3.77-16.042 6.079-23.639 12.637 18.805 10.656 36.859-3.186 54.454l22.712 22.682c5.602 5.598 9.119 5.468 13.429-1.412 1.839-2.935 3.026-6.805 3.057-10.263l.112-80.96c-.026-10.421-6.832-17.24-17.248-17.258l-105.95-.001c-10.216.017-16.88 6.555-17.252 16.776-.176 4.825-.047 9.661-.047 14.492l-.019 65.969c-.019 7.052 2.351 12.759 8.745 16.191 1.185.636 3.601.866 4.35.144l26.872-26.622c-1.687-2.624-3.11-4.838-3.698-7.045 1.629.236 3.373.179 4.864.766 3.433 1.353 5.741.235 8.003-3.095m-28.629 104.622c16.81-12.977 13.985-34.878-5.713-42.848-11.526-4.664-23.187-4.121-34.385 1.248-8.953 4.293-14.261 11.465-14.312 21.649s5.271 17.245 14.093 21.813c7.806 4.042 16.217 4.961 24.775 3.813 3.487-.468 6.208.096 8.525 2.601 4.52 4.887 10.052 3.331 16.678 2.999-3.925-3.14-6.966-5.43-9.796-7.957-.557-.497-.3-1.905.135-3.317m152.202-15.717c1.905-14.393-7.117-26.47-22.892-28.378-10.464-1.266-21.205-.24-32.11-.24v49.662c9.41 0 18.436.62 27.343-.147 12.945-1.114 23.348-6.565 27.659-20.897m-97.214-24.007l-4.715-7.141-31.908 52.248c4.683-.513 9.413 2.295 11.215-2.513 3.753-10.017 11.014-12.053 20.44-10.681 1.957.285 4.046.342 5.979-.012 7.088-1.299 11.85 1.42 14.482 7.994 2.41 6.019 7.084 5.836 13.035 4.783l-28.529-44.677z"/><path fill="#fdfefe" d="M124.828 141.989l4.533 7.052-26.872 26.622c-.749.722-3.164.493-4.35-.144-6.393-3.433-8.763-9.139-8.745-16.191l.019-65.969c0-4.831-.129-9.667.047-14.492.373-10.222 7.036-16.759 17.252-16.776l105.95.001c10.416.018 17.221 6.837 17.248 17.258l-.112 80.96c-.031 3.458-1.218 7.328-3.057 10.263-4.309 6.88-7.827 7.01-13.429 1.412L190.6 149.302c13.841-17.595 15.823-35.648 2.791-54.982l-7.352-7.362c-2.502-1.664-4.808-3.078-7.363-4.678-2.051-.857-3.854-1.531-6.017-2.392-4.116-.716-7.872-1.243-12.052-1.83-3.155.271-5.887.6-8.954.932-1.191.256-2.047.509-3.277.793-8.513 2.465-15.507 6.575-20.703 13.946l-3.999 5.419c-.742 1.915-1.234 3.605-2.041 5.539-1.026 3.947-1.738 7.651-2.494 11.762-.105 1.773-.165 3.139-.523 4.742.424 4.07 1.145 7.903 1.951 12.112 1.476 3.147 2.868 5.917 4.261 8.687z"/><path d="M109.624 244.501c-.158 1.2-.415 2.608.141 3.105 2.83 2.527 5.871 4.818 9.796 7.957-6.626.332-12.158 1.889-16.678-2.999-2.317-2.505-5.038-3.068-8.525-2.601-8.558 1.148-16.969.229-24.775-3.813-8.822-4.568-14.144-11.625-14.093-21.813s5.359-17.356 14.312-21.649c11.198-5.369 22.859-5.912 34.385-1.248 19.698 7.97 22.522 29.87 5.436 43.06m-43.211-11.824c5.503 11.646 25.725 14.234 36.707 7.078 11.682-7.612 11.708-23.151-.138-30.585-7.671-4.814-16.021-5.134-24.472-2.448-11.458 3.643-16.387 13.817-12.098 25.954zm195.62-3.707c-4.241 13.935-14.644 19.386-27.589 20.501-8.907.767-17.933.147-27.343.147v-49.662c10.906 0 21.646-1.026 32.11.24 15.774 1.908 24.797 13.985 22.822 28.774m-31.807-23.207h-15.008l.076 34.867c.008.802 1.108 1.594 2.634 2.477 3.321.009 6.672.302 9.956-.04 4.744-.493 9.672-.788 14.104-2.352 7.419-2.618 11.717-9.693 11.457-17.028-.263-7.411-4.566-13.29-12.235-15.873-3.241-1.091-6.792-1.259-10.985-2.052z" fill="#fafbfd"/><path fill="#f8fafc" d="M165.072 204.877l28.345 44.366c-5.951 1.053-10.625 1.236-13.035-4.783-2.632-6.574-7.394-9.293-14.482-7.994-1.933.354-4.022.297-5.979.012-9.427-1.372-16.687.664-20.44 10.681-1.802 4.808-6.532 2-11.215 2.513l31.908-52.248 4.898 7.453m3.625 25.011c.181-.854.804-1.972.475-2.52-2.716-4.53-5.608-8.954-8.915-14.146l-9.939 16.701 18.379-.035z"/><path fill="#a9bbe1" d="M151.989 78.988l8.714-.61 3.468 4.295c10.255 11.79 8.907 26.675-3.335 36.494-2.766 2.149-5.532 4.299-8.914 6.499-5.6-.769-10.768-1.013-15.527-2.538-8.265-2.648-14.695-11.515-14.448-18.686.493-1.69.985-3.381 1.919-4.963.804 1.722 1.144 3.341 1.535 4.948 2.311 9.518 11.655 16.819 21.133 16.525 9.971-.309 18.447-7.468 20.434-17.26 2.198-10.826-3.58-20.354-14.98-24.705z"/><path fill="#98b0db" d="M161.016 119.435c12.063-10.087 13.411-24.972 3.156-36.762-1.07-1.23-1.971-2.607-3.045-4.236 3.661.208 7.417.735 11.562 1.822 1.073 2.421 1.679 4.316 2.456 6.139 5.914 13.884 2.482 27.987-9.214 37.715l-4.915-4.678z"/><path fill="#678fca" d="M186.235 87.207l6.879 6.879c-1.637 8.36-2.671 16.683-5.407 24.402-1.75 4.937-5.89 9.077-9.204 13.386-1.558 2.026-3.624 2.336-5.206-.832 6.746-8.411 12.446-16.82 13.194-27.454.382-5.427-.141-10.918-.256-16.381z"/><path fill="#7598cf" d="M186.039 86.958c.31 5.711.833 11.202.451 16.63-.748 10.634-6.448 19.043-13.321 27.163-1.416-.851-2.653-1.991-3.788-3.591 10.391-9.621 14.386-20.958 11.805-34.524-.649-3.41-1.502-6.782-2.261-10.171l7.114 4.493z"/><path d="M118.914 120.953c.06-1.365.12-2.731.568-4.465 2.366 1.037 4.258 2.59 6.341 3.818 4.618 2.723 9.22 5.52 14.054 7.81 2.469 1.17 5.424 1.313 8.159 1.921-1.825 1.874-3.65 3.748-6.092 5.659-2.659-.583-4.781-1.019-6.731-1.855-6.578-2.819-13.754-4.948-16.299-12.889zm59.762-38.672c1.008 3.574 1.861 6.945 2.509 10.355 2.581 13.566-1.414 24.903-11.985 34.264-1.168-.628-2.052-1.456-3.103-2.535 11.529-9.98 14.961-24.083 9.047-37.967-.776-1.823-1.382-3.718-2.096-5.95 1.774.302 3.577.975 5.628 1.833z" fill="#83a1d4"/><path fill="#98b0db" d="M148.294 129.853c-2.993-.423-5.948-.567-8.417-1.737-4.834-2.291-9.436-5.088-14.054-7.81-2.083-1.228-3.975-2.781-6.296-4.226.369-3.742 1.081-7.446 2.106-11.393.067 6.927 6.497 15.794 14.762 18.442 4.759 1.525 9.927 1.769 15.244 2.718-.807 1.36-1.948 2.591-3.346 4.006z"/><path fill="#7598cf" d="M118.617 121.19c2.843 7.703 10.019 9.832 16.597 12.651 1.95.836 4.072 1.272 6.46 2.038-.818 1.36-1.981 2.574-3.697 3.761-6.2-2.256-11.847-4.485-17.493-6.715-.721-3.832-1.443-7.665-1.866-11.735z"/><path fill="#678fca" d="M120.567 133.302c5.562 1.853 11.209 4.082 17.145 6.515-1.445 3.18-3.752 4.298-7.186 2.945-1.491-.587-3.235-.53-5.281-.769-1.809-2.773-3.201-5.544-4.678-8.69z"/><path fill="#c3cfea" d="M127.94 93.496c4.929-7.138 11.924-11.248 20.669-13.425 2.406 1.432 4.174 2.658 6.01 3.771 7.596 4.603 10.968 12.457 8.739 20.456-2.223 7.979-9.499 13.565-17.31 13.291-8.557-.3-15.316-5.906-17.234-14.678-.668-3.056-.603-6.272-.873-9.415m28.038-4.008c-5.92-4.925-15.687-4.683-20.351.505-4.944 5.5-4.696 14.06.565 19.502 5.366 5.551 13.493 5.768 19.278.516 5.995-5.444 6.418-13.527.508-20.523z"/><path fill="#b5c4e5" d="M127.674 93.729c.536 2.909.471 6.125 1.139 9.181 1.918 8.772 8.677 14.378 17.234 14.678 7.812.274 15.087-5.312 17.31-13.291 2.229-7.999-1.143-15.853-8.739-20.456-1.836-1.113-3.604-2.339-5.635-3.8.624-.541 1.479-.795 2.67-1.051 11.735 4.349 17.513 13.877 15.315 24.703-1.988 9.791-10.463 16.95-20.434 17.26-9.479.294-18.823-7.007-21.133-16.525-.39-1.607-.73-3.226-1.286-5.172.969-1.986 2.13-3.639 3.558-5.527z"/><path fill="#5b88c7" d="M66.244 232.314c-4.12-11.774.809-21.949 12.267-25.591 8.451-2.687 16.801-2.366 24.472 2.448 11.846 7.434 11.82 22.973.138 30.585-10.982 7.156-31.205 4.568-36.877-7.441z"/><path fill="#5987c6" d="M231.007 205.966c3.41.588 6.962.756 10.202 1.847 7.669 2.583 11.972 8.462 12.235 15.873.26 7.335-4.037 14.41-11.457 17.028-4.432 1.564-9.36 1.859-14.104 2.352-3.285.342-6.635.049-10.457-.472-.514-10.475-.452-20.438-.579-30.399-.048-3.815 1.51-5.388 5.334-5.366 2.94.017 5.883-.553 8.825-.862z"/><path fill="#7598cf" d="M230.616 205.864c-2.551.411-5.494.982-8.434.965-3.824-.022-5.382 1.551-5.334 5.366l.112 30.356c-.558-.328-1.658-1.119-1.666-1.922l-.076-34.867 15.399.102z"/><path fill="#5b88c7" d="M168.268 229.906l-17.95.018 9.939-16.701 8.915 14.146c.329.548-.293 1.666-.904 2.538z"/><path fill="#d1daef" d="M156.245 89.755c5.642 6.728 5.219 14.811-.776 20.255-5.784 5.252-13.912 5.035-19.278-.516-5.26-5.442-5.508-14.002-.565-19.502 4.663-5.188 14.431-5.43 20.619-.237M141.22 109.5c7.52 2.499 13.571.015 15.388-6.317 1.959-6.827-1.127-12.474-7.878-14.415-4.788-1.376-9.851 1.111-12.38 6.082-2.637 5.182-1.152 10.277 4.869 14.65z"/><path fill="#dde4f3" d="M140.873 109.339c-5.674-4.212-7.159-9.307-4.523-14.489 2.529-4.971 7.592-7.458 12.38-6.082 6.751 1.941 9.837 7.588 7.878 14.415-1.817 6.331-7.869 8.816-15.735 6.156m-.335-13.291c-2.689 3.582-1.067 6.858 1.949 8.42 2.184 1.131 6.138 1.123 8.042-.196 1.553-1.076 2.432-5.544 1.441-7.24-1.166-1.996-4.583-2.944-7.211-3.679-.964-.27-2.462 1.368-4.222 2.695z"/><path fill="#f8fafc" d="M140.791 95.768c1.507-1.047 3.005-2.685 3.969-2.415 2.628.735 6.045 1.683 7.211 3.679.991 1.697.112 6.165-1.441 7.24-1.904 1.319-5.858 1.327-8.042.196-3.016-1.562-4.639-4.839-1.697-8.7m3.542-.034c-2.887 3.592-2.602 7.036.84 7.763 1.378.291 3.525-.233 4.408-1.212s1.371-3.706.71-4.391c-1.257-1.303-3.457-1.696-5.958-2.161z"/><path fill="#fdfefe" d="M144.68 95.581c2.155.618 4.354 1.011 5.612 2.313.661.685.174 3.412-.71 4.391s-3.03 1.503-4.408 1.212c-3.443-.727-3.727-4.171-.494-7.916z"/></svg>'
+};
 /**/
 class DesignerItemComponent {
-    constructor(_injector, _pane, _fb, _cfr) {
+    constructor(_injector, _pane, _fb, _service, _cfr, _element) {
         this._injector = _injector;
         this._pane = _pane;
         this._fb = _fb;
+        this._service = _service;
         this._cfr = _cfr;
+        this._element = _element;
+        this.svg = SVG;
         if (_pane && _pane.dialog) {
-            const { designer, editMode, isNew, model, template } = _pane.data;
-            this._model = model;
-            this._isNew = isNew;
+            const { designer, mode, model, template } = _pane.data;
             Object.assign(this, {
-                designer, editMode,
+                designer, mode,
                 model: JSON.parse(JSON.stringify(model)),
                 template
             });
         }
     }
+    ngAfterViewInit() {
+        this.mode === 'edit' &&
+            this._element.nativeElement.querySelector('input')?.focus();
+    }
     save() {
-        if (this._isNew) {
-        }
-        Object.assign(this._model, this.model);
+        this.change.emit(this.model);
         this._pane.close();
     }
     ngOnInit() {
         if (!this.model.options)
             this.model.options = {};
+        this._ref = new DesignerRef(this.designer, this.model);
         const injector = Injector.create([{
-                provide: DesignerRef, useValue: new DesignerRef(this.designer, this.model)
+                provide: DesignerRef, useValue: this._ref
             }], this._injector);
         let typeinstance;
         let factory = this._cfr.resolve(this.template);
         let cRef = this._container.createComponent(factory, 0, injector);
         cRef.instance.model = this.model;
-        cRef.instance.editMode = this.editMode;
+        cRef.instance.mode = this.mode;
         typeinstance = cRef.instance;
         let elementinstance;
         if (this.model.template) {
             let factory = this._cfr.resolve(this.model.template);
             let cRef = this._econtainer.createComponent(factory, 0, injector);
             cRef.instance.model = this.model;
-            cRef.instance.editMode = this.editMode;
+            cRef.instance.mode = this.mode;
             elementinstance = cRef.instance;
         }
-        if (this.editMode) {
+        if (this.mode === 'edit') {
             this.change = new EventEmitter();
             this.form = this._fb.group({
                 name: this._fb.control(null, Validators.required),
                 title: this._fb.control(null, Validators.required),
             });
+            this.model.resource && this.form.get('title').disable();
             this._destroy = new Subject();
             const { name, title } = this.form.controls;
             !this.model.draft && name.disable();
-            this.model.draft && title.valueChanges.pipe(takeUntil$1(this._destroy)).subscribe((t) => t && name.setValue(programName(t)));
+            this.model.draft && title.valueChanges.pipe(takeUntil$1(this._destroy), debounceTime$1(100)).subscribe((t) => t && name.setValue(programName(t)));
+            if (this.model.privileges) {
+                this.form.addControl('privileges', this._fb.group({
+                    rule: null,
+                    roles: this._fb.control(null),
+                }), { emitEvent: false });
+                this._service.roles().subscribe(r => {
+                    this.roles = r.concat(this.designer.roles.
+                        filter(r => !r.disabled).
+                        map(r => ({
+                        name: r.name,
+                        title: r.title,
+                        dataType: r.dataType
+                    })));
+                });
+            }
+            if (!elementinstance && this.model.arguments?.length) {
+                const options = this._fb.group({});
+                this.model.arguments?.forEach(a => options.addControl(a.name, this._fb.control(null, this._validations(a))));
+                this.form.addControl('options', options, { emitEvent: false });
+            }
             this.form.patchValue(this.model);
-            this.form.valueChanges.pipe(takeUntil$1(this._destroy)).
+            this.form.valueChanges.pipe(takeUntil$1(this._destroy), debounceTime$1(100)).
                 subscribe(v => {
                 Object.assign(this.model, v);
                 this.dirty = true;
-                this.change.emit();
             });
             let state, typestate, elementstate;
             function validate() {
@@ -30478,30 +30540,74 @@ class DesignerItemComponent {
                 this.valid = validate();
             });
             typeinstance.form.patchValue(this.model);
-            typeinstance.form.statusChanges.pipe(takeUntil$1(this._destroy)).subscribe(s => {
+            typeinstance.form.statusChanges.pipe(takeUntil$1(this._destroy), debounceTime$1(100)).subscribe(s => {
                 typestate = s;
                 this.valid = validate();
             });
-            typeinstance.form.valueChanges.pipe(takeUntil$1(this._destroy)).subscribe(v => {
+            typeinstance.form.valueChanges.pipe(takeUntil$1(this._destroy), debounceTime$1(100)).subscribe(v => {
                 Object.assign(this.model, v);
                 this.dirty = true;
-                this.change.emit();
             });
             if (elementinstance) {
                 elementinstance.form.patchValue(this.model.options);
-                elementinstance.form.valueChanges.pipe(takeUntil$1(this._destroy)).
+                elementinstance.form.valueChanges.pipe(takeUntil$1(this._destroy), debounceTime$1(100)).
                     subscribe(v => this.assignargs(v));
-                elementinstance.form.statusChanges.pipe(takeUntil$1(this._destroy)).subscribe(s => {
+                elementinstance.form.statusChanges.pipe(takeUntil$1(this._destroy), debounceTime$1(100)).subscribe(s => {
                     typestate = s;
                     this.valid = validate();
                 });
             }
         }
     }
-    assignargs(evt) {
-        Object.assign(this.model.options, evt);
+    _validations(field) {
+        const validators = [];
+        field.validations.forEach(v => {
+            switch (v.type) {
+                case ValidationType.Required:
+                    if (field.type === FieldType.Checkbox || field.type === FieldType.Switch)
+                        validators.push(Validators.requiredTrue);
+                    else
+                        validators.push(Validators.required);
+                    break;
+                case ValidationType.Pattern:
+                    validators.push(Validators.pattern(field.pattern));
+                    break;
+                case ValidationType.Min:
+                    validators.push(Validators.min(field.min));
+                    break;
+                case ValidationType.Max:
+                    validators.push(Validators.max(field.max));
+                    break;
+                case ValidationType.MinLength:
+                    validators.push(Validators.minLength(field.min));
+                    break;
+                case ValidationType.MaxLength:
+                    validators.push(Validators.maxLength(field.max));
+                    break;
+                case ValidationType.Email:
+                    validators.push(Validators.email);
+                    break;
+                case ValidationType.Range:
+                    validators.push(Validators.min(field.min));
+                    validators.push(Validators.max(field.max));
+                    break;
+            }
+        });
+        return validators;
+    }
+    setOptions(obj) {
+        this.form.get('options').patchValue(obj);
+    }
+    unlock(evt) {
+        if (evt.srcElement.tagName !== 'A')
+            return;
+        this.model.resource = null;
+        this.form.get('title').enable();
+        this._ref._lock$.next(false);
+    }
+    assignargs(args) {
+        Object.assign(this.model.options, args);
         this.dirty = true;
-        this.change.emit();
     }
     /**
      * Ctrl-s save
@@ -30517,14 +30623,14 @@ class DesignerItemComponent {
         this._destroy?.next();
     }
 }
-DesignerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerItemComponent, deps: [{ token: i0.Injector }, { token: PaneRef, optional: true }, { token: i2.FormBuilder }, { token: BizDocComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-DesignerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { template: "template", model: "model", designer: "designer" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_econtainer", first: true, predicate: ["econtainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <mat-toolbar>\r\n    <button mat-icon-button (click)=\"save()\" [disabled]=\"!valid\"><mat-icon>save</mat-icon></button>\r\n  </mat-toolbar>\r\n  <span class=\"help\">{{model.help}}</span>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"row\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n\r\n<ng-template #info>\r\n  <span class=\"family\">{{model.family}}</span>\r\n</ng-template>\r\n\r\n<ng-container #econtainer></ng-container>\r\n<ng-container #container></ng-container>\r\n\r\n", styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+DesignerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerItemComponent, deps: [{ token: i0.Injector }, { token: PaneRef, optional: true }, { token: i2.FormBuilder }, { token: SystemService }, { token: BizDocComponentFactoryResolver }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DesignerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: { template: "template", model: "model", designer: "designer" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_econtainer", first: true, predicate: ["econtainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <mat-toolbar>\r\n    <button mat-icon-button (click)=\"save()\" [disabled]=\"!valid\"><mat-icon>save</mat-icon></button>\r\n  </mat-toolbar>\r\n  <p class=\"help\">{{model.help}}</p>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"row\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required #title />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n  <p *ngIf=\"model.resource\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'Unlock'|translate\"></p>\r\n</ng-container>\r\n\r\n<ng-template #info>\r\n  <!--<span class=\"family\">{{model.family}}</span>-->\r\n  <div [innerHTML]=\"(svg[model.family]|sanitizeHtml)||model.family\" *ngIf=\"model.family\"></div>\r\n</ng-template>\r\n\r\n<ng-container #econtainer></ng-container>\r\n<ng-container #container></ng-container>\r\n\r\n\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'\">\r\n  <ng-container *ngIf=\"model.arguments?.length\">\r\n    <bizdoc-layout [fields]=\"model.arguments\" [model]=\"model.options\"\r\n                   (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n    <!--<ng-container *ngFor=\"let field or model.arguments\">\r\n      <ng-container [ngSwitch]=\"field.type\">\r\n        <ng-container ngSwitchDefault>\r\n          <mat-form-field>\r\n            <mat-label *ngIf=\"field.placeholder\">{{field.label || field.name}}</mat-label>\r\n            <input matInput [type]=\"field.type\" autocomplete=\"off\" formControlName=control [placeholder]=\"field.placeholder || field.label || field.name\"\r\n                   [required]=\"field.required\" [minlength]=\"field.min\" [maxlength]=\"field.max\" [pattern]=\"field.pattern\" />\r\n            <mat-hint *ngIf=\"field.hint\"> {{ field.hint }}</mat-hint>\r\n            <ng-container>\r\n              <mat-error *ngFor=\"let v of field.validations\" *ngIf=\"control.hasError(v.type.toLowerCase())\"> {{ v.message }} </mat-error>\r\n            </ng-container>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n      -->\r\n  </ng-container>\r\n  <ng-container *ngIf=\"model.privileges\" formGroupName=\"privileges\">\r\n    <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n    <mat-selection-list formControlName=\"roles\" *ngIf=\"roles\">\r\n      <mat-list-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-list-option>\r\n    </mat-selection-list>\r\n    <mat-form-field>\r\n      <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n  </ng-container>\r\n</form>\r\n", styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}p.message{margin:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4$4.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$4.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }, { kind: "component", type: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-designer-element', template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <mat-toolbar>\r\n    <button mat-icon-button (click)=\"save()\" [disabled]=\"!valid\"><mat-icon>save</mat-icon></button>\r\n  </mat-toolbar>\r\n  <span class=\"help\">{{model.help}}</span>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"row\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n\r\n<ng-template #info>\r\n  <span class=\"family\">{{model.family}}</span>\r\n</ng-template>\r\n\r\n<ng-container #econtainer></ng-container>\r\n<ng-container #container></ng-container>\r\n\r\n", styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}\n"] }]
+            args: [{ selector: 'bizdoc-designer-element', template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <mat-toolbar>\r\n    <button mat-icon-button (click)=\"save()\" [disabled]=\"!valid\"><mat-icon>save</mat-icon></button>\r\n  </mat-toolbar>\r\n  <p class=\"help\">{{model.help}}</p>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"row\">\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Title'|translate}}</mat-label>\r\n      <input matInput formControlName=\"title\" required #title />\r\n    </mat-form-field>\r\n    &nbsp;\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{'Name'|translate}}</mat-label>\r\n      <input matInput formControlName=\"name\" required />\r\n    </mat-form-field>\r\n  </form>\r\n  <p *ngIf=\"model.resource\" class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'Unlock'|translate\"></p>\r\n</ng-container>\r\n\r\n<ng-template #info>\r\n  <!--<span class=\"family\">{{model.family}}</span>-->\r\n  <div [innerHTML]=\"(svg[model.family]|sanitizeHtml)||model.family\" *ngIf=\"model.family\"></div>\r\n</ng-template>\r\n\r\n<ng-container #econtainer></ng-container>\r\n<ng-container #container></ng-container>\r\n\r\n\r\n<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'\">\r\n  <ng-container *ngIf=\"model.arguments?.length\">\r\n    <bizdoc-layout [fields]=\"model.arguments\" [model]=\"model.options\"\r\n                   (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n    <!--<ng-container *ngFor=\"let field or model.arguments\">\r\n      <ng-container [ngSwitch]=\"field.type\">\r\n        <ng-container ngSwitchDefault>\r\n          <mat-form-field>\r\n            <mat-label *ngIf=\"field.placeholder\">{{field.label || field.name}}</mat-label>\r\n            <input matInput [type]=\"field.type\" autocomplete=\"off\" formControlName=control [placeholder]=\"field.placeholder || field.label || field.name\"\r\n                   [required]=\"field.required\" [minlength]=\"field.min\" [maxlength]=\"field.max\" [pattern]=\"field.pattern\" />\r\n            <mat-hint *ngIf=\"field.hint\"> {{ field.hint }}</mat-hint>\r\n            <ng-container>\r\n              <mat-error *ngFor=\"let v of field.validations\" *ngIf=\"control.hasError(v.type.toLowerCase())\"> {{ v.message }} </mat-error>\r\n            </ng-container>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n      -->\r\n  </ng-container>\r\n  <ng-container *ngIf=\"model.privileges\" formGroupName=\"privileges\">\r\n    <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n    <mat-selection-list formControlName=\"roles\" *ngIf=\"roles\">\r\n      <mat-list-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-list-option>\r\n    </mat-selection-list>\r\n    <mat-form-field>\r\n      <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n      <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n    </mat-form-field>\r\n  </ng-container>\r\n</form>\r\n", styles: [":host{flex:1}::ng-deep form{padding:8px}::ng-deep .flex{flex:1}p.message{margin:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: PaneRef, decorators: [{
                     type: Optional
-                }] }, { type: i2.FormBuilder }, { type: BizDocComponentFactoryResolver }]; }, propDecorators: { template: [{
+                }] }, { type: i2.FormBuilder }, { type: SystemService }, { type: BizDocComponentFactoryResolver }, { type: i0.ElementRef }]; }, propDecorators: { template: [{
                 type: Input
             }], model: [{
                 type: Input
@@ -30556,20 +30662,22 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
         this._ref.populate().subscribe(r => {
             this.model = r;
             this.sections = [
-                { elements: r.forms, type: 'Forms', template: 'form-designer', templates: r.tForms },
+                { elements: r.forms, type: 'Forms', template: 'form-designer', templates: r.tForms, privileges: true },
                 { elements: r.actions, type: 'Actions', template: 'action-designer', templates: r.tActions },
-                { elements: r.reports, type: 'Reports', template: 'report-designer', templates: r.tReports },
-                { elements: r.widgets, type: 'Widgets', template: 'widget-designer', templates: r.tWidgets },
-                { elements: r.views, type: 'Views', template: 'view-designer', templates: r.tViews },
-                { elements: r.guides, type: 'Guides', template: 'guide-designer', templates: [{ title: 'Guide' }] },
-                { elements: r.cubes, type: 'Cubes', template: 'cube-designer', templates: r.tCubes },
-                { elements: r.folders, type: 'Folders', template: 'folder-designer', templates: [{ title: 'Folder' }] },
+                { elements: r.reports, type: 'Reports', template: 'report-designer', templates: r.tReports, privileges: true },
+                { elements: r.widgets, type: 'Widgets', template: 'widget-designer', templates: r.tWidgets, privileges: true },
+                { elements: r.views, type: 'Views', template: 'view-designer', templates: r.tViews, privileges: true },
+                { elements: r.guides, type: 'Guides', template: 'guide-designer', templates: [{ title: 'Guide' }], privileges: true },
+                { elements: r.cubes, type: 'Cubes', template: 'cube-designer', templates: r.tCubes, privileges: true },
+                { elements: r.folders, type: 'Folders', template: 'folder-designer', templates: [{ title: 'Folder' }], privileges: true },
                 { elements: r.roles, type: 'Roles', template: 'role-designer', templates: [{ title: 'Role' }] },
                 { elements: r.states, type: 'States', template: 'state-designer', templates: [{ title: 'State' }] },
-                { elements: r.utilities, type: 'Utilities', template: 'utility-designer', templates: r.tUtilities },
+                { elements: r.utilities, type: 'Utilities', template: 'utility-designer', templates: r.tUtilities, privileges: true },
                 { elements: r.types, type: 'Types', template: 'type-designer', templates: r.tTypes },
                 { elements: r.rules, type: 'Rules', template: 'rule-designer', templates: r.tRules },
             ];
+            this.sections.forEach(s => s.privileges && s.elements.forEach(e => { if (!e.privileges)
+                e.privileges = {}; }));
             this.loading = false;
         });
     }
@@ -30602,15 +30710,15 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
     discard(section, element) {
     }
     _insert(section, element, index) {
-        let i = element.name.lastIndexOf('_'), j = element.title.lastIndexOf(' '), n = 0, { name, title } = element;
-        while (section.elements.find(e => e.name === name || e.title === title)) {
+        let i = element.name.lastIndexOf('_'), j = element.title.lastIndexOf(' '), n = 0, name, title;
+        do {
             n++;
-            name = (i < 0 || isNaN(parseInt(name.substr(i))) ? name : name.substr(0, i + 1)) + '_' + n;
-            title = (j < 0 || isNaN(parseInt(title.substr(j))) ? title : title.substr(0, j - 1)) + ' ' + n;
-        }
+            name = (i < 0 || isNaN(parseInt(element.name.substr(i + 1))) ? element.name : element.name.substr(0, i)) + '_' + n;
+            title = (j < 0 || isNaN(parseInt(element.title.substr(j + 1))) ? element.title : element.title.substr(0, j)) + ' ' + n;
+        } while (section.elements.find(e => e.name === name || e.title === title));
         element.name = name, element.title = title;
-        this.edit(element, section, true).then(() => {
-            section.elements.splice(index, 0, element);
+        this.edit(element, section).then(() => {
+            section.elements.splice(index + 1, 0, element);
             this.dirty = true;
         });
     }
@@ -30619,8 +30727,8 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
             menu.openMenu();
         else {
             this.create(section, section.templates[0]);
-            evt.preventDefault();
         }
+        evt.preventDefault();
     }
     create(section, template) {
         this._insert(section, {
@@ -30636,8 +30744,8 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
         });
         this._insert(section, clone, section.elements.indexOf(element));
     }
-    edit(element, section, isNew) {
-        return this._panes.navigate(DesignerItemComponent, {
+    edit(element, section) {
+        return new Promise((resolve, reject) => this._panes.navigate(DesignerItemComponent, {
             policy: OpenPolicy.Dialog,
             group: this._translate.get(section.type),
             //title: element.title,
@@ -30646,10 +30754,17 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
                 designer: this.model,
                 template: section.template,
                 model: element,
-                editMode: true,
-                isNew
+                mode: 'edit',
+            }
+        }).then(e => e.instance.change.subscribe(e => {
+            if (e) {
+                Object.assign(element, e);
+                this.dirty = true;
+                resolve(e);
             }
-        }).then(e => e.instance.change.subscribe(e => this.dirty = true));
+            else
+                reject();
+        })));
     }
     toggleDisabled(element) {
         element.disabled = !element.disabled;
@@ -30662,6 +30777,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
             this._ps.toast('ChangesSaved');
             apply(actions, cubes, folders, forms, guides, reports, roles, rules, states, types, utilities, views, widgets);
             this.saving = false;
+            this.dirty = false;
         }, () => {
             this._ps.error();
             this.saving = false;
@@ -30672,13 +30788,13 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
     }
 };
 ConfigurationDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ConfigurationDesignerComponent, deps: [{ token: PanesRouter }, { token: TranslateService }, { token: PromptService }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component });
-ConfigurationDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ConfigurationDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title}}\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <bizdoc-designer-element [model]=\"e\" [template]=\"s.template\" [designer]=\"model\"></bizdoc-designer-element>\r\n      </mat-card-content>\r\n      <mat-card-actions fxLayout=\"row\">\r\n        <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n        <button mat-icon-button (click)=\"s.elements.remove(e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" [disableRipple]=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span>\r\n            {{t.family}}\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: ["section h2{margin:0 8px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8$5.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i8$5.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i8$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i8$5.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$5.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9$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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["template", "model", "designer"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] });
+ConfigurationDesignerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ConfigurationDesignerComponent, selector: "ng-component", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title}}\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <bizdoc-designer-element [model]=\"e\" [template]=\"s.template\" [designer]=\"model\"></bizdoc-designer-element>\r\n      </mat-card-content>\r\n      <mat-card-actions fxLayout=\"row\">\r\n        <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n        <button mat-icon-button (click)=\"s.elements.remove(e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span>\r\n            {{t.family}}\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: ["section h2{margin:0 8px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8$5.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i8$5.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i8$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i8$5.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$5.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9$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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["template", "model", "designer"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] });
 ConfigurationDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-configuration-designer' })
 ], ConfigurationDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ConfigurationDesignerComponent, decorators: [{
             type: Component,
-            args: [{ animations: [itemAnimation], template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title}}\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <bizdoc-designer-element [model]=\"e\" [template]=\"s.template\" [designer]=\"model\"></bizdoc-designer-element>\r\n      </mat-card-content>\r\n      <mat-card-actions fxLayout=\"row\">\r\n        <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n        <button mat-icon-button (click)=\"s.elements.remove(e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" [disableRipple]=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span>\r\n            {{t.family}}\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: ["section h2{margin:0 8px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}\n"] }]
+            args: [{ animations: [itemAnimation], template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n</mat-toolbar>\r\n<section *ngFor=\"let s of sections\">\r\n  <h2 class=\"mat-title\">{{s.type | translate}}</h2>\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-title>\r\n        {{e.title}}\r\n      </mat-card-title>\r\n      <mat-card-subtitle>\r\n        {{e.name}}\r\n      </mat-card-subtitle>\r\n      <mat-card-content>\r\n        <bizdoc-designer-element [model]=\"e\" [template]=\"s.template\" [designer]=\"model\"></bizdoc-designer-element>\r\n      </mat-card-content>\r\n      <mat-card-actions fxLayout=\"row\">\r\n        <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n        <button mat-icon-button (click)=\"s.elements.remove(e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n        <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n        <span class=\"divider\"></span>\r\n        <button mat-icon-button (click)=\"edit(e, s)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span>\r\n            {{t.family}}\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: ["section h2{margin:0 8px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-card{margin:0 6px 6px}:host ::ng-deep .mat-card button{opacity:.1}:host ::ng-deep .mat-card:hover button{opacity:1}\n"] }]
         }], ctorParameters: function () { return [{ type: PanesRouter }, { type: TranslateService }, { type: PromptService }, { type: UtilityRef }]; }, propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -30892,6 +31008,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
+/** filter component*/
+class DesignerCubeFilterComponent {
+    /** filter ctor */
+    constructor(_service, _ref, _fb) {
+        this._service = _service;
+        this._ref = _ref;
+        this._fb = _fb;
+        this.pattern = AXIS_VALUE_PATTERN;
+        this.sources = {};
+        this._decendents = {};
+        this._ancestors = {};
+        this._destroy = new Subject();
+    }
+    ngOnInit() {
+        if (!this.model)
+            this.model = {};
+        this.cube.axes.forEach(a => {
+            if (a.hidden || a.selectionMode === 'None')
+                return;
+            let { descendentOf } = a;
+            if (descendentOf) {
+                let ancestors = this._ancestors[a.name] = [];
+                while (descendentOf) {
+                    let axis = this.cube.axes.find(a => a.name === descendentOf);
+                    ancestors.push(axis.name);
+                    if (a.selectionMode !== 'Pattern') {
+                        if (!this._decendents[descendentOf])
+                            this._decendents[descendentOf] = [a.name];
+                        else
+                            this._decendents[descendentOf].push(a.name);
+                    }
+                    descendentOf = axis.descendentOf;
+                }
+            }
+            const ctrl = this._fb.control(this.model[a.name]);
+            this.form.addControl(a.name, ctrl, { emitEvent: false });
+            ctrl.valueChanges.pipe(filter(() => ctrl.valid), debounceTime(200), takeUntil(this._destroy)).subscribe(v => {
+                if (v === null || v === undefined || (isArray(v) && !v.length))
+                    delete this.model[a.name];
+                else
+                    this.model[a.name] = v;
+                if (this._decendents[a.name])
+                    for (let axis of this._decendents[a.name]) {
+                        let deps = {};
+                        for (let name of this._ancestors[axis])
+                            if (this.model[name])
+                                deps[name] = this.model[name];
+                        this.sources[axis] = this._service.values(this.cube.name, axis, deps).
+                            pipe(map(mapToArray));
+                    }
+            });
+        });
+        this.form.updateValueAndValidity({ emitEvent: false });
+        this._initialize();
+    }
+    ngOnChanges(changes) {
+        changes['exclude'] && !changes['exclude'].firstChange && this._initialize();
+    }
+    _initialize() {
+        const values = {};
+        this.cube?.axes?.forEach(a => {
+            if (!this.sources[a.name] && a.selectionMode !== 'Pattern') {
+                this.sources[a.name] = this._service.values(this.cube.name, a.name).pipe(map(mapToArray));
+            }
+            values[a.name] = this.model[a.name] || null;
+        });
+        this.form && this.form.patchValue(values, { emitEvent: false });
+    }
+    display(keyValue) {
+        return keyValue ? keyValue.value : null;
+    }
+    change(axis, evt) {
+        this.form.controls[axis].setValue(evt.option.value.key);
+    }
+    ngOnDestroy() {
+        this._destroy.next();
+        this._destroy.complete();
+    }
+}
+DesignerCubeFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerCubeFilterComponent, deps: [{ token: CubeService }, { token: DesignerRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DesignerCubeFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: { cube: "cube", model: "model", form: "form" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"form\" fxLayout=\"column\">\r\n  <mat-form-field *ngFor=\"let a of cube.axes\" [ngSwitch]=\"a.selectionMode\" [attr.data-help]=\"'axis-'+a.name\">\r\n    <ng-container *ngSwitchCase=\"'Pattern'\">\r\n      <input matInput autocomplete=\"off\"\r\n             [pattern]=\"pattern\" [autofocus]\r\n             [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'SimplePatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'Search'\">\r\n      <input matInput autocomplete=\"off\" type=\"search\"\r\n             [matAutocomplete]=\"segment\" #inp\r\n             [placeholder]=\"a.title||a.name\" />\r\n      <mat-autocomplete #segment [displayWith]=\"display\"\r\n                        (optionSelected)=\"change(a.name, $event)\">\r\n        <mat-option *ngFor=\"let r of sources[a.name] | async | filter : 'value' : inp.value | slice:0:50\" [value]=\"r\">{{r.value}}</mat-option>\r\n      </mat-autocomplete>\r\n      <button mat-icon-button *ngIf=\"inp.value\" matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'SimplePatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\" *ngSwitchDefault>\r\n      <mat-option *ngIf=\"a.selectionMode !== 'Multiple'\">{{'All' | translate}}</mat-option>\r\n      <mat-option *ngFor=\"let r of sources[a.name] | async\" [value]=\"r.key\">{{r.value}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DesignerCubeFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizdoc-designer-cube-filter', template: "<div [formGroup]=\"form\" fxLayout=\"column\">\r\n  <mat-form-field *ngFor=\"let a of cube.axes\" [ngSwitch]=\"a.selectionMode\" [attr.data-help]=\"'axis-'+a.name\">\r\n    <ng-container *ngSwitchCase=\"'Pattern'\">\r\n      <input matInput autocomplete=\"off\"\r\n             [pattern]=\"pattern\" [autofocus]\r\n             [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'SimplePatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'Search'\">\r\n      <input matInput autocomplete=\"off\" type=\"search\"\r\n             [matAutocomplete]=\"segment\" #inp\r\n             [placeholder]=\"a.title||a.name\" />\r\n      <mat-autocomplete #segment [displayWith]=\"display\"\r\n                        (optionSelected)=\"change(a.name, $event)\">\r\n        <mat-option *ngFor=\"let r of sources[a.name] | async | filter : 'value' : inp.value | slice:0:50\" [value]=\"r\">{{r.value}}</mat-option>\r\n      </mat-autocomplete>\r\n      <button mat-icon-button *ngIf=\"inp.value\" matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\r\n      <mat-error *ngIf=\"form.controls[a.name].invalid\">{{'SimplePatternErr' |translate}}</mat-error>\r\n    </ng-container>\r\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\" *ngSwitchDefault>\r\n      <mat-option *ngIf=\"a.selectionMode !== 'Multiple'\">{{'All' | translate}}</mat-option>\r\n      <mat-option *ngFor=\"let r of sources[a.name] | async\" [value]=\"r.key\">{{r.value}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n", styles: ["form{padding:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: CubeService }, { type: DesignerRef }, { type: i2.FormBuilder }]; }, propDecorators: { cube: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
 let ParallelViewDesignComponent = class ParallelViewDesignComponent extends DesignerCubeElementComponent {
     constructor() {
         super(...arguments);
@@ -30908,13 +31116,13 @@ let ParallelViewDesignComponent = class ParallelViewDesignComponent extends Desi
     }
 };
 ParallelViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ParallelViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ParallelViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ParallelViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n    </ng-container>\r\n  <div>\r\n    <bizdoc-cube-parallel *ngIf=\"options.xAxis\" [cube]=\"options.cube\"\r\n                          [xAxis]=\"options.xAxis\"\r\n                          [series]=\"options.series\"\r\n                          [indices]=\"options.indices\"\r\n                          [filters]=\"options.filters\"\r\n                          [chartType]=\"options.chartType\"\r\n                          [scope]=\"options.scope\"\r\n                          [size]=\"250\"></bizdoc-cube-parallel>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeParallelComponent, selector: "bizdoc-cube-parallel", inputs: ["filters", "xAxis", "series", "indices", "cube", "size", "chartType", "scope", "palettes"], outputs: ["explore"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ParallelViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ParallelViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n  <div>\r\n    <bizdoc-cube-parallel *ngIf=\"options.xAxis\" [cube]=\"options.cube\"\r\n                          [xAxis]=\"options.xAxis\"\r\n                          [series]=\"options.series\"\r\n                          [indices]=\"options.indices\"\r\n                          [filters]=\"options.filters\"\r\n                          [chartType]=\"options.chartType\"\r\n                          [scope]=\"options.scope\"\r\n                          [size]=\"250\"></bizdoc-cube-parallel>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeParallelComponent, selector: "bizdoc-cube-parallel", inputs: ["filters", "xAxis", "series", "indices", "cube", "size", "chartType", "scope", "palettes"], outputs: ["explore"] }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "model", "form"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ParallelViewDesignComponent = __decorate([
     BizDoc({ selector: 'parallel-view-designer' })
 ], ParallelViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ParallelViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n    </ng-container>\r\n  <div>\r\n    <bizdoc-cube-parallel *ngIf=\"options.xAxis\" [cube]=\"options.cube\"\r\n                          [xAxis]=\"options.xAxis\"\r\n                          [series]=\"options.series\"\r\n                          [indices]=\"options.indices\"\r\n                          [filters]=\"options.filters\"\r\n                          [chartType]=\"options.chartType\"\r\n                          [scope]=\"options.scope\"\r\n                          [size]=\"250\"></bizdoc-cube-parallel>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n  <div>\r\n    <bizdoc-cube-parallel *ngIf=\"options.xAxis\" [cube]=\"options.cube\"\r\n                          [xAxis]=\"options.xAxis\"\r\n                          [series]=\"options.series\"\r\n                          [indices]=\"options.indices\"\r\n                          [filters]=\"options.filters\"\r\n                          [chartType]=\"options.chartType\"\r\n                          [scope]=\"options.scope\"\r\n                          [size]=\"250\"></bizdoc-cube-parallel>\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let SumViewDesignComponent = class SumViewDesignComponent extends DesignerCubeElementComponent {
@@ -30932,13 +31140,13 @@ let SumViewDesignComponent = class SumViewDesignComponent extends DesignerCubeEl
     }
 };
 SumViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SumViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SumViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SumViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <div>\r\n    <!--<bizdoc-cube-sum *ngIf=\"options.xAxis\" [xAxis]=\"options.xAxis\"\r\n                     [filters]=\"options.filters || {}\"\r\n                     [parentAxis]=\"options.series\"\r\n                     [scope]=\"options.scope\"\r\n                     [periodPolicy]=\"options.periodPolicy\"\r\n                     [indices]=\"options.indices\"\r\n                     [cube]=\"cube.name\"></bizdoc-cube-sum>-->\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+SumViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: SumViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n  <div>\r\n    <!--<bizdoc-cube-sum *ngIf=\"options.xAxis\" [xAxis]=\"options.xAxis\"\r\n                     [filters]=\"options.filters || {}\"\r\n                     [parentAxis]=\"options.series\"\r\n                     [scope]=\"options.scope\"\r\n                     [periodPolicy]=\"options.periodPolicy\"\r\n                     [indices]=\"options.indices\"\r\n                     [cube]=\"cube.name\"></bizdoc-cube-sum>-->\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "model", "form"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 SumViewDesignComponent = __decorate([
     BizDoc({ selector: 'period-view-designer' })
 ], SumViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: SumViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <div>\r\n    <!--<bizdoc-cube-sum *ngIf=\"options.xAxis\" [xAxis]=\"options.xAxis\"\r\n                     [filters]=\"options.filters || {}\"\r\n                     [parentAxis]=\"options.series\"\r\n                     [scope]=\"options.scope\"\r\n                     [periodPolicy]=\"options.periodPolicy\"\r\n                     [indices]=\"options.indices\"\r\n                     [cube]=\"cube.name\"></bizdoc-cube-sum>-->\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n  <div>\r\n    <!--<bizdoc-cube-sum *ngIf=\"options.xAxis\" [xAxis]=\"options.xAxis\"\r\n                     [filters]=\"options.filters || {}\"\r\n                     [parentAxis]=\"options.series\"\r\n                     [scope]=\"options.scope\"\r\n                     [periodPolicy]=\"options.periodPolicy\"\r\n                     [indices]=\"options.indices\"\r\n                     [cube]=\"cube.name\"></bizdoc-cube-sum>-->\r\n  </div>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let MatrixViewDesignComponent = class MatrixViewDesignComponent extends DesignerCubeElementComponent {
@@ -30977,13 +31185,13 @@ let MatrixViewDesignComponent = class MatrixViewDesignComponent extends Designer
     }
 };
 MatrixViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatrixViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MatrixViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: MatrixViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\">\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple (selectionChange)=\"forthSelected($event)\" [disabled]=\"!thirdAxes?.length\">\r\n          <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div><mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!forthAxes || forthAxes?.length\">\r\n        <mat-option *ngFor=\"let x of forthAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <div formArrayName=\"sum\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <div class=\"row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-radio-group formControlName=\"axis\">\r\n          <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n          <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n        </mat-radio-group>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Calculate'|translate}}</mat-label>\r\n          <mat-select formControlName=\"calculate\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n            <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n            <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n            <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </form>\r\n  <!--<ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n    -->\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+MatrixViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: MatrixViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\">\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple (selectionChange)=\"forthSelected($event)\" [disabled]=\"!thirdAxes?.length\">\r\n          <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div><mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!forthAxes || forthAxes?.length\">\r\n        <mat-option *ngFor=\"let x of forthAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <div formArrayName=\"sum\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <div class=\"row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-radio-group formControlName=\"axis\">\r\n          <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n          <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n        </mat-radio-group>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Calculate'|translate}}</mat-label>\r\n          <mat-select formControlName=\"calculate\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n            <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n            <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n            <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n    \r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "model", "form"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 MatrixViewDesignComponent = __decorate([
     BizDoc({ selector: 'matrix-view-designer' })
 ], MatrixViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatrixViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\">\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple (selectionChange)=\"forthSelected($event)\" [disabled]=\"!thirdAxes?.length\">\r\n          <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div><mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!forthAxes || forthAxes?.length\">\r\n        <mat-option *ngFor=\"let x of forthAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <div formArrayName=\"sum\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <div class=\"row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-radio-group formControlName=\"axis\">\r\n          <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n          <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n        </mat-radio-group>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Calculate'|translate}}</mat-label>\r\n          <mat-select formControlName=\"calculate\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n            <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n            <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n            <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </form>\r\n  <!--<ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n    -->\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\">\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" required (selectionChange)=\"seriesSelected($event)\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Filters'|translate}}</mat-label>\r\n        <mat-select formControlName=\"filters\" multiple (selectionChange)=\"forthSelected($event)\" [disabled]=\"!thirdAxes?.length\">\r\n          <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\" class=\"flex\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div><mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!forthAxes || forthAxes?.length\">\r\n        <mat-option *ngFor=\"let x of forthAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n    <h2 class=\"mat-title\">{{'Summary'|translate}}</h2>\r\n    <div formArrayName=\"sum\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, sum)\">\r\n      <div class=\"row\" *ngFor=\"let s of sum.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'title'|translate}}</mat-label>\r\n          <input matInput formControlName=\"title\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-radio-group formControlName=\"axis\">\r\n          <mat-radio-button value=\"XAxis\">{{'XAxis'|translate}}</mat-radio-button>\r\n          <mat-radio-button value=\"Series\">{{'Series'|translate}}</mat-radio-button>\r\n        </mat-radio-group>\r\n        &nbsp;\r\n        <mat-form-field>\r\n          <mat-label>{{'Calculate'|translate}}</mat-label>\r\n          <mat-select formControlName=\"calculate\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Quarter\">{{'Quarter'|translate}}</mat-option>\r\n            <mat-option value=\"Year\">{{'Year'|translate}}</mat-option>\r\n            <mat-option value=\"Month\">{{'Month'|translate}}</mat-option>\r\n            <mat-option value=\"Sum\">{{'Sum'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"sum.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n    \r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let ChartViewDesignComponent = class ChartViewDesignComponent extends DesignerCubeElementComponent {
@@ -31012,13 +31220,13 @@ let ChartViewDesignComponent = class ChartViewDesignComponent extends DesignerCu
     }
 };
 ChartViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ChartViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ChartViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ChartViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required multiple (selectionChange)=\"xAxisSelected($event)\">\r\n          <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" multiple (selectionChange)=\"seriesSelected($event)\" [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n        <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n        <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n        <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n        <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n        <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n        <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n        <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indicesChartType\" [disabled]=\"isAccum\">\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!secondaryAxes || !secondaryAxes.length\">\r\n        <mat-option *ngFor=\"let x of (thirdAxes||secondaryAxes)\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n  <!--<ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>-->\r\n  <!--<button mat-stroked-button (click)=\"showPreview = true\">{{'Preview'|translate}}</button>-->\r\n  <!--<div *ngIf=\"options.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"\r\n                         [cube]=\"selectedCube.name\"\r\n                         [filters]=\"options.filters\"\r\n                         [xAxis]=\"options.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"options.xAxis\"\r\n                         [series]=\"options.series\"\r\n                         [indices]=\"options.indices\"\r\n                         [filters]=\"options.filters\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [indicesChartType]=\"options.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ChartViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ChartViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required multiple (selectionChange)=\"xAxisSelected($event)\">\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>&nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" multiple (selectionChange)=\"seriesSelected($event)\" [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'ChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"chartType\">\r\n          <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\" *ngIf=\"options.indices?.length\">\r\n        <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indicesChartType\" [disabled]=\"isAccum\">\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!secondaryAxes || !secondaryAxes.length\">\r\n        <mat-option *ngFor=\"let x of (thirdAxes||secondaryAxes)\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n  <!--<button mat-stroked-button (click)=\"showPreview = true\">{{'Preview'|translate}}</button>-->\r\n  <!--<div *ngIf=\"options.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"\r\n                         [cube]=\"selectedCube.name\"\r\n                         [filters]=\"options.filters\"\r\n                         [xAxis]=\"options.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"options.xAxis\"\r\n                         [series]=\"options.series\"\r\n                         [indices]=\"options.indices\"\r\n                         [filters]=\"options.filters\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [indicesChartType]=\"options.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "model", "form"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ChartViewDesignComponent = __decorate([
     BizDoc({ selector: 'analysis-view-designer' })
 ], ChartViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ChartViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required multiple (selectionChange)=\"xAxisSelected($event)\">\r\n          <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" multiple (selectionChange)=\"seriesSelected($event)\" [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n        <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n        <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n        <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n        <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n        <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n        <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n        <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indicesChartType\" [disabled]=\"isAccum\">\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!secondaryAxes || !secondaryAxes.length\">\r\n        <mat-option *ngFor=\"let x of (thirdAxes||secondaryAxes)\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n  <!--<ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>-->\r\n  <!--<button mat-stroked-button (click)=\"showPreview = true\">{{'Preview'|translate}}</button>-->\r\n  <!--<div *ngIf=\"options.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"\r\n                         [cube]=\"selectedCube.name\"\r\n                         [filters]=\"options.filters\"\r\n                         [xAxis]=\"options.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"options.xAxis\"\r\n                         [series]=\"options.series\"\r\n                         [indices]=\"options.indices\"\r\n                         [filters]=\"options.filters\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [indicesChartType]=\"options.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required multiple (selectionChange)=\"xAxisSelected($event)\">\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>&nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" multiple (selectionChange)=\"seriesSelected($event)\" [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'ChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"chartType\">\r\n          <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\" *ngIf=\"options.indices?.length\">\r\n        <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indicesChartType\" [disabled]=\"isAccum\">\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!secondaryAxes || !secondaryAxes.length\">\r\n        <mat-option *ngFor=\"let x of (thirdAxes||secondaryAxes)\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint></mat-hint>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n  <!--<button mat-stroked-button (click)=\"showPreview = true\">{{'Preview'|translate}}</button>-->\r\n  <!--<div *ngIf=\"options.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"\r\n                         [cube]=\"selectedCube.name\"\r\n                         [filters]=\"options.filters\"\r\n                         [xAxis]=\"options.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"options.xAxis\"\r\n                         [series]=\"options.series\"\r\n                         [indices]=\"options.indices\"\r\n                         [filters]=\"options.filters\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [indicesChartType]=\"options.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 //export const ICONS = ['10k', '10k', '10mp', '10mp', '11mp', '11mp', '123', '123', '12mp', '12mp', '13mp', '13mp', '14mp', '14mp', '15mp', '15mp', '16mp', '16mp', '17mp', '17mp', '18_up_rating', '18_up_rating', '18mp', '18mp', '19mp', '19mp', '1k', '1k', '1k_plus', '1k_plus', '1x_mobiledata', '1x_mobiledata', '20mp', '20mp', '21mp', '21mp', '22mp', '22mp', '23mp', '23mp', '24mp', '24mp', '2k', '2k', '2k_plus', '2k_plus', '2mp', '2mp', '30fps', '30fps', '30fps_select', '30fps_select', '360', '360', '3d_rotation', '3d_rotation', '3g_mobiledata', '3g_mobiledata', '3k', '3k', '3k_plus', '3k_plus', '3mp', '3mp', '3p', '3p', '4g_mobiledata', '4g_mobiledata', '4g_plus_mobiledata', '4g_plus_mobiledata', '4k', '4k', '4k_plus', '4k_plus',
@@ -31102,12 +31310,14 @@ class IconPickerComponent {
             subscribe(v => this._list(IconPickerComponent.icons.filter(i => i.tags.findIndex(t => t.indexOf(v) > -1) > -1)));
     }
     _list(e) {
-        e.forEach(i => i.categories.forEach(c => {
-            if (this.categories[c])
-                this.categories[c].items.push(i);
-            else
-                this.categories.push(this.categories[c] = { items: [i] });
-        }));
+        //e.forEach(i => i.categories.forEach(c => {
+        //  if (this.categories[c])
+        //    (this.categories[c] as CategoryInfo).items.push(i);
+        //  else
+        //    this.categories.push(this.categories[c] = { items: [i] } as CategoryInfo);
+        //})
+        //);
+        this.items = e;
     }
     open() {
         this._overlayRef = this._overlay.create({
@@ -31145,10 +31355,10 @@ class IconPickerComponent {
 }
 IconPickerComponent.nextId = 0;
 IconPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: IconPickerComponent, deps: [{ token: i2.NgControl, optional: true, self: true }, { token: i1$3.Overlay }, { token: i1$1.HttpClient }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1$4.Directionality }], target: i0.ɵɵFactoryTarget.Component });
-IconPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: { value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" />\r\n    <cdk-virtual-scroll-viewport *cdkVirtualFor=\"let c of categories; trackBy: _trackBy\" itemSize=\"2\">\r\n      <span></span>\r\n      <div>\r\n        <mat-icon *ngFor=\"let i of c.items; trackBy: _trackBy\" (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+IconPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: { value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" autocomplete=\"off\"/>\r\n    <cdk-virtual-scroll-viewport itemSize=\"100\" class=\"categories\" templateCacheSize=\"0\">\r\n      <mat-icon *ngFor=\"let i of items\" (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n      <!--; trackBy: _trackBy-->\r\n      <!--<div *cdkVirtualFor=\"let c of categories; trackBy: _trackBy\">\r\n    <mat-icon *ngFor=\"let i of c.items; trackBy: _trackBy\" (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n  </div>-->\r\n    </cdk-virtual-scroll-viewport>\r\n  </div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}.categories{height:300px;width:300px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i6$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: IconPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-icon-picker', template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" />\r\n    <cdk-virtual-scroll-viewport *cdkVirtualFor=\"let c of categories; trackBy: _trackBy\" itemSize=\"2\">\r\n      <span></span>\r\n      <div>\r\n        <mat-icon *ngFor=\"let i of c.items; trackBy: _trackBy\" (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}\n"] }]
+            args: [{ selector: 'bizdoc-icon-picker', template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" autocomplete=\"off\"/>\r\n    <cdk-virtual-scroll-viewport itemSize=\"100\" class=\"categories\" templateCacheSize=\"0\">\r\n      <mat-icon *ngFor=\"let i of items\" (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n      <!--; trackBy: _trackBy-->\r\n      <!--<div *cdkVirtualFor=\"let c of categories; trackBy: _trackBy\">\r\n    <mat-icon *ngFor=\"let i of c.items; trackBy: _trackBy\" (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n  </div>-->\r\n    </cdk-virtual-scroll-viewport>\r\n  </div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}.categories{height:300px;width:300px}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -31174,54 +31384,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 args: [TemplateRef]
             }] } });
 
-class PrivilegesDesignComponent {
-    constructor(_fb, _service, _cd, _ref) {
-        this._fb = _fb;
-        this._service = _service;
-        this._cd = _cd;
-        this._ref = _ref;
-        this.change = new EventEmitter();
-        this.form = this._fb.group({
-            rule: null,
-            roles: this._fb.control([]),
-        });
-    }
-    ngOnInit() {
-        this._service.roles().subscribe(r => {
-            this.roles = r.
-                concat(this._ref.designer.roles.map((r) => ({
-                name: r.name,
-                title: r.title,
-                dataType: r.dataType
-            })));
-            this._cd.detectChanges();
-            this.list.options.forEach(o => this.model.roles?.indexOf(o.value) > -1 &&
-                this.list.selectedOptions.select(o));
-        });
-        this.form.patchValue(this.model);
-        this.form.valueChanges.subscribe(v => this.change.emit(v));
-    }
-    rolesChange(evt) {
-        this.form.get('roles').setValue(this.list.selectedOptions.selected.map(o => o.value));
-    }
-}
-PrivilegesDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PrivilegesDesignComponent, deps: [{ token: i2.FormBuilder }, { token: SystemService }, { token: i0.ChangeDetectorRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
-PrivilegesDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: { model: "model" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true }], ngImport: i0, template: "<div autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n  <mat-selection-list (selectionChange)=\"rolesChange($event)\" *ngIf=\"roles\">\r\n    <mat-list-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-list-option>\r\n  </mat-selection-list>\r\n  <!--<mat-form-field>\r\n    <mat-label>{{'Roles'|translate}}</mat-label>\r\n    <mat-select formControlName=\"roles\" multiple>\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>-->\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$4.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$4.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: AceInput, selector: "bizdoc-ace-input", inputs: ["params", "placeholder", "required", "disabled", "value"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PrivilegesDesignComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bizdoc-privileges', template: "<div autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <h2 class=\"mat-title\">{{'Privileges'|translate}}</h2>\r\n  <mat-selection-list (selectionChange)=\"rolesChange($event)\" *ngIf=\"roles\">\r\n    <mat-list-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-list-option>\r\n  </mat-selection-list>\r\n  <!--<mat-form-field>\r\n    <mat-label>{{'Roles'|translate}}</mat-label>\r\n    <mat-select formControlName=\"roles\" multiple>\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>-->\r\n  <mat-form-field>\r\n    <bizdoc-ace-input [placeholder]=\"'Condition'|translate\" formControlName=\"rule\"></bizdoc-ace-input>\r\n    <mat-hint> {{ 'ProgrammableExpression'|translate }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: SystemService }, { type: i0.ChangeDetectorRef }, { type: DesignerRef, decorators: [{
-                    type: Inject,
-                    args: [DesignerRef]
-                }] }]; }, propDecorators: { model: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }], list: [{
-                type: ViewChild,
-                args: [MatSelectionList]
-            }] } });
-
 let FormDesignComponent = class FormDesignComponent extends DesignerTypeElementComponent {
     constructor(fb, _router, _service, _session, ref) {
         super(fb, ref);
@@ -31231,6 +31393,7 @@ let FormDesignComponent = class FormDesignComponent extends DesignerTypeElementC
         this.rules = this._fb.array([]);
         this.form = this._fb.group({
             rules: this.rules,
+            guide: null,
             icon: null
         });
         this.theme = this._session.theme.dark ? 'MaterialDark' : 'Material';
@@ -31257,16 +31420,14 @@ let FormDesignComponent = class FormDesignComponent extends DesignerTypeElementC
             this.theme = t.dark ? 'MaterialDark' : 'Material';
             this.primary = this._session.getPrimery();
         });
+        this.guides = ref.designer.guides;
     }
     ngOnInit() {
-        if (!this.model.privileges)
-            this.model.privileges = {};
-        if (this.editMode)
+        if (this.mode === 'edit')
             this.model.rules?.
                 forEach(r => this.rules.push(this._formrule(r), { emitEvent: false }));
         else
             this._service.range(this.model.name).subscribe(r => this.usage = r);
-        super.ngOnInit();
     }
     _formrule(rule) {
         return this._fb.group({
@@ -31291,13 +31452,13 @@ let FormDesignComponent = class FormDesignComponent extends DesignerTypeElementC
     }
 };
 FormDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignComponent, deps: [{ token: i2.FormBuilder }, { token: PanesRouter }, { token: SystemService }, { token: SessionService }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
-FormDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <!--\r\n                 [theme]=\"theme\"\r\n                 [axisSettings]=\"axisSettings\"\r\n    -->\r\n\r\n  <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                 type=\"Line\"\r\n                 [id]=\"model.name\"\r\n                 [fill]=\"primary\"\r\n                 [dataSource]=\"usage\"\r\n                 xName=\"date\"\r\n                 yName=\"count\"\r\n                 lineWidth=\"2\"\r\n                 valueType=\"DateTime\"\r\n                 [markerSettings]=\"markerSettings\"\r\n                 [tooltipSettings]=\"tooltipSettings\"\r\n                 [enableRtl]=\"enableRtl\">\r\n  </ejs-sparkline>\r\n  <div class=\"row\">\r\n    <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"design()\" [bizdocTooltip]=\"'Designer'|translate\" [disabled]=\"model.draft\" *ngIf=\"model.type==='BizDoc.Configuration.Forms.Box'\"><mat-icon>design_services</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }, { kind: "component", type: i9$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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+FormDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\" class=\"column\">\r\n  <div>\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </div>\r\n  <mat-form-field *ngIf=\"guides.length\">\r\n    <mat-label>{{'Guide'|translate}}</mat-label>\r\n    <mat-select formControlName=\"guide\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title || g.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <!--\r\n                 [theme]=\"theme\"\r\n                 [axisSettings]=\"axisSettings\"\r\n    -->\r\n\r\n  <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                 type=\"Line\"\r\n                 [id]=\"model.name\"\r\n                 [fill]=\"primary\"\r\n                 [dataSource]=\"usage\"\r\n                 xName=\"date\"\r\n                 yName=\"count\"\r\n                 lineWidth=\"2\"\r\n                 valueType=\"DateTime\"\r\n                 [markerSettings]=\"markerSettings\"\r\n                 [tooltipSettings]=\"tooltipSettings\"\r\n                 [enableRtl]=\"enableRtl\">\r\n  </ejs-sparkline>\r\n  <div class=\"row\">\r\n    <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"design()\" [bizdocTooltip]=\"'Designer'|translate\" [disabled]=\"model.draft\" *ngIf=\"model.type==='BizDoc.Configuration.Forms.Box'\"><mat-icon>design_services</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.SparklineComponent, selector: "ejs-sparkline", inputs: ["axisSettings", "border", "containerArea", "dataLabelSettings", "dataSource", "enablePersistence", "enableRtl", "endPointColor", "fill", "format", "height", "highPointColor", "lineWidth", "locale", "lowPointColor", "markerSettings", "negativePointColor", "opacity", "padding", "palette", "query", "rangeBandSettings", "rangePadding", "startPointColor", "theme", "tiePointColor", "tooltipSettings", "type", "useGroupingSeparator", "valueType", "width", "xName", "yName"], outputs: ["axisRendering", "dataLabelRendering", "load", "loaded", "markerRendering", "pointRegionMouseClick", "pointRegionMouseMove", "pointRendering", "resize", "seriesRendering", "sparklineMouseClick", "sparklineMouseMove", "tooltipInitialize"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 FormDesignComponent = __decorate([
     BizDoc({ selector: 'form-designer' })
 ], FormDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FormDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <!--\r\n                 [theme]=\"theme\"\r\n                 [axisSettings]=\"axisSettings\"\r\n    -->\r\n\r\n  <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                 type=\"Line\"\r\n                 [id]=\"model.name\"\r\n                 [fill]=\"primary\"\r\n                 [dataSource]=\"usage\"\r\n                 xName=\"date\"\r\n                 yName=\"count\"\r\n                 lineWidth=\"2\"\r\n                 valueType=\"DateTime\"\r\n                 [markerSettings]=\"markerSettings\"\r\n                 [tooltipSettings]=\"tooltipSettings\"\r\n                 [enableRtl]=\"enableRtl\">\r\n  </ejs-sparkline>\r\n  <div class=\"row\">\r\n    <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"design()\" [bizdocTooltip]=\"'Designer'|translate\" [disabled]=\"model.draft\" *ngIf=\"model.type==='BizDoc.Configuration.Forms.Box'\"><mat-icon>design_services</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\" class=\"column\">\r\n  <div>\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </div>\r\n  <mat-form-field *ngIf=\"guides.length\">\r\n    <mat-label>{{'Guide'|translate}}</mat-label>\r\n    <mat-select formControlName=\"guide\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title || g.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <!--\r\n                 [theme]=\"theme\"\r\n                 [axisSettings]=\"axisSettings\"\r\n    -->\r\n\r\n  <ejs-sparkline *ngIf=\"usage\" width='250px' height='200px'\r\n                 type=\"Line\"\r\n                 [id]=\"model.name\"\r\n                 [fill]=\"primary\"\r\n                 [dataSource]=\"usage\"\r\n                 xName=\"date\"\r\n                 yName=\"count\"\r\n                 lineWidth=\"2\"\r\n                 valueType=\"DateTime\"\r\n                 [markerSettings]=\"markerSettings\"\r\n                 [tooltipSettings]=\"tooltipSettings\"\r\n                 [enableRtl]=\"enableRtl\">\r\n  </ejs-sparkline>\r\n  <div class=\"row\">\r\n    <button mat-icon-button (click)=\"diagram()\" [bizdocTooltip]=\"'Workflow'|translate\" [disabled]=\"model.draft\"><mat-icon>schema</mat-icon></button>\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button (click)=\"design()\" [bizdocTooltip]=\"'Designer'|translate\" [disabled]=\"model.draft\" *ngIf=\"model.type==='BizDoc.Configuration.Forms.Box'\"><mat-icon>design_services</mat-icon></button>\r\n  </div>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: PanesRouter }, { type: SystemService }, { type: SessionService }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -31346,9 +31507,7 @@ let CubeDesignComponent = class CubeDesignComponent extends DesignerTypeElementC
         });
     }
     ngOnInit() {
-        if (!this.model.privileges)
-            this.model.privileges = {};
-        if (this.editMode) {
+        if (this.mode === 'edit') {
             this.model.axes?.forEach(a => {
                 this.axes.push(this._formaxis(a), { emitEvent: true });
             });
@@ -31361,7 +31520,6 @@ let CubeDesignComponent = class CubeDesignComponent extends DesignerTypeElementC
         }
         else
             this._service.cube(this.model.name).subscribe(r => this.usage = r);
-        super.ngOnInit();
     }
     dropView(event) {
         this.drop(event, this.views);
@@ -31408,10 +31566,10 @@ let CubeDesignComponent = class CubeDesignComponent extends DesignerTypeElementC
         return this._fb.group({
             name,
             title,
-            icon: model?.icon || null,
+            icon: model?.icon || 'insights',
             xAxis: this._fb.control(model?.xAxis, Validators.required),
-            series: model?.series || [],
-            indices: model?.indices || [],
+            series: this._arrayOf(model?.series),
+            indices: this._arrayOf(model?.indices),
             type: model?.type || 'Chart',
             chartType: model?.chartType || null,
         });
@@ -31455,13 +31613,13 @@ let CubeDesignComponent = class CubeDesignComponent extends DesignerTypeElementC
     }
 };
 CubeDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeDesignComponent, deps: [{ token: i2.FormBuilder }, { token: SystemService }, { token: PromptService }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
-CubeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n    <br />\r\n    <mat-radio-group formControlName=\"scope\">\r\n      <mat-radio-button>{{'Global'|translate}}</mat-radio-button>\r\n      <p>{{' '|translate}}</p>\r\n      <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n      <p>{{' '|translate}}</p>\r\n      <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n      <p>{{' '|translate}}</p>\r\n    </mat-radio-group>\r\n  <!-- Axes -->\r\n  <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n  <div formArrayName=\"axes\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n    <div class=\"row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"dataType\" required>\r\n          <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeAxis(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addAxis()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Indices -->\r\n  <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n  <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n    <div class=\"row\" *ngFor=\"let a of indices.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeIndex(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addIndex()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Patterns -->\r\n  <h2 class=\"mat-title\">{{'Patterns'|translate}}</h2>\r\n  <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n    <div class=\"row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" />\r\n      </mat-form-field>\r\n      <bizdoc-cube-filter [cube]=\"model.name\" [(axes)]=\"p.get('axes').value\"></bizdoc-cube-filter>\r\n      <button mat-icon-button (click)=\"removePattern(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addPattern()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Views -->\r\n  <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n  <div formArrayName=\"views\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropView($event)\">\r\n    <div class=\"row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'Type'|translate}}</mat-label>\r\n        <mat-select formControlName=\"type\">\r\n          <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n          <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n          <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n          <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <ng-container [ngSwitch]=\"v.get('type').value\">\r\n        <mat-form-field *ngSwitchCase=\"'Chart'\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Pivot'\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected(index, $event)\" multiple>\r\n          <mat-option *ngFor=\"let x of model.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" multiple [disabled]=\"isAccum(index)\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes[index]\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeView(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addView()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!-- Info -->\r\n<ng-template #info>\r\n  <button mat-stroked-button (click)=\"sync()\">\r\n    <span> {{'Synchronize'|translate}}</span>\r\n    <mat-spinner *ngIf=\"syncing\" diameter=\"20\"></mat-spinner>\r\n  </button>\r\n  <div class=\"row\">\r\n    <div *ngIf=\"model.axes.length\">\r\n      <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n          <!--<td class=\"mat-cell\">{{a.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n          <td class=\"mat-cell\">{{datatype(a.dataType)}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.indices.length\">\r\n      <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of model.indices\">\r\n          <!--<td class=\"mat-cell\">{{a.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.views.length\">\r\n      <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of model.views\">\r\n          <td class=\"mat-cell\">{{v.title}}</td>\r\n          <!--<td class=\"mat-cell\">({{(v.type||'Chart')|translate}})</td>-->\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+CubeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n  <mat-radio-group formControlName=\"scope\">\r\n    <mat-radio-button>{{'Global'|translate}}</mat-radio-button>\r\n    <br />\r\n    <p>{{'AnalysisSecurityGlobalHelp'|translate}}</p>\r\n    <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n    <p>{{'AnalysisSecurityPositionsHelp'|translate}}</p>\r\n    <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n    <p>{{'AnalysisSecurityPatternsHelp'|translate}}</p>\r\n  </mat-radio-group>\r\n  <!-- Axes -->\r\n  <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n  <div formArrayName=\"axes\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n    <div class=\"row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"dataType\" required>\r\n          <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeAxis(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addAxis()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Indices -->\r\n  <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n  <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n    <div class=\"row\" *ngFor=\"let a of indices.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeIndex(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addIndex()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Patterns -->\r\n  <h2 class=\"mat-title\">{{'Patterns'|translate}}</h2>\r\n  <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n    <div class=\"row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" />\r\n      </mat-form-field>\r\n      <bizdoc-cube-filter [cube]=\"model.name\" [(axes)]=\"p.get('axes').value\"></bizdoc-cube-filter>\r\n      <button mat-icon-button (click)=\"removePattern(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addPattern()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Views -->\r\n  <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n  <div formArrayName=\"views\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropView($event)\">\r\n    <div class=\"row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'Type'|translate}}</mat-label>\r\n        <mat-select formControlName=\"type\">\r\n          <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n          <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n          <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n          <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <ng-container [ngSwitch]=\"v.get('type').value\">\r\n        <mat-form-field *ngSwitchCase=\"'Chart'\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Pivot'\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected(index, $event)\" multiple>\r\n          <mat-option *ngFor=\"let x of model.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" multiple [disabled]=\"isAccum(index)\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes[index]\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeView(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addView()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n<!-- Info -->\r\n<ng-template #info>\r\n  <button mat-stroked-button (click)=\"sync()\">\r\n    <span> {{'Synchronize'|translate}}</span>\r\n    <mat-spinner *ngIf=\"syncing\" diameter=\"20\"></mat-spinner>\r\n  </button>\r\n  <div class=\"row\">\r\n    <div *ngIf=\"model.axes.length\">\r\n      <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n          <!--<td class=\"mat-cell\">{{a.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n          <td class=\"mat-cell\">{{datatype(a.dataType)}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.indices.length\">\r\n      <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of model.indices\">\r\n          <!--<td class=\"mat-cell\">{{a.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.views.length\">\r\n      <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of model.views\">\r\n          <td class=\"mat-cell\">{{v.title}}</td>\r\n          <!--<td class=\"mat-cell\">({{(v.type||'Chart')|translate}})</td>-->\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .mat-radio-group p{margin-inline-start:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 CubeDesignComponent = __decorate([
     BizDoc({ selector: 'cube-designer' })
 ], CubeDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n    <br />\r\n    <mat-radio-group formControlName=\"scope\">\r\n      <mat-radio-button>{{'Global'|translate}}</mat-radio-button>\r\n      <p>{{' '|translate}}</p>\r\n      <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n      <p>{{' '|translate}}</p>\r\n      <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n      <p>{{' '|translate}}</p>\r\n    </mat-radio-group>\r\n  <!-- Axes -->\r\n  <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n  <div formArrayName=\"axes\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n    <div class=\"row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"dataType\" required>\r\n          <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeAxis(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addAxis()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Indices -->\r\n  <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n  <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n    <div class=\"row\" *ngFor=\"let a of indices.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeIndex(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addIndex()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Patterns -->\r\n  <h2 class=\"mat-title\">{{'Patterns'|translate}}</h2>\r\n  <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n    <div class=\"row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" />\r\n      </mat-form-field>\r\n      <bizdoc-cube-filter [cube]=\"model.name\" [(axes)]=\"p.get('axes').value\"></bizdoc-cube-filter>\r\n      <button mat-icon-button (click)=\"removePattern(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addPattern()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Views -->\r\n  <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n  <div formArrayName=\"views\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropView($event)\">\r\n    <div class=\"row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'Type'|translate}}</mat-label>\r\n        <mat-select formControlName=\"type\">\r\n          <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n          <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n          <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n          <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <ng-container [ngSwitch]=\"v.get('type').value\">\r\n        <mat-form-field *ngSwitchCase=\"'Chart'\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Pivot'\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected(index, $event)\" multiple>\r\n          <mat-option *ngFor=\"let x of model.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" multiple [disabled]=\"isAccum(index)\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes[index]\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeView(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addView()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!-- Info -->\r\n<ng-template #info>\r\n  <button mat-stroked-button (click)=\"sync()\">\r\n    <span> {{'Synchronize'|translate}}</span>\r\n    <mat-spinner *ngIf=\"syncing\" diameter=\"20\"></mat-spinner>\r\n  </button>\r\n  <div class=\"row\">\r\n    <div *ngIf=\"model.axes.length\">\r\n      <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n          <!--<td class=\"mat-cell\">{{a.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n          <td class=\"mat-cell\">{{datatype(a.dataType)}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.indices.length\">\r\n      <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of model.indices\">\r\n          <!--<td class=\"mat-cell\">{{a.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.views.length\">\r\n      <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of model.views\">\r\n          <td class=\"mat-cell\">{{v.title}}</td>\r\n          <!--<td class=\"mat-cell\">({{(v.type||'Chart')|translate}})</td>-->\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <mat-label>{{'SecurityLevel'|translate}}</mat-label>\r\n  <mat-radio-group formControlName=\"scope\">\r\n    <mat-radio-button>{{'Global'|translate}}</mat-radio-button>\r\n    <br />\r\n    <p>{{'AnalysisSecurityGlobalHelp'|translate}}</p>\r\n    <mat-radio-button value=\"Positions\">{{'Positions'|translate}}</mat-radio-button>\r\n    <p>{{'AnalysisSecurityPositionsHelp'|translate}}</p>\r\n    <mat-radio-button value=\"Patterns\">{{'Patterns'|translate}}</mat-radio-button>\r\n    <p>{{'AnalysisSecurityPatternsHelp'|translate}}</p>\r\n  </mat-radio-group>\r\n  <!-- Axes -->\r\n  <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n  <div formArrayName=\"axes\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, axes)\">\r\n    <div class=\"row\" *ngFor=\"let a of axes.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"dataType\" required>\r\n          <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeAxis(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addAxis()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Indices -->\r\n  <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n  <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, indices)\">\r\n    <div class=\"row\" *ngFor=\"let a of indices.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeIndex(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addIndex()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Patterns -->\r\n  <h2 class=\"mat-title\">{{'Patterns'|translate}}</h2>\r\n  <div formArrayName=\"indices\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, patterns)\">\r\n    <div class=\"row\" *ngFor=\"let p of patterns.controls; index as index\" [formGroup]=\"p\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" />\r\n      </mat-form-field>\r\n      <bizdoc-cube-filter [cube]=\"model.name\" [(axes)]=\"p.get('axes').value\"></bizdoc-cube-filter>\r\n      <button mat-icon-button (click)=\"removePattern(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"addPattern()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  <!-- Views -->\r\n  <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n  <div formArrayName=\"views\" class=\"column\" cdkDropList (cdkDropListDropped)=\"dropView($event)\">\r\n    <div class=\"row\" *ngFor=\"let v of views.controls; index as index\" [formGroup]=\"v\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'Type'|translate}}</mat-label>\r\n        <mat-select formControlName=\"type\">\r\n          <mat-option value=\"Chart\">{{'Chart'|translate}}</mat-option>\r\n          <mat-option value=\"Pivot\">{{'Pivot'|translate}}</mat-option>\r\n          <mat-option value=\"Grid\">{{'Grid'|translate}}</mat-option>\r\n          <mat-option value=\"Spreadsheet\">{{'Spreadsheet'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <ng-container [ngSwitch]=\"v.get('type').value\">\r\n        <mat-form-field *ngSwitchCase=\"'Chart'\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n            <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n        <mat-form-field *ngSwitchCase=\"'Pivot'\">\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option>{{'None'|translate}}</mat-option>\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n            <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n            <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n            <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n            <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n            <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n            <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n            <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n            <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n            <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n            <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n            <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n            <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n            <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected(index, $event)\" multiple>\r\n          <mat-option *ngFor=\"let x of model.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" multiple [disabled]=\"isAccum(index)\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes[index]\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"removeView(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n    <button mat-icon-button (click)=\"addView()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </div>\r\n</form>\r\n<!-- Info -->\r\n<ng-template #info>\r\n  <button mat-stroked-button (click)=\"sync()\">\r\n    <span> {{'Synchronize'|translate}}</span>\r\n    <mat-spinner *ngIf=\"syncing\" diameter=\"20\"></mat-spinner>\r\n  </button>\r\n  <div class=\"row\">\r\n    <div *ngIf=\"model.axes.length\">\r\n      <h2 class=\"mat-title\">{{'Axes'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of model.axes\">\r\n          <!--<td class=\"mat-cell\">{{a.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n          <td class=\"mat-cell\">{{datatype(a.dataType)}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.indices.length\">\r\n      <h2 class=\"mat-title\">{{'Indices'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let a of model.indices\">\r\n          <!--<td class=\"mat-cell\">{{a.name}}</td>-->\r\n          <td class=\"mat-cell\">{{a.title}}</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <div *ngIf=\"model.views.length\">\r\n      <h2 class=\"mat-title\">{{'Views'|translate}}</h2>\r\n      <table class=\"mat-table\">\r\n        <tr class=\"mat-row\" *ngFor=\"let v of model.views\">\r\n          <td class=\"mat-cell\">{{v.title}}</td>\r\n          <!--<td class=\"mat-cell\">({{(v.type||'Chart')|translate}})</td>-->\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .mat-radio-group p{margin-inline-start:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: SystemService }, { type: PromptService }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -31470,61 +31628,253 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
 let WidgetDesignComponent = class WidgetDesignComponent extends DesignerTypeElementComponent {
     constructor() {
         super(...arguments);
-        this.form = this._fb.group({});
+        this.form = this._fb.group({
+            guide: null,
+        });
     }
     ngOnInit() {
-        if (!this.model.privileges)
-            this.model.privileges = {};
-        super.ngOnInit();
+        this.guides = this._ref.designer.guides;
     }
 };
 WidgetDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: WidgetDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-WidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: WidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\"\r\n                 (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
+WidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: WidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\" class=\"column\">\r\n  <mat-form-field *ngIf=\"guides.length\">\r\n    <mat-label>{{'Guide'|translate}}</mat-label>\r\n    <mat-select formControlName=\"guide\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title || g.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 WidgetDesignComponent = __decorate([
     BizDoc({ selector: 'widget-designer' })
 ], WidgetDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: WidgetDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\"\r\n                 (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\" class=\"column\">\r\n  <mat-form-field *ngIf=\"guides.length\">\r\n    <mat-label>{{'Guide'|translate}}</mat-label>\r\n    <mat-select formControlName=\"guide\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title || g.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n" }]
         }] });
 
-let ActionDesignComponent = class ActionDesignComponent extends DesignerTypeElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({});
+//[style.background-color]='value'
+class ColorPicker {
+    constructor(ngControl, _overlay, _vc, _element, _dir) {
+        this.ngControl = ngControl;
+        this._overlay = _overlay;
+        this._vc = _vc;
+        this._element = _element;
+        this._dir = _dir;
+        this.controlType = 'bizdoc-color-picker';
+        this._palettes = MATERIAL_PALETTES;
+        this.scales = ["50",
+            "100",
+            "200",
+            "300",
+            "400",
+            "500",
+            "600",
+            "700",
+            "800",
+            "900"];
+        this.colors = ["red",
+            "pink",
+            "purple",
+            "deepPurple",
+            "indigo",
+            "blue",
+            "lightBlue",
+            "cyan",
+            "teal",
+            "green",
+            "lightGreen",
+            "lime",
+            "yellow",
+            "amber",
+            "orange",
+            "brown",
+            "grey",
+            "blueGrey"];
+        this.Object = Object;
+        this._required = false;
+        this._disabled = false;
+        this.stateChanges = new Subject();
+        this.valueChanges = new Subject();
+        this.id = `color-picker-${ColorPicker.nextId++}`;
+        this.focused = false;
+        this.errorState = false;
+        this.describedBy = '';
+        this._destroy = new Subject();
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
     }
-};
-ActionDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ActionDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ActionDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }] });
-ActionDesignComponent = __decorate([
-    BizDoc({ selector: 'action-designer' })
-], ActionDesignComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ActionDesignComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n" }]
-        }] });
-
-let ReportDesignComponent = class ReportDesignComponent extends DesignerTypeElementComponent {
-    constructor() {
-        super(...arguments);
-        this.form = this._fb.group({
-            icon: null
-        });
+    writeValue(obj) {
+        this._value = obj;
     }
-    ngOnInit() {
-        if (!this.model.privileges)
-            this.model.privileges = {};
-        super.ngOnInit();
+    registerOnChange(fn) {
+        this._onChange = fn;
     }
-};
-ReportDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ReportDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
-ReportDesignComponent = __decorate([
-    BizDoc({ selector: 'report-designer' })
-], ReportDesignComponent);
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    get value() { return this._value; }
+    set value(val) {
+        this._value = val;
+        this._onChange && this._onChange(val);
+        this.valueChanges.next(val);
+        this.stateChanges.next();
+    }
+    get empty() {
+        return this._value === null;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(req) {
+        this._required = req;
+        this.stateChanges.next();
+    }
+    get disabled() { return this._disabled; }
+    set disabled(value) {
+        this._disabled = value;
+        this.stateChanges.next();
+    }
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
+    }
+    onContainerClick(_event) {
+        this._onTouched && this._onTouched();
+        this.open();
+    }
+    ngOnDestroy() {
+        this._destroy.next();
+        this._destroy.complete();
+    }
+    open() {
+        if (!this._overlayRef)
+            this._overlayRef = this._createOverlay();
+        const portal = new TemplatePortal(this._colorPalette, this._vc);
+        this._overlayRef.attach(portal);
+    }
+    close() {
+        this._overlayRef.detach();
+    }
+    _pick(color) {
+        this.value = color;
+        this.close();
+    }
+    _createOverlay() {
+        const ref = this._overlay.create({
+            positionStrategy: this._overlay.position().flexibleConnectedTo(this._element).withPositions([{
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top'
+                }, {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom'
+                }]),
+            direction: this._dir.value,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop'
+        });
+        merge(ref.backdropClick(), ref.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE))).subscribe(() => this.close());
+        return ref;
+    }
+}
+ColorPicker.nextId = 0;
+ColorPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, deps: [{ token: i2.NgControl, optional: true, self: true }, { token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1$4.Directionality }], target: i0.ɵɵFactoryTarget.Component });
+ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ColorPicker, selector: "bizdoc-color-picker", inputs: { label: "label", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], viewQueries: [{ propertyName: "_colorPalette", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9$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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizdoc-color-picker', providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], host: {
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                        '[attr.aria-describedby]': 'describedBy'
+                    }, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i1$4.Directionality }]; }, propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChanges: [{
+                type: Output
+            }], id: [{
+                type: HostBinding
+            }], shouldLabelFloat: [{
+                type: HostBinding,
+                args: ['class.floating']
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], describedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], _colorPalette: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
+var ActionDesignComponent_1;
+let ActionDesignComponent = ActionDesignComponent_1 = class ActionDesignComponent extends DesignerTypeElementComponent {
+    constructor() {
+        super(...arguments);
+        this.form = this._fb.group({
+            multiple: null,
+            color: null,
+            verb: null,
+            you: null,
+            youMale: null,
+            youFemale: null,
+            //titleMale: null,
+            //titleFemale: null,
+            past: null,
+            pastMale: null,
+            pastFemale: null,
+            adjective: null,
+            adjectivePlural: null,
+        });
+    }
+    ngOnInit() {
+        if (this.mode === 'edit') {
+            this.model.resource && this.lockResource(ActionDesignComponent_1.resources);
+            this._ref.lockChange.subscribe(() => this.lockResource(ActionDesignComponent_1.resources));
+        }
+    }
+};
+ActionDesignComponent.resources = ['you', 'youMale', 'youFemale', 'verb', 'past', 'pastMale', 'pastFemale', 'adjective', 'adjectivePlural'];
+ActionDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ActionDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActionDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ActionDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <div>\r\n    <mat-checkbox formControlName=\"multiple\">{{'Multiple'|translate}}</mat-checkbox>\r\n  </div>\r\n  <h2 class=\"mat-title\">{{'Labels'|translate}}</h2>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Past'|translate}}</mat-label>\r\n    <input matInput formControlName=\"past\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Verb'|translate}}</mat-label>\r\n    <input matInput formControlName=\"verb\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Adjective'|translate}}</mat-label>\r\n    <input matInput formControlName=\"adjective\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'AdjectivePlural'|translate}}</mat-label>\r\n    <input matInput formControlName=\"adjectivePlural\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'You'|translate}}</mat-label>\r\n    <input matInput formControlName=\"you\" />\r\n  </mat-form-field>\r\n  <div>\r\n    <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n  </div>\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ActionDesignComponent = ActionDesignComponent_1 = __decorate([
+    BizDoc({ selector: 'action-designer' })
+], ActionDesignComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ActionDesignComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <div>\r\n    <mat-checkbox formControlName=\"multiple\">{{'Multiple'|translate}}</mat-checkbox>\r\n  </div>\r\n  <h2 class=\"mat-title\">{{'Labels'|translate}}</h2>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Past'|translate}}</mat-label>\r\n    <input matInput formControlName=\"past\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Verb'|translate}}</mat-label>\r\n    <input matInput formControlName=\"verb\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Adjective'|translate}}</mat-label>\r\n    <input matInput formControlName=\"adjective\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'AdjectivePlural'|translate}}</mat-label>\r\n    <input matInput formControlName=\"adjectivePlural\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'You'|translate}}</mat-label>\r\n    <input matInput formControlName=\"you\" />\r\n  </mat-form-field>\r\n  <div>\r\n    <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n  </div>\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n" }]
+        }] });
+
+let ReportDesignComponent = class ReportDesignComponent extends DesignerTypeElementComponent {
+    constructor() {
+        super(...arguments);
+        this.form = this._fb.group({
+            guide: null,
+            icon: null
+        });
+    }
+    ngOnInit() {
+        this.guides = this._ref.designer.guides;
+    }
+};
+ReportDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ReportDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <div>\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </div>\r\n  <mat-form-field *ngIf=\"guides.length\">\r\n    <mat-label>{{'Guide'|translate}}</mat-label>\r\n    <mat-select formControlName=\"guide\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title || g.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ReportDesignComponent = __decorate([
+    BizDoc({ selector: 'report-designer' })
+], ReportDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ReportDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <div>\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </div>\r\n  <mat-form-field *ngIf=\"guides.length\">\r\n    <mat-label>{{'Guide'|translate}}</mat-label>\r\n    <mat-select formControlName=\"guide\">\r\n      <mat-option>{{'None'|translate}}</mat-option>\r\n      <mat-option *ngFor=\"let g of guides\" [value]=\"g.name\">{{g.title || g.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let ViewDesignComponent = class ViewDesignComponent extends DesignerTypeElementComponent {
@@ -31532,20 +31882,15 @@ let ViewDesignComponent = class ViewDesignComponent extends DesignerTypeElementC
         super(...arguments);
         this.form = this._fb.group({});
     }
-    ngOnInit() {
-        if (!this.model.privileges)
-            this.model.privileges = {};
-        super.ngOnInit();
-    }
 };
 ViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
+ViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\">\r\n</form>\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 ViewDesignComponent = __decorate([
     BizDoc({ selector: 'view-designer' })
 ], ViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\">\r\n</form>\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let TypeDesignComponent = class TypeDesignComponent extends DesignerTypeElementComponent {
@@ -31557,13 +31902,13 @@ let TypeDesignComponent = class TypeDesignComponent extends DesignerTypeElementC
     }
 };
 TypeDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TypeDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TypeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: TypeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+TypeDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: TypeDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 TypeDesignComponent = __decorate([
     BizDoc({ selector: 'type-designer' })
 ], TypeDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TypeDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\" (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <mat-slide-toggle formControlName=\"assignable\">{{'Assignable'|translate}}</mat-slide-toggle>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n</ng-template>\r\n" }]
         }] });
 
 let AnalysisWidgetDesignComponent = class AnalysisWidgetDesignComponent extends DesignerCubeElementComponent {
@@ -31591,13 +31936,13 @@ let AnalysisWidgetDesignComponent = class AnalysisWidgetDesignComponent extends
     }
 };
 AnalysisWidgetDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AnalysisWidgetDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AnalysisWidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AnalysisWidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" (selectionChange)=\"seriesSelected($event)\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n        <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n        <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n        <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n        <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n        <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n        <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n        <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indicesChartType\" [disabled]=\"isAccum\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <!--<div *ngIf=\"options.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"\r\n                         [cube]=\"cube.name\"\r\n                         [filters]=\"options.filters\"\r\n                         [xAxis]=\"options.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"options.xAxis\"\r\n                         [series]=\"options.series\"\r\n                         [indices]=\"options.indices\"\r\n                         [filters]=\"options.filters\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [indicesChartType]=\"options.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+AnalysisWidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AnalysisWidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>&nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" (selectionChange)=\"seriesSelected($event)\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'ChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"chartType\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\" *ngIf=\"options.indices?.length\">\r\n        <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indicesChartType\" [disabled]=\"isAccum\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n  <!--<div *ngIf=\"options.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"\r\n                         [cube]=\"cube.name\"\r\n                         [filters]=\"options.filters\"\r\n                         [xAxis]=\"options.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"options.xAxis\"\r\n                         [series]=\"options.series\"\r\n                         [indices]=\"options.indices\"\r\n                         [filters]=\"options.filters\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [indicesChartType]=\"options.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "model", "form"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 AnalysisWidgetDesignComponent = __decorate([
     BizDoc({ selector: 'analysis-widget-designer' })
 ], AnalysisWidgetDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AnalysisWidgetDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" (selectionChange)=\"seriesSelected($event)\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field>\r\n      <mat-label>{{'ChartType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"chartType\">\r\n        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n        <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n        <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n        <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n        <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n        <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n        <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n        <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n        <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n        <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n        <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n        <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n        <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n        <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n        <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n        <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n        <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n        <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n        <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube?.indices?.length\">\r\n      <mat-form-field>\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indicesChartType\" [disabled]=\"isAccum\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n  <!--<div *ngIf=\"options.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"\r\n                         [cube]=\"cube.name\"\r\n                         [filters]=\"options.filters\"\r\n                         [xAxis]=\"options.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"options.xAxis\"\r\n                         [series]=\"options.series\"\r\n                         [indices]=\"options.indices\"\r\n                         [filters]=\"options.filters\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [indicesChartType]=\"options.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'XAxis'|translate}}</mat-label>\r\n        <mat-select formControlName=\"xAxis\" required (selectionChange)=\"xAxisSelected($event)\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>&nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Series'|translate}}</mat-label>\r\n        <mat-select formControlName=\"series\" (selectionChange)=\"seriesSelected($event)\" multiple [disabled]=\"isAccum\">\r\n          <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple [disabled]=\"isAccum\">\r\n        <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <div class=\"row\">\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'ChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"chartType\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Pie\">{{'Pie'|translate}}</mat-option>\r\n          <mat-option value=\"Doughnut\">{{'Doughnut'|translate}}</mat-option>\r\n          <mat-option value=\"HalfDoughnut\">{{'HalfDoughnut'|translate}}</mat-option>\r\n          <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar\">{{'StackingBar'|translate}}</mat-option>\r\n          <mat-option value=\"StackingBar100\">{{'StackingBar100'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea\">{{'StackingArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingArea100\">{{'StackingArea100'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn\">{{'StackingColumn'|translate}}</mat-option>\r\n          <mat-option value=\"StackingColumn100\">{{'StackingColumn100'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingStepArea\">{{'StackingStepArea'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine\">{{'StackingLine'|translate}}</mat-option>\r\n          <mat-option value=\"StackingLine100\">{{'StackingLine100'|translate}}</mat-option>\r\n          <mat-option value=\"Funnel\">{{'Funnel'|translate}}</mat-option>\r\n          <mat-option value=\"Pyramid\">{{'Pyramid'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"flex\" *ngIf=\"options.indices?.length\">\r\n        <mat-label>{{'IndicesChartType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indicesChartType\" [disabled]=\"isAccum\">\r\n          <mat-option>{{'Default'|translate}}</mat-option>\r\n          <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n          <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n          <mat-option value=\"Bubble\">{{'Bubble'|translate}}</mat-option>\r\n          <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          <mat-option value=\"Spline\">{{'Spline'|translate}}</mat-option>\r\n          <mat-option value=\"Area\">{{'Area'|translate}}</mat-option>\r\n          <mat-option value=\"SplineArea\">{{'SplineArea'|translate}}</mat-option>\r\n          <mat-option value=\"Scatter\">{{'Scatter'|translate}}</mat-option>\r\n          <mat-option value=\"Polar\">{{'Polar'|translate}}</mat-option>\r\n          <mat-option value=\"Radar\">{{'Radar'|translate}}</mat-option>\r\n          <mat-option value=\"StepLine\">{{'StepLine'|translate}}</mat-option>\r\n          <mat-option value=\"StepArea\">{{'StepArea'|translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n  <!--<div *ngIf=\"options.xAxis\">\r\n    <ng-container [ngSwitch]=\"isAccum\">\r\n      <bizdoc-cube-accum *ngSwitchCase=\"true\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"\r\n                         [cube]=\"cube.name\"\r\n                         [filters]=\"options.filters\"\r\n                         [xAxis]=\"options.xAxis\"></bizdoc-cube-accum>\r\n      <bizdoc-cube-chart *ngSwitchDefault\r\n                         [cube]=\"cube.name\"\r\n                         [xAxis]=\"options.xAxis\"\r\n                         [series]=\"options.series\"\r\n                         [indices]=\"options.indices\"\r\n                         [filters]=\"options.filters\"\r\n                         [chartType]=\"options.chartType\"\r\n                         [indicesChartType]=\"options.indicesChartType\"\r\n                         [width]=\"200\"\r\n                         [scope]=\"options.scope\"></bizdoc-cube-chart>\r\n    </ng-container>\r\n  </div>-->\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let ExploreViewDesignComponent = class ExploreViewDesignComponent extends DesignerCubeElementComponent {
@@ -31613,13 +31958,13 @@ let ExploreViewDesignComponent = class ExploreViewDesignComponent extends Design
     }
 };
 ExploreViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ExploreViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ExploreViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ExploreViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"editMode; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple>\r\n      <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info>\r\n  <dl>\r\n  </dl>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ExploreViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ExploreViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"mode === 'edit'; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple>\r\n      <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title }}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info>\r\n  <dl>\r\n  </dl>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ExploreViewDesignComponent = __decorate([
     BizDoc({ selector: 'explore-view-designer' })
 ], ExploreViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ExploreViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form *ngIf=\"editMode; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple>\r\n      <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info>\r\n  <dl>\r\n  </dl>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form *ngIf=\"mode === 'edit'; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple>\r\n      <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title }}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info>\r\n  <dl>\r\n  </dl>\r\n</ng-template>\r\n" }]
         }] });
 
 let TasksReportDesignComponent = class TasksReportDesignComponent extends DesignerCubeElementComponent {
@@ -31638,13 +31983,13 @@ let TasksReportDesignComponent = class TasksReportDesignComponent extends Design
     }
 };
 TasksReportDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TasksReportDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TasksReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: TasksReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"axes\" required multiple >\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'States'|translate}}</mat-label>\r\n      <mat-select formControlName=\"states\" multiple>\r\n        <mat-option *ngFor=\"let x of states\" [value]=\"x.name\" multiple>{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+TasksReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: TasksReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"axes\" required multiple >\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'States'|translate}}</mat-label>\r\n      <mat-select formControlName=\"states\" multiple>\r\n        <mat-option *ngFor=\"let x of states\" [value]=\"x.name\" multiple>{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 TasksReportDesignComponent = __decorate([
     BizDoc({ selector: 'tasks-report-designer' })
 ], TasksReportDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: TasksReportDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"axes\" required multiple >\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'States'|translate}}</mat-label>\r\n      <mat-select formControlName=\"states\" multiple>\r\n        <mat-option *ngFor=\"let x of states\" [value]=\"x.name\" multiple>{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option>{{'Default'|translate}}</mat-option>\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"axes\" required multiple >\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'States'|translate}}</mat-label>\r\n      <mat-select formControlName=\"states\" multiple>\r\n        <mat-option *ngFor=\"let x of states\" [value]=\"x.name\" multiple>{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let DocumentsReportDesignComponent = class DocumentsReportDesignComponent extends DesignerCubeElementComponent {
@@ -31658,13 +32003,13 @@ let DocumentsReportDesignComponent = class DocumentsReportDesignComponent extend
     }
 };
 DocumentsReportDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DocumentsReportDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DocumentsReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DocumentsReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+DocumentsReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DocumentsReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 DocumentsReportDesignComponent = __decorate([
     BizDoc({ selector: 'documents-report-designer' })
 ], DocumentsReportDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DocumentsReportDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let PerformanceWidgetDesignComponent = class PerformanceWidgetDesignComponent extends DesignerCubeElementComponent {
@@ -31679,13 +32024,13 @@ let PerformanceWidgetDesignComponent = class PerformanceWidgetDesignComponent ex
     }
 };
 PerformanceWidgetDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PerformanceWidgetDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PerformanceWidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PerformanceWidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required>\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+PerformanceWidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PerformanceWidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required>\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 PerformanceWidgetDesignComponent = __decorate([
     BizDoc({ selector: 'performance-widget-designer' })
 ], PerformanceWidgetDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PerformanceWidgetDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required>\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required>\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title||x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let DocumentsWidgetDesignComponent = class DocumentsWidgetDesignComponent extends DesignerCubeElementComponent {
@@ -31703,13 +32048,13 @@ let DocumentsWidgetDesignComponent = class DocumentsWidgetDesignComponent extend
     }
 };
 DocumentsWidgetDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DocumentsWidgetDesignComponent, deps: [{ token: i2.FormBuilder }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component });
-DocumentsWidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DocumentsWidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+DocumentsWidgetDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: DocumentsWidgetDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 DocumentsWidgetDesignComponent = __decorate([
     BizDoc({ selector: 'documents-widget-designer' })
 ], DocumentsWidgetDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: DocumentsWidgetDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select formControlName=\"cube\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -31755,16 +32100,16 @@ let UsageReportDesignComponent = class UsageReportDesignComponent extends Design
     }
 };
 UsageReportDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageReportDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UsageReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UsageReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple>\r\n            <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n  </form>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n    </ng-container>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+UsageReportDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UsageReportDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple>\r\n            <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "model", "form"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 UsageReportDesignComponent = __decorate([
     BizDoc({ selector: 'usage-report-designer' })
 ], UsageReportDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UsageReportDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple>\r\n            <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n  </form>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n    </ng-container>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-radio-group [formControl]=\"type\" (change)=\"typechange($event)\">\r\n      <mat-radio-button value=\"Chart\">{{'Chart'|translate}}</mat-radio-button>\r\n      <mat-radio-button value=\"Pivot\">{{'Pivot'|translate}}</mat-radio-button>\r\n    </mat-radio-group>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" multiple (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container [ngSwitch]=\"type.value\">\r\n      <ng-container *ngSwitchCase=\"'Pivot'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'XAxis'|translate}}</mat-label>\r\n          <mat-select formControlName=\"xAxis\" multiple>\r\n            <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n      <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n        <mat-label>{{'Indices'|translate}}</mat-label>\r\n        <mat-select formControlName=\"indices\" multiple>\r\n          <mat-option *ngFor=\"let x of cube?.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <ng-container *ngSwitchCase=\"'Chart'\">\r\n        <mat-form-field>\r\n          <mat-label>{{'ChartType'|translate}}</mat-label>\r\n          <mat-select formControlName=\"chartType\">\r\n            <mat-option value=\"Column\">{{'Column'|translate}}</mat-option>\r\n            <mat-option value=\"Bar\">{{'Bar'|translate}}</mat-option>\r\n            <mat-option value=\"Line\">{{'Line'|translate}}</mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
-let AnomalyRuleDesignComponent = class AnomalyRuleDesignComponent extends DesignerElementComponent {
+let AnomalyRuleDesignComponent = class AnomalyRuleDesignComponent extends DesignerElementComponentBase {
     constructor() {
         super(...arguments);
         this.form = this._fb.group({});
@@ -31773,16 +32118,16 @@ let AnomalyRuleDesignComponent = class AnomalyRuleDesignComponent extends Design
     }
 };
 AnomalyRuleDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AnomalyRuleDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AnomalyRuleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AnomalyRuleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+AnomalyRuleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AnomalyRuleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 AnomalyRuleDesignComponent = __decorate([
     BizDoc({ selector: 'anomaly-rule-designer' })
 ], AnomalyRuleDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AnomalyRuleDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-let BoxFormDesignComponent = class BoxFormDesignComponent extends DesignerElementComponent {
+let BoxFormDesignComponent = class BoxFormDesignComponent extends DesignerElementComponentBase {
     constructor() {
         super(...arguments);
         this.form = this._fb.group({});
@@ -31795,13 +32140,13 @@ let BoxFormDesignComponent = class BoxFormDesignComponent extends DesignerElemen
     }
 };
 BoxFormDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BoxFormDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BoxFormDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: BoxFormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+BoxFormDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: BoxFormDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 BoxFormDesignComponent = __decorate([
     BizDoc({ selector: 'box-form-designer' })
 ], BoxFormDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: BoxFormDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let CubeViewDesignComponent = class CubeViewDesignComponent extends DesignerCubeElementComponent {
@@ -31816,13 +32161,13 @@ let CubeViewDesignComponent = class CubeViewDesignComponent extends DesignerCube
     }
 };
 CubeViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CubeViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"editMode; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Filters'|translate}}</mat-label>\r\n    <mat-select formControlName=\"filters\" multiple (selectionChange)=\"xAxisSelected($event)\">\r\n      <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!secondaryAxes || !secondaryAxes.length\">\r\n      <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n    <mat-hint></mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+CubeViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"mode === 'edit'; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Filters'|translate}}</mat-label>\r\n    <mat-select formControlName=\"filters\" multiple (selectionChange)=\"xAxisSelected($event)\">\r\n      <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!secondaryAxes || !secondaryAxes.length\">\r\n      <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n    <mat-hint></mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 CubeViewDesignComponent = __decorate([
     BizDoc({ selector: 'cube-view-designer' })
 ], CubeViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form *ngIf=\"editMode; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Filters'|translate}}</mat-label>\r\n    <mat-select formControlName=\"filters\" multiple (selectionChange)=\"xAxisSelected($event)\">\r\n      <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!secondaryAxes || !secondaryAxes.length\">\r\n      <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n    <mat-hint></mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<form *ngIf=\"mode === 'edit'; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Filters'|translate}}</mat-label>\r\n    <mat-select formControlName=\"filters\" multiple (selectionChange)=\"xAxisSelected($event)\">\r\n      <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n    <mat-select formControlName=\"aggregate\" multiple  [disabled]=\"!secondaryAxes || !secondaryAxes.length\">\r\n      <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n    </mat-select>\r\n    <mat-hint></mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let PivotViewDesignComponent = class PivotViewDesignComponent extends DesignerCubeElementComponent {
@@ -31842,13 +32187,13 @@ let PivotViewDesignComponent = class PivotViewDesignComponent extends DesignerCu
     }
 };
 PivotViewDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PivotViewDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PivotViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PivotViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+PivotViewDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: PivotViewDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "model", "form"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 PivotViewDesignComponent = __decorate([
     BizDoc({ selector: 'pivot-view-designer' })
 ], PivotViewDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: PivotViewDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n  <ng-container *ngIf=\"cube\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <bizdoc-cube-filter [cube]=\"cube.name\" [(axes)]=\"form.controls.filters.value\"></bizdoc-cube-filter>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field *ngIf=\"cubes.length > 1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'XAxis'|translate}}</mat-label>\r\n      <mat-select formControlName=\"xAxis\" required multiple (selectionChange)=\"xAxisSelected($event)\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Series'|translate}}</mat-label>\r\n      <mat-select formControlName=\"series\" required multiple (selectionChange)=\"seriesSelected($event)\">\r\n        <mat-option *ngFor=\"let x of secondaryAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"cube?.indices?.length\">\r\n      <mat-label>{{'Indices'|translate}}</mat-label>\r\n      <mat-select formControlName=\"indices\" multiple>\r\n        <mat-option *ngFor=\"let x of cube.indices\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Aggregate'|translate}}</mat-label>\r\n      <mat-select formControlName=\"aggregate\" multiple [disabled]=\"!thirdAxes || !thirdAxes.length\">\r\n        <mat-option *ngFor=\"let x of thirdAxes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <ng-container *ngIf=\"cube\">\r\n      <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n      <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.get('filters')\" [model]=\"options.filters\"></bizdoc-designer-cube-filter>\r\n    </ng-container>\r\n  </form>\r\n</ng-container>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 let UtilityDesignComponent = class UtilityDesignComponent extends DesignerTypeElementComponent {
@@ -31858,43 +32203,53 @@ let UtilityDesignComponent = class UtilityDesignComponent extends DesignerTypeEl
             icon: null,
         });
     }
-    ngOnInit() {
-        if (!this.model.privileges)
-            this.model.privileges = {};
-        super.ngOnInit();
-    }
 };
 UtilityDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UtilityDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UtilityDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UtilityDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\"\r\n                 (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
+UtilityDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: UtilityDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }] });
 UtilityDesignComponent = __decorate([
     BizDoc({ selector: 'utility-designer' })
 ], UtilityDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: UtilityDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\" [model]=\"model.options\"\r\n                 (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let FolderDesignComponent = class FolderDesignComponent extends DesignerTypeElementComponent {
     constructor() {
         super(...arguments);
+        this.columns = this._fb.array([]);
         this.form = this._fb.group({
-            icon: null
+            icon: null,
+            filters: this._fb.group({
+                cube: null,
+                axes: null
+            }),
+            columns: this.columns
         });
     }
     ngOnInit() {
-        if (!this.model.privileges)
-            this.model.privileges = {};
-        super.ngOnInit();
+        this.cubes = this._ref.designer.cubes;
+        this.model.columns?.forEach(c => this.columns.push(this._formcolumn(c), { emitEvent: false }));
+        this.cube = this.model.filters?.cube ? this._ref.designer.cubes.find(c => c.name === this.model.filters.cube) :
+            this._ref.designer.cubes[0];
     }
+    _formcolumn(column) {
+        return this._fb.group({
+            name: this._fb.control(column?.name, Validators.required),
+            title: this._fb.control(column?.title, Validators.required),
+            type: column?.type,
+        });
+    }
+    add() { this.columns.push(this._formcolumn()); }
 };
 FolderDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FolderDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FolderDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FolderDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }] });
+FolderDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: FolderDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <div>\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </div>\r\n  <ng-container formGroupName=\"filters\" *ngIf=\"cubes.length\" class=\"column\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Axes'|translate}}</mat-label>\r\n      <mat-select formControlName=\"axes\" multiple [disabled]=\"!cube\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </ng-container>\r\n  <h2 class=\"mat-title\">{{'Columns'|translate}}</h2>\r\n  <div formArrayName=\"columns\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, columns)\">\r\n    <div class=\"row\" *ngFor=\"let c of columns.controls; index as index\" [formGroup]=\"c\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required [matAutocomplete]=\"names\"/>\r\n        <mat-autocomplete #names=\"matAutocomplete\">\r\n          <mat-option value=\"number\">{{'Number'|translate}}</mat-option>\r\n          <mat-option value=\"subject\">{{'Subject'|translate}}</mat-option>\r\n          <mat-option value=\"value\">{{'Value'|translate}}</mat-option>\r\n          <mat-option value=\"owner\">{{'Owner'|translate}}</mat-option>\r\n          <mat-option value=\"sender\">{{'Sender'|translate}}</mat-option>\r\n          <mat-option value=\"received\">{{'Received'|translate}}</mat-option>\r\n          <mat-option value=\"receivedAgo\">{{'ReceivedAgo'|translate}}</mat-option>\r\n          <mat-option value=\"replied\">{{'Replied'|translate}}</mat-option>\r\n          <mat-option value=\"state\">{{'State'|translate}}</mat-option>\r\n          <mat-option value=\"issued\">{{'Issued'|translate}}</mat-option>\r\n          <mat-option value=\"issuedAgo\">{{'IssuedAgo'|translate}}</mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"type\">\r\n          <mat-option value=\"String\">{{'Text'}}</mat-option>\r\n          <mat-option value=\"Decimal\">{{'Numeric'}}</mat-option>\r\n          <mat-option value=\"Date\">{{'Date'}}</mat-option>\r\n          <mat-option value=\"Boolean\">{{'Boolean'}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"columns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 FolderDesignComponent = __decorate([
     BizDoc({ selector: 'folder-designer' })
 ], FolderDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: FolderDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <div>\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n  </div>\r\n  <ng-container formGroupName=\"filters\" *ngIf=\"cubes.length\" class=\"column\">\r\n    <h2 class=\"mat-title\">{{'Filters'|translate}}</h2>\r\n    <mat-form-field *ngIf=\"cubes.length>1\">\r\n      <mat-label>{{'Cube'|translate}}</mat-label>\r\n      <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n        <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-form-field>\r\n      <mat-label>{{'Axes'|translate}}</mat-label>\r\n      <mat-select formControlName=\"axes\" multiple [disabled]=\"!cube\">\r\n        <mat-option *ngFor=\"let x of cube?.axes\" [value]=\"x.name\">{{x.title || x.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </ng-container>\r\n  <h2 class=\"mat-title\">{{'Columns'|translate}}</h2>\r\n  <div formArrayName=\"columns\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, columns)\">\r\n    <div class=\"row\" *ngFor=\"let c of columns.controls; index as index\" [formGroup]=\"c\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" required />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required [matAutocomplete]=\"names\"/>\r\n        <mat-autocomplete #names=\"matAutocomplete\">\r\n          <mat-option value=\"number\">{{'Number'|translate}}</mat-option>\r\n          <mat-option value=\"subject\">{{'Subject'|translate}}</mat-option>\r\n          <mat-option value=\"value\">{{'Value'|translate}}</mat-option>\r\n          <mat-option value=\"owner\">{{'Owner'|translate}}</mat-option>\r\n          <mat-option value=\"sender\">{{'Sender'|translate}}</mat-option>\r\n          <mat-option value=\"received\">{{'Received'|translate}}</mat-option>\r\n          <mat-option value=\"receivedAgo\">{{'ReceivedAgo'|translate}}</mat-option>\r\n          <mat-option value=\"replied\">{{'Replied'|translate}}</mat-option>\r\n          <mat-option value=\"state\">{{'State'|translate}}</mat-option>\r\n          <mat-option value=\"issued\">{{'Issued'|translate}}</mat-option>\r\n          <mat-option value=\"issuedAgo\">{{'IssuedAgo'|translate}}</mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field>\r\n        <mat-label>{{'DataType'|translate}}</mat-label>\r\n        <mat-select formControlName=\"type\">\r\n          <mat-option value=\"String\">{{'Text'}}</mat-option>\r\n          <mat-option value=\"Decimal\">{{'Numeric'}}</mat-option>\r\n          <mat-option value=\"Date\">{{'Date'}}</mat-option>\r\n          <mat-option value=\"Boolean\">{{'Boolean'}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"columns.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let GuideDesignComponent = class GuideDesignComponent extends DesignerTypeElementComponent {
@@ -31906,13 +32261,10 @@ let GuideDesignComponent = class GuideDesignComponent extends DesignerTypeElemen
         });
     }
     ngOnInit() {
-        if (!this.model.privileges)
-            this.model.privileges = {};
         if (!this.model.steps)
             this.model.steps = [];
-        else if (this.editMode)
+        else if (this.mode === 'edit')
             this.model.steps.forEach(s => this.steps.push(this._stepform(s), { emitEvent: false }));
-        super.ngOnInit();
     }
     add() {
         this.steps.push(this._stepform());
@@ -31930,13 +32282,13 @@ let GuideDesignComponent = class GuideDesignComponent extends DesignerTypeElemen
     }
 };
 GuideDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: GuideDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GuideDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: GuideDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <h2 class=\"mat-title\">{{'Steps'|translate}}</h2>\r\n  <div formArrayName=\"steps\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, this.steps)\">\r\n    <div class=\"row\" *ngFor=\"let s of steps.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Content'|translate}}</mat-label>\r\n        <input matInput formControlName=\"content\" required />\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"remove(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <dl>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n  </dl>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: PrivilegesDesignComponent, selector: "bizdoc-privileges", inputs: ["model"], outputs: ["change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+GuideDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: GuideDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <h2 class=\"mat-title\">{{'Steps'|translate}}</h2>\r\n  <div formArrayName=\"steps\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, this.steps)\">\r\n    <div class=\"row\" *ngFor=\"let s of steps.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Content'|translate}}</mat-label>\r\n        <input matInput formControlName=\"content\" required />\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"remove(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <dl>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n  </dl>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 GuideDesignComponent = __decorate([
     BizDoc({ selector: 'guide-designer' })
 ], GuideDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: GuideDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <h2 class=\"mat-title\">{{'Steps'|translate}}</h2>\r\n  <div formArrayName=\"steps\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, this.steps)\">\r\n    <div class=\"row\" *ngFor=\"let s of steps.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Content'|translate}}</mat-label>\r\n        <input matInput formControlName=\"content\" required />\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"remove(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n\r\n  <bizdoc-privileges (change)=\"setPrivilieges($event)\" [model]=\"model.privileges\"></bizdoc-privileges>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <dl>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n  </dl>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <h2 class=\"mat-title\">{{'Steps'|translate}}</h2>\r\n  <div formArrayName=\"steps\" class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, this.steps)\">\r\n    <div class=\"row\" *ngFor=\"let s of steps.controls; index as index\" [formGroup]=\"s\" cdkDrag>\r\n      <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Title'|translate}}</mat-label>\r\n        <input matInput formControlName=\"title\" />\r\n      </mat-form-field>\r\n      &nbsp;\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Content'|translate}}</mat-label>\r\n        <input matInput formControlName=\"content\" required />\r\n      </mat-form-field>\r\n      <button mat-icon-button (click)=\"remove(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n    </div>\r\n  </div>\r\n  <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <dl>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n    <dt></dt>\r\n    <dd></dd>\r\n  </dl>\r\n</ng-template>\r\n" }]
         }] });
 
 let RuleDesignComponent = class RuleDesignComponent extends DesignerTypeElementComponent {
@@ -31946,13 +32298,13 @@ let RuleDesignComponent = class RuleDesignComponent extends DesignerTypeElementC
     }
 };
 RuleDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RuleDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RuleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: RuleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\"\r\n                 [model]=\"model.options\"\r\n                 (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "bizdoc-layout", inputs: ["fields", "model", "dirty", "params", "valid"], outputs: ["modelChange", "dirtyChange", "validChange"] }] });
+RuleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: RuleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\">\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 RuleDesignComponent = __decorate([
     BizDoc({ selector: 'rule-designer' })
 ], RuleDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RuleDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"editMode; else info\">\r\n  <bizdoc-layout *ngIf=\"model.arguments\" [fields]=\"model.arguments\"\r\n                 [model]=\"model.options\"\r\n                 (modelChange)=\"setOptions($event)\"></bizdoc-layout>\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" *ngIf=\"mode === 'edit'; else info\">\r\n</form>\r\n<ng-template #info>\r\n</ng-template>\r\n" }]
         }] });
 
 let RoleDesignComponent = class RoleDesignComponent extends DesignerTypeElementComponent {
@@ -31963,211 +32315,57 @@ let RoleDesignComponent = class RoleDesignComponent extends DesignerTypeElementC
         });
     }
     ngOnInit() {
-        if (this.editMode)
+        if (this.mode === 'edit') {
             this.types = this._ref.designer.types.filter(t => t.assignable);
+            this.form.get('dataType').disable({ emitEvent: false });
+            this.dataTypeDisabled = !this.model.draft;
+        }
+    }
+    enableTypeEdit() {
+        this.dataTypeDisabled = false;
+        this.form.get('dataType').enable({ emitEvent: false });
     }
 };
 RoleDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RoleDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RoleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: RoleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n    <dl>\r\n      <dt></dt>\r\n      <dd></dd>\r\n    </dl>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+RoleDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: RoleDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint *ngIf=\"dataTypeDisabled\"><a (click)=\"enableTypeEdit()\">{{'change'|translate}}</a></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n    <dl>\r\n      <dt></dt>\r\n      <dd></dd>\r\n    </dl>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 RoleDesignComponent = __decorate([
     BizDoc({ selector: 'role-designer' })
 ], RoleDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: RoleDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n    <dl>\r\n      <dt></dt>\r\n      <dd></dd>\r\n    </dl>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-label>{{'DataType'|translate}}</mat-label>\r\n      <mat-select formControlName=\"dataType\" required>\r\n        <mat-option *ngFor=\"let t of types\" [value]=\"t.name\">{{t.title}}</mat-option>\r\n      </mat-select>\r\n      <mat-hint *ngIf=\"dataTypeDisabled\"><a (click)=\"enableTypeEdit()\">{{'change'|translate}}</a></mat-hint>\r\n    </mat-form-field>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n    <dl>\r\n      <dt></dt>\r\n      <dd></dd>\r\n    </dl>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-//[style.background-color]='value'
-class ColorPicker {
-    constructor(ngControl, _overlay, _vc, _element, _dir) {
-        this.ngControl = ngControl;
-        this._overlay = _overlay;
-        this._vc = _vc;
-        this._element = _element;
-        this._dir = _dir;
-        this.controlType = 'bizdoc-color-picker';
-        this._palettes = MATERIAL_PALETTES;
-        this.scales = ["50",
-            "100",
-            "200",
-            "300",
-            "400",
-            "500",
-            "600",
-            "700",
-            "800",
-            "900"];
-        this.colors = ["red",
-            "pink",
-            "purple",
-            "deepPurple",
-            "indigo",
-            "blue",
-            "lightBlue",
-            "cyan",
-            "teal",
-            "green",
-            "lightGreen",
-            "lime",
-            "yellow",
-            "amber",
-            "orange",
-            "brown",
-            "grey",
-            "blueGrey"];
-        this.Object = Object;
-        this._required = false;
-        this._disabled = false;
-        this.stateChanges = new Subject();
-        this.valueChanges = new Subject();
-        this.id = `color-picker-${ColorPicker.nextId++}`;
-        this.focused = false;
-        this.errorState = false;
-        this.describedBy = '';
-        this._destroy = new Subject();
-        if (this.ngControl != null) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    writeValue(obj) {
-        this._value = obj;
-    }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    get value() { return this._value; }
-    set value(val) {
-        this._value = val;
-        this._onChange && this._onChange(val);
-        this.valueChanges.next(val);
-        this.stateChanges.next();
-    }
-    get empty() {
-        return this._value === null;
-    }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-    get required() {
-        return this._required;
-    }
-    set required(req) {
-        this._required = req;
-        this.stateChanges.next();
-    }
-    get disabled() { return this._disabled; }
-    set disabled(value) {
-        this._disabled = value;
-        this.stateChanges.next();
-    }
-    setDescribedByIds(ids) {
-        this.describedBy = ids.join(' ');
-    }
-    onContainerClick(_event) {
-        this._onTouched && this._onTouched();
-        this.open();
-    }
-    ngOnDestroy() {
-        this._destroy.next();
-        this._destroy.complete();
-    }
-    open() {
-        if (!this._overlayRef)
-            this._overlayRef = this._createOverlay();
-        const portal = new TemplatePortal(this._colorPalette, this._vc);
-        this._overlayRef.attach(portal);
-    }
-    close() {
-        this._overlayRef.detach();
-    }
-    _pick(color) {
-        this.value = color;
-        this.close();
-    }
-    _createOverlay() {
-        const ref = this._overlay.create({
-            positionStrategy: this._overlay.position().flexibleConnectedTo(this._element).withPositions([{
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top'
-                }, {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom'
-                }]),
-            direction: this._dir.value,
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop'
-        });
-        merge(ref.backdropClick(), ref.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE))).subscribe(() => this.close());
-        return ref;
-    }
-}
-ColorPicker.nextId = 0;
-ColorPicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, deps: [{ token: i2.NgControl, optional: true, self: true }, { token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1$4.Directionality }], target: i0.ɵɵFactoryTarget.Component });
-ColorPicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ColorPicker, selector: "bizdoc-color-picker", inputs: { label: "label", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], viewQueries: [{ propertyName: "_colorPalette", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9$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"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ColorPicker, decorators: [{
-            type: Component,
-            args: [{ selector: 'bizdoc-color-picker', providers: [{ provide: MatFormFieldControl, useExisting: ColorPicker }], host: {
-                        '[class.floating]': 'shouldLabelFloat',
-                        '[id]': 'id',
-                        '[attr.aria-describedby]': 'describedBy'
-                    }, template: "<button mat-button (click)='open()' [disabled]=\"disabled\">\r\n  <span>{{label}}</span>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"color-palette\">\r\n    <div *ngFor='let p of Object.keys(_palettes)' class=\"color-container\">\r\n      <span *ngFor='let c of Object.keys(_palettes[p])' (click)='_pick(_palettes[p][c])' [style.background-color]='_palettes[p][c]' class=\"color-item\"></span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".color-palette{display:flex;flex-direction:column}.color-palette .color-container{display:flex}button{width:100%}.color-item{width:20px;height:20px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i1$4.Directionality }]; }, propDecorators: { label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChanges: [{
-                type: Output
-            }], id: [{
-                type: HostBinding
-            }], shouldLabelFloat: [{
-                type: HostBinding,
-                args: ['class.floating']
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], describedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedby']
-            }], _colorPalette: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
-
-let StateDesignComponent = class StateDesignComponent extends DesignerTypeElementComponent {
+var StateDesignComponent_1;
+let StateDesignComponent = StateDesignComponent_1 = class StateDesignComponent extends DesignerTypeElementComponent {
     constructor() {
         super(...arguments);
         this.form = this._fb.group({
+            past: null,
+            future: null,
             color: null,
             backgroundColor: null
         });
     }
+    ngOnInit() {
+        if (this.mode === 'edit') {
+            this.model.resource && this.lockResource(StateDesignComponent_1.resources);
+            this._ref.lockChange.subscribe(() => this.lockResource(StateDesignComponent_1.resources));
+        }
+    }
 };
+StateDesignComponent.resources = ['past', 'future'];
 StateDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StateDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StateDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: StateDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <div class=\"row\">\r\n    <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n    <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n  </div>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-StateDesignComponent = __decorate([
+StateDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: StateDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <div class=\"row\">\r\n    <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n    <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n  </div>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Past'|translate}}</mat-label>\r\n    <input matInput formControlName=\"past\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Future'|translate}}</mat-label>\r\n    <input matInput formControlName=\"future\"  />\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+StateDesignComponent = StateDesignComponent_1 = __decorate([
     BizDoc({ selector: 'state-designer' })
 ], StateDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StateDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"editMode; else info\">\r\n  <div class=\"row\">\r\n    <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n    <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n  </div>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\" *ngIf=\"mode === 'edit'; else info\">\r\n  <div class=\"row\">\r\n    <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n    <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n  </div>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Past'|translate}}</mat-label>\r\n    <input matInput formControlName=\"past\" />\r\n  </mat-form-field>\r\n  <mat-form-field class=\"flex\">\r\n    <mat-label>{{'Future'|translate}}</mat-label>\r\n    <input matInput formControlName=\"future\"  />\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
-let ReturnToRoleActionDesignComponent = class ReturnToRoleActionDesignComponent extends DesignerElementComponent {
+let ReturnToRoleActionDesignComponent = class ReturnToRoleActionDesignComponent extends DesignerElementComponentBase {
     constructor() {
         super(...arguments);
         this.form = this._fb.group({
@@ -32179,16 +32377,16 @@ let ReturnToRoleActionDesignComponent = class ReturnToRoleActionDesignComponent
     }
 };
 ReturnToRoleActionDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ReturnToRoleActionDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ReturnToRoleActionDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ReturnToRoleActionDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"editMode; else info\" autocomplete=\"off\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Role'|translate}}</mat-label>\r\n    <mat-select formControlName=\"roleId\" required>\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title || r.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ReturnToRoleActionDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ReturnToRoleActionDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"mode === 'edit'; else info\" autocomplete=\"off\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Role'|translate}}</mat-label>\r\n    <mat-select formControlName=\"roleId\" required>\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title || r.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ReturnToRoleActionDesignComponent = __decorate([
     BizDoc({ selector: 'return-to-role-designer' })
 ], ReturnToRoleActionDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ReturnToRoleActionDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form *ngIf=\"editMode; else info\" autocomplete=\"off\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Role'|translate}}</mat-label>\r\n    <mat-select formControlName=\"roleId\" required>\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title || r.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<form *ngIf=\"mode === 'edit'; else info\" autocomplete=\"off\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-label>{{'Role'|translate}}</mat-label>\r\n    <mat-select formControlName=\"roleId\" required>\r\n      <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title || r.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<!---->\r\n<ng-template #info>\r\n</ng-template>\r\n" }]
         }] });
 
-let ConfigurationDatasourceDesignComponent = class ConfigurationDatasourceDesignComponent extends DesignerElementComponent {
+let ConfigurationDatasourceDesignComponent = class ConfigurationDatasourceDesignComponent extends DesignerElementComponentBase {
     constructor() {
         super(...arguments);
         this.items = this._fb.array([]);
@@ -32228,13 +32426,13 @@ let ConfigurationDatasourceDesignComponent = class ConfigurationDatasourceDesign
     }
 };
 ConfigurationDatasourceDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ConfigurationDatasourceDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ConfigurationDatasourceDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ConfigurationDatasourceDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-title\">{{'Items'|translate}}</h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Value'|translate}}</mat-label>\r\n          <input matInput formControlName=\"value\" required />\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+ConfigurationDatasourceDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ConfigurationDatasourceDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-title\">{{'Items'|translate}}</h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Value'|translate}}</mat-label>\r\n          <input matInput formControlName=\"value\" required />\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i9$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"] }, { kind: "directive", type: i10$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 ConfigurationDatasourceDesignComponent = __decorate([
     BizDoc({ selector: 'configuration-datasource-designer' })
 ], ConfigurationDatasourceDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ConfigurationDatasourceDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container *ngIf=\"editMode; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-title\">{{'Items'|translate}}</h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Value'|translate}}</mat-label>\r\n          <input matInput formControlName=\"value\" required />\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
+            args: [{ template: "<ng-container *ngIf=\"mode === 'edit'; else info\">\r\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n    <h2 class=\"mat-title\">{{'Items'|translate}}</h2>\r\n    <div class=\"column\" cdkDropList (cdkDropListDropped)=\"drop($event, items)\">\r\n      <div class=\"row\" *ngFor=\"let a of items.controls; index as index\" [formGroup]=\"a\" cdkDrag>\r\n        <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Key'|translate}}</mat-label>\r\n          <input matInput formControlName=\"key\" required />\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field class=\"flex\">\r\n          <mat-label>{{'Value'|translate}}</mat-label>\r\n          <input matInput formControlName=\"value\" required />\r\n        </mat-form-field>\r\n        <button mat-icon-button (click)=\"items.removeAt(index)\" [bizdocTooltip]=\"'Remove'|translate\"><mat-icon>delete</mat-icon></button>\r\n      </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"add()\" [bizdocTooltip]=\"'Add'|translate\"><mat-icon>add</mat-icon></button>\r\n  </form>\r\n</ng-container>\r\n<!---->\r\n<ng-template #info>\r\n  <div>\r\n  </div>\r\n</ng-template>\r\n" }]
         }] });
 
 let CubeIndexDesignComponent = class CubeIndexDesignComponent extends DesignerCubeElementComponent {
@@ -32247,13 +32445,13 @@ let CubeIndexDesignComponent = class CubeIndexDesignComponent extends DesignerCu
     }
 };
 CubeIndexDesignComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeIndexDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CubeIndexDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeIndexDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"editMode; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Index'|translate}}</mat-label>\r\n    <mat-select formControlName=\"index\">\r\n      <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title || i.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+CubeIndexDesignComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: CubeIndexDesignComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"mode === 'edit'; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Index'|translate}}</mat-label>\r\n    <mat-select formControlName=\"index\">\r\n      <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title || i.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info></ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 CubeIndexDesignComponent = __decorate([
     BizDoc({ selector: 'cube-index-designer' })
 ], CubeIndexDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: CubeIndexDesignComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form *ngIf=\"editMode; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Index'|translate}}</mat-label>\r\n    <mat-select formControlName=\"index\">\r\n      <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title || i.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info></ng-template>\r\n" }]
+            args: [{ template: "<form *ngIf=\"mode === 'edit'; else info\" autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"cubes.length>1\">\r\n    <mat-label>{{'Cube'|translate}}</mat-label>\r\n    <mat-select required (selectionChange)=\"cubeSelected($event)\">\r\n      <mat-option *ngFor=\"let c of cubes\" [value]=\"c\">{{c.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-label>{{'Index'|translate}}</mat-label>\r\n    <mat-select formControlName=\"index\">\r\n      <mat-option *ngFor=\"let i of cube.indices\" [value]=\"i.name\">{{i.title || i.name}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</form>\r\n<ng-template #info></ng-template>\r\n" }]
         }] });
 
 const SYSTEM_COMPONENTS = [RoleNodeComponent, ManageCubeIndexUtility, PermissionsUtility, PositionsComponent, ProfilerComponent,
@@ -32275,7 +32473,7 @@ SystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         /** design */
         IconPickerComponent,
         StateDesignComponent, RoleDesignComponent, GuideDesignComponent, RuleDesignComponent, ReportDesignComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, CubeDesignComponent, ActionDesignComponent, ReportDesignComponent, ViewDesignComponent, TypeDesignComponent,
-        CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
+        DesignerCubeFilterComponent, CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
         /** utilities */
         ConfigurationDesignerComponent, FormDesignerComponent, DesignerItemComponent,
         PermissionsUtility, ManageCubeIndexUtility, ProfileSettingsDialog,
@@ -32285,12 +32483,12 @@ SystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         SystemDiffComponent, DocumentTraceComponent, TraceElementComponent, ProfilerComponent,
         PositionsComponent, PositionsPopup,
         WorkflowComponent, WorkflowNodeComponent, RoleNodeComponent,
-        PatternsComponent, PrivilegesDesignComponent], imports: [CommonModule,
+        PatternsComponent], imports: [CommonModule,
         HttpClientModule,
         ReactiveFormsModule,
         FlexLayoutModule,
         RouterModule,
-        CdkScrollableModule,
+        ScrollingModule,
         SyncfusionDiagramModule,
         SyncfusionChartModule,
         SharedModule], exports: [PermissionsUtility, ManageCubeIndexUtility,
@@ -32308,7 +32506,7 @@ SystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         ReactiveFormsModule,
         FlexLayoutModule,
         RouterModule,
-        CdkScrollableModule,
+        ScrollingModule,
         SyncfusionDiagramModule,
         SyncfusionChartModule,
         SharedModule] });
@@ -32319,7 +32517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         /** design */
                         IconPickerComponent,
                         StateDesignComponent, RoleDesignComponent, GuideDesignComponent, RuleDesignComponent, ReportDesignComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, CubeDesignComponent, ActionDesignComponent, ReportDesignComponent, ViewDesignComponent, TypeDesignComponent,
-                        CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
+                        DesignerCubeFilterComponent, CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
                         /** utilities */
                         ConfigurationDesignerComponent, FormDesignerComponent, DesignerItemComponent,
                         PermissionsUtility, ManageCubeIndexUtility, ProfileSettingsDialog,
@@ -32329,7 +32527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         SystemDiffComponent, DocumentTraceComponent, TraceElementComponent, ProfilerComponent,
                         PositionsComponent, PositionsPopup,
                         WorkflowComponent, WorkflowNodeComponent, RoleNodeComponent,
-                        PatternsComponent, PrivilegesDesignComponent
+                        PatternsComponent
                     ],
                     providers: [
                         FormResolve, SystemService
@@ -32340,7 +32538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         ReactiveFormsModule,
                         FlexLayoutModule,
                         RouterModule,
-                        CdkScrollableModule,
+                        ScrollingModule,
                         SyncfusionDiagramModule,
                         SyncfusionChartModule,
                         SharedModule
@@ -32457,7 +32655,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 }]
         }] });
 
-registerLicense('ORg4AjUWIQA/Gnt2VVhhQlFaclhJXGFWfVJpTGpQdk5xdV9DaVZUTWY/P1ZhSXxRdkFjXX5ecnBUQ2lfVUI=');
 class BizDocModule {
     static forChild(config) {
         const { components, routes } = config;